javascript - 有人可以告诉我为什么我不理解这个例子中的范围吗？

Question

您必须原谅我——我是一名经验丰富的 Java 程序员，但仍在为两种语言之间的语义差异而苦苦挣扎!

我有一个小的 JavaScript 对象构造函数。它包括一个获取一小段 Ajax 数据的 jQuery 函数。当数据返回时，我想将它与在对象构造函数顶部定义的变量 (renderMode) 结合使用，但是，大概是因为函数 block 关闭，我得到了“未定义”。

1. 谁能给我一段更正的代码，告诉我如何在函数(数据)中访问 renderMode
2. 几乎同样重要的是，有人可以向我解释为什么我所做的不起作用!

例子如下:

function AsyncRequest() {
    this.renderMode = RenderMode.NONE;
    this.setId = setId;

    function setId(v) {
        this.id = v;
    }
    this.setURL = setURL;

    function setURL(v) {
        this.URL = v;
    }

    this.render = render;

    function render(element) {
        $.get(
            this.URL,
            function (data) {
                // The data comes back just fine ...
                // ... and I know a value was previously assigned to renderMode
                // ... in this instance of AsyncRequest, but how do I get at it ?
                console.log("Render mode: " + this.renderMode); // this.renderMode is undefined
            }
        );
    }
}

Answer 1

与 Java 不同，JavaScript 中的 this 主要取决于函数的调用方式，而不是函数的定义位置。 (ES6 将添加一种方法让 this 词法绑定(bind)，但现在它主要由函数调用绑定(bind)。)所以你传递给 $.get 的回调正在使用 this 调用而不是指您期望的对象。

你可以通过使用闭包来解决这个问题:

function render(element) {
    var self = this;  // <=== Note
    $.get(
        this.URL,
        function (data) {
            console.log("Render mode: " + self.renderMode);
            // Note ----------------------^
        }
    );
}

在那里，当在名为 self 的变量中调用 render 时，我们记得 this 是什么(名称无关紧要) ，然后利用回调函数是对 render 调用上下文的闭包这一事实，因此我们可以访问 self 变量。

也可以用ES5的Function#bind来解决:

function render(element) {
    $.get(
        this.URL,
        function (data) {
            console.log("Render mode: " + this.renderMode); // this.renderMode is undefined
        }.bind(this) // <== Note
    );
}

Function#bind 返回一个函数，该函数在被调用时调用原始函数，并将 this 设置为您给它的值。

更多(在我的博客上):

• Closures are not complicated
• You must remember this