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

我遇到的问题是，当我尝试从jQuery块（如上面的myFunction()构造）中调用我的一个函数（例如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(){}
});

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

3 个答案: