JavaScript 和 jQuery，匿名函数中的“this”

Question

我有这个代码：

PageList: function(url, index, classes){
    this.url = url;
    this.index = index;
    ...
};

PageList.prototype.toHTML = function(){
    var div = $('<div class="container"></div>');
    var p = $('<p></p>');
    var link = $('<a></a>');
    $.each(this.elements, function(index, array_value){
          console.log(this.url);
          ...
    }
}

它按预期工作。

问题是console.log(this.url) 正在打印undefined，所以我重新编写了代码，如下所示：

PageList.prototype.toHTML = function(){
    var div = $('<div class="container"></div>');
    var p = $('<p></p>');
    var link = $('<a></a>');
    var instance = this;
    $.each(this.elements, function(index, array_value){
               console.log(instance.url);
        }
}

我知道问题在于闭包没有将 this 作为实例的值，但据我所知，在没有绑定实例的函数内必须引用 this引用 window 对象，而不是 undefined，至少在许多浏览器上都是这样。

那么我的代码到底发生了什么。

注意：我使用的是 jQuery，this.elements 已经定义。

编辑：现在我发现$.each 是一个非实例函数，所以我的回调是从$.each 调用的，但它必须是window 对this 的引用，还在考虑它。

Answer 1

根据jQuery docs为$.each：

值[当前元素]也可以通过this关键字访问...

在 JavaScript 中，当您将回调函数交给 higher-order function（在本例中为 $.each）时，高阶函数可以决定回调运行时 this 的值。您无法控制这种行为 - 只是不要使用 this（例如，在您的示例中使用 instance 之类的引用或通过闭包）。

查看上下文设置函数 Function.call 和 Function.apply 以了解像 $.each 这样的高阶函数如何设置回调的 this 上下文。一旦你阅读了那些 MDN 页面，它可能会弄清楚一些事情。

这是一个简单的例子：

Array.prototype.forEachWithContext(callback, this_in_callback) {
    for(var i = 0; i < this.length; ++i) {
        callback.call(this_in_callback, i, this[i]);
    }
}

并使用它：

PageList.prototype.toHTML = function(){
    //...
    this.elements.forEachWithCallback(function(index, array_value){ ... }, this);
}

我的示例Array.forEachWithContext 类似于Array.forEach。但是，它需要一个回调和第二个参数，该参数在执行每个回调期间用作this 的值。

Answer 2

尝试使用$.proxy 包装您的$.each 函数...

$.each(this.elements, $.proxy(function(index, array_value){
    console.log(this.url);
},this));

$.proxy 将确保 this 引用您的 PageList...

Answer 3

我知道问题在于闭包没有将 this 作为实例的值，但据我所知，在没有绑定实例的函数内部对 this 的引用必须引用窗口object，而不是 undefined，至少在许多浏览器上都是这样。

this 是 window。您正在打印 window.url，这是未定义的。试试console.log(this)，它应该会产生window。