1

我有这个代码：

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，对没有绑定实例的函数内部的引用必须引用窗口对象，而不是undefined,至少在许多浏览器上都是这样。

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

注意：我正在使用 jQuery 并且this.elements已经定义。

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

4

3 回答 3

3

根据jQuery$.each文档：

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

在 JavaScript 中，当您将回调函数交给高阶函数（在本例中为$.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第二个参数，该参数在执行期间用作每个回调的值。

于 2012-05-01T04:50:11.570 回答
1

尝试$.each用这样的包装你的功能$.proxy......

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

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

于 2012-05-01T04:12:59.687 回答
1

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

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

于 2012-05-01T04:29:17.117 回答