jQuery : reserve key this, 和不明确的情况

Question

我对这个保留 key 有点困惑，并且案例导致了错误。这是导致错误的示例代码。

var sample = {
    init: function() {
        this.sampleFunction0();
        this.sampleFunction1();
    },
    sampleFunction0 : function(){
        var something0, something1, something2;
        something0 = this.sampleFunction2(); // works, there is no ambiguity whit 'this'
        jQuery('#list li').click(function(){
            something1 = this.sampleFunction2(); // ambiguity: not works, but sample.sampleFunction2(); works
            something1 = sample.sampleFunction2(); // it´s works
            something2 = $(this).text(); // list item val
            console.log(something0) // something
            console.log(something1); // something : using sample.sampleFunction2();
            console.log(something2); // item val
        });
    },
    sampleFunction1 : function(){
        return 'someting';
    },
    sampleFunction2 : function(){
        return 'something';
    }
}

jQuery(document).ready(function(){
    sample.init();
});

我不知道使用 sample.sampleFunction2(); 代替 this.sampleFunction2();

是否正确

Answer 1

根据您的问题，我认为您可能知道这一点，但是:在事件处理程序中，this 指的是您 Hook 事件的元素，这当然就是为什么 this.sampleFunction2 () 不起作用。因此 this 将是被点击的 li 元素 - 这通常非常方便。

在您的具体情况下，使用 sample 而不是 this 就可以了，因为您的 sample 对象是一次性的，不会有'不能超过其中之一。所以是的，只需使用 sample.sampleFunction2(); 而不是 this.sampleFunction2();。

如果可能有多个(通过构造函数创建的东西等)，在这种情况下(没有双关语)典型的做法是在闭包中定义一个局部变量(您的函数)重新传入click)可以关闭:

sampleFunction0 : function(){
    var something0, something1, something2, self = this; // <==== CHANGE
    something0 = this.sampleFunction2(); // works, there is no ambiguity whit 'this'
    jQuery('#list li').click(function(){
        something1 = self.sampleFunction2(); // <==== CHANGE
        something2 = $(this).text(); // list item val
    });
},

有时使用 jQuery 的 proxy 很有用。函数，但不是在这种情况下，因为 A)您已经定义了一个闭包，并且 B)您正在将 this 用于其他用途。当您尝试绑定(bind)在其他地方定义的函数，以及需要 this 具有不同于通常值的特定值时，proxy 非常有用有。

更多阅读:

• You must remember this
• Mythical methods
• Closures are not complicated