jquery - 在 jQuery 中扩展原型时，如何保持对 this 关键字的控制？

Question

我在 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(){}
});

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

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

Answer 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(){}
});

Answer 2

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(){}
});

试试看。:)

Answer 3

该.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(){}
});