Question

在我的示例中，我想模拟jquery.each方法，因为我创建了JQueryX对象，可以使用类选择器JQueryX(.classname)进行选择，并将其添加到其属性selection，现在是一个数组我坚持使用console.log(this, 'i was clicked');行this返回窗口对象

var x = new JQueryX('.drg');

x.each(function() {
    console.log(this);
    this.addEventListener("click", function () {
        console.log(this, 'i was clicked');
    });
});

JQueryX.prototype.each = function (func,paras){
    paras = paras || [];
    for(var i=0; i<this.selection.length; i++) {
        var that = this.selection[i];
        console.log(that);
        func.apply(that,paras);
    }
};

对我来说奇怪的是this如果我从行console.log(this);

中调用它，则返回我想要的对象

Answer 1

那是因为窗口调用了监听器函数，请尝试：

x.each(function() {
    var self = this;
    this.addEventListener("click", function () {
        console.log(self, 'i was clicked')
    });
});

事实上，当您向对象this.addEventListener(...)添加回调函数时，不是在事件追加时调用该函数的对象本身，它就是窗口。这就是为什么this是你运作的窗口的原因。

因此，您必须使用var self = this;保存对象的引用，然后在调用回调方法时，它将对您的对象具有正确的引用。

这会返回窗口对象

1 个答案: