2

开始阅读 javascript ninja book，我真的不明白为什么下面的示例中需要“this”这个词。我试过了，没有它，代码没有运行。'this' 在以下上下文中的作用是什么？我想我理解“这个”（或者可能根本不理解），但在下面，我就是不明白。请告诉我！谢谢你。

<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
(function() {
    var results;
    this.assert = function assert(value,desc) {
        var li = document.createElement("li");
        li.className = value ? "pass" : "fail";
        li.appendChild(document.createTextNode(desc));
        results.appendChild(li);
        if ( !value ) {
            li.parentNode.parentNode.className = "fail";
        }
        return li;
    };

    //this.test = function test(name, fn) {
    this.test = function test(name, fn) {
        results = document.getElementById("results");
        results = assert(true,     name).appendChild(document.createElement("ul"));
        fn();
    };
})();

window.onload = function() {
    test("A test", function() {
        assert(true, "First assertion completed");
        assert(true, "Second assertion completed");
        assert(true, "Third assertion completed");

    });

    test("Another stupid test", function() {

        assert(true, "First assertion completed");
        assert(true, "Second assertion completed");
        assert(true, "Third assertion completed");

    });
    test("A third test", function() {
        assert(null, "fail");
        assert(5, "pass")

    });

};
</script>
<style type="text/css">
    #results li.pass { color: green;}
    #results li.fail { color: red;}

</style>
</head>
<body>
<ul id="results"</ul>
</body>
</html>
4

2 回答 2

3

该代码利用了这样一个事实，即当在没有任何上下文的情况下调用函数时，未处于“严格”模式的代码将设置this为对全局上下文 ( ) 的引用。window因此，在第一个函数中，thisiswindow和“test”和“assert”符号被绑定为全局变量。

就我个人而言，我认为这是一段用于教学目的的有问题的代码。我认为像这样编写初始函数会更好（也更清晰）：

(function(global) {
    var results;
    global.assert = function assert(value,desc) {
        var li = document.createElement("li");
        li.className = value ? "pass" : "fail";
        li.appendChild(document.createTextNode(desc));
        results.appendChild(li);
        if ( !value ) {
            li.parentNode.parentNode.className = "fail";
        }
        return li;
    };

    //this.test = function test(name, fn) {
    global.test = function test(name, fn) {
        results = document.getElementById("results");
        results = assert(true,     name).appendChild(document.createElement("ul"));
        fn();
    };
})(this);

上面的代码可以在“严格”模式下正常工作，并且更明确地全局绑定这些符号。

于 2015-07-01T13:06:38.910 回答
3

为了更好地了解其this工作原理，请查看此相关问题的答案：

“this”关键字是如何工作的？

这应该教你所有你需要知道的（以及更多）关于thisJavaScript 的知识。

于 2015-07-01T13:07:11.767 回答