在 jQuery 中扩展原型时如何保持对 this 关键字的控制？ [复制]答案

【问题标题】：How can I maintain control of the this keyword when extending prototypes in jQuery? [duplicate]在 jQuery 中扩展原型时如何保持对 this 关键字的控制？ [复制]
【发布时间】：2009-08-11 18:05:27
【问题描述】：

我在 jQuery 中实现了一个类类结构，但是当我尝试调用我的一些函数时遇到了一些麻烦。

结构是这样设置的：

MyClass = function(name) {
    this.init(name);
}
$.extend(MyClass.prototype, {
    init: function(theName) {
        this.myFunction(); // works
        $('.myclass').each(function(){
            this.myFunction(); // doesn't work
        });
    },
    myFunction = function(){}
});

我遇到的问题是，当我尝试从 jQuery 块（如上面的 each() 构造）内部调用我的一个函数（例如，myFunction()）时，我收到错误“myFunction() is not a function 。”

我认为这与 this 关键字在 jQuery 块中更改其含义有关，但我不确定。任何帮助将不胜感激！

【问题讨论】：

@Bergi 所以这个问题是 4 年后发布的问题的重复？不错。
是的，2013 年的那个问题是一个规范的参考资料，它广泛地解释了您也遇到的问题以及所有（原文如此！）解决方案。请不要感到被冒犯，你没有做错任何事 :-) 我只是将未来的读者引向规范。
我没有被冒犯，我绝对理解！ ;) 围绕此功能的副本让 OP 看起来像是草率地问了一个已经有了答案的问题——“这个问题在这里已经有了答案：”“这个问题之前已经被问过并且已经有了答案。 "只是有点奇怪。
是的，它确实应该说“This question has a better answer here”之类的。另见my MSO post
啊，很好。在那边给你 +1 了。

标签： jquery prototype oop this javascript

【解决方案1】：

由于作用域的工作原理，您需要将 this 分配给另一个变量。

MyClass = function(name) {
    this.init(name);
}
$.extend(MyClass.prototype, {
    init: function(theName) {
        this.myFunction(); // works
        var that = this;
        $('.myclass').each(function(){
                this.myFunction(); // doesn't work
                that.myFunction(); // should work
        });
    },
    myFunction = function(){}
});

【讨论】：

【解决方案2】：

.each() 函数更改 this 的上下文（就像 JavaScript 中的任何函数一样）。

你需要做这样的事情：

MyClass = function(name) {
    this.init(name);
}
$.extend(MyClass.prototype, {
    init: function(theName) {
        this.myFunction(); // works
        var myClass = this;
        $('.myclass').each(function(){
                myClass.myFunction(); // doesn't work
        });
    },
    myFunction = function(){}
});

【讨论】：

你知道..你的例子说myClass.myFunction();不起作用......

【解决方案3】：

MyClass = function(name) {
    this.init(name);
}
$.extend(MyClass.prototype, {
    init: function(theName) {
        this.myFunction(); // works
        temp = this;
        $('.myclass').each(function(){
                temp.myFunction(); // works
        });
    },
    myFunction = function(){}
});

试试看。 :)

【讨论】：

你知道..你的例子说temp.myFunction();不起作用......
当我复制 OP 的代码时，我忘了删除评论。我的错。