来自 javascript 忍者秘密书的例子

Question

开始阅读javascript忍者书，我真的不明白为什么在下面的例子中需要'this'这个词。我试过了 w/out 它和代码没有运行。 '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>

Answer 1

该代码利用了这样一个事实，即当一个函数处于在没有任何上下文的情况下调用。因此，在第一个函数中，this 是 window，并且 "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);

以上代码在 "strict" 模式下可以正常工作，并且更明确地全局绑定这些符号。

Answer 2

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

How does the "this" keyword work?

这应该会告诉您关于 JavaScript 中 this 的所有您需要了解的（以及更多）信息。

来自 javascript 忍者秘密书的例子

Example from book secrets of javascript ninja

javascript

this

ninja