OOP JavaScript：从回调函数内部调用方法

我正在使用OOP原理构建一个jQuery应用程序，并尝试实现一个外部添加的回调函数，该函数从对象内部调用一个方法

function testObject() {
    var self = this;

    var functions = new Array();

    this.updateObject = function() {
        console.log('updated')
    }

    this.addFunction = function(func) {
        functions.push(func)
    }

    this.callFunctions = function() {
        $.each(functions, function(key, value) {
            functions[key]()
        })
    }
}



var myobject = new testObject();
myobject.addFunction(
        function() {
            $(':text').on('change', function() {
                return self.updateObject();
            })
        }
)

这是我正在构建的插件的一个过于简化的版本。回调可以正常工作，但我不能使用self.updateObject（）；在它内部，因为它输出非法调用

如何从回调内部正确调用方法

function testObject() {
    var self = this;

    var functions = new Array();

    this.updateObject = function() {
        console.log('updated')
    }

    this.addFunction = function(func) {
        functions.push(func.bind(self)) // Bind the context
    }

    this.callFunctions = function() {
        $.each(functions, function(key, value) {
            functions[key]()
        })
    }
}

var myobject = new testObject();

myobject.addFunction(
        function() {
            var self = this;

            $(':text').on('change', function() {
                return self.updateObject();
            })
        }
)

或者您也可以使用此选项：

 myobject.addFunction(
            function() {    
                $(':text').on('change', this.updateObject);
            }
    )

---

问题是

self

超出了回调函数的范围，因为该函数只在其定义的范围内包含变量。回调是在

testObject

之外定义的

解决方案是，当您在

callFunctions（）

中调用它时，使用将回调函数中的

this

上下文绑定到

self

。然后在回调中，可以使用

this

引用

testObject

实例。在回调示例中，它包含一个jQuery事件，因此您将丢失

this

上下文。为了纠正这个错误，您可以在jQuery更改事件之前创建一个本地

self

，它等于

this

function testObject() {
    var self = this;

    var functions = new Array();

    this.updateObject = function() {
        console.log('updated')
    }

    this.addFunction = function(func) {
        functions.push(func)
    }

    this.callFunctions = function() {
        $.each(functions, function(key, value) {
            functions[key].call(self); // call it and bind the context to self
        })
    }
}

var myobject = new testObject();
myobject.addFunction(
        function() {
            var self = this; // needed because the change event will overwrite 'this'
            $(':text').on('change', function() {
                return self.updateObject(); // use self to access testObject
            })
        }
)
myobject.callFunctions();

---

或者，您可以将

self

作为参数传递给回调函数。为此，请将

.call（）

行更改为：

functions[key].call(null, self);

并将回调更改为接受如下参数：

myobject.addFunction(
        function(self) { // self as an argument
            $(':text').on('change', function() {
                return self.updateObject(); // use self to refer to testObject
            })
        }
)

---

你好，先生！非常感谢你复杂的回答。不幸的是，我仍然犯同样的错误。未捕获类型错误：非法调用。我试过用很多方法来调用它，但它不起作用，即使理论上应该是这样。我第一次做对了。问题出在updateObject（）方法中，该方法非法调用了一个方法。谢谢你的帮助