Question

当test.testHello(helloWorld.sayHello);运行时，它无法识别我已插入新问候语，问候语未定义。我可以使用bind来确保它在适当的范围内运行它，我不确定为什么它不在适当的范围内运行开始。有人可以解释为什么会发生这种情况并向我展示更好的解决方案吗？

解决方案：test.testHello(helloWorld.sayHello.bind(helloWorld));

http://jsfiddle.net/EzabX/

var HelloWorldClass = function() {


 this.greetings = [];
}
HelloWorldClass.prototype.addGreeting = function(greeting) {
    this.greetings.push(greeting);
}
HelloWorldClass.prototype.sayHello = function() {
    document.getElementById('output').innerHTML += this.greetings;
    this.greetings.forEach(function(greeting) {
        greeting.execute();        
    })
}

var TestClass = function() {
    this.testHello = function(callback) {
        alert("TestHello is working, now callback");
        callback();
    }
}


var main = function() {
    var helloWorld = new HelloWorldClass();
    var test = new TestClass();
    helloWorld.addGreeting({
        execute: function() {
            alert("Konichiwa!");
        }
    });
    helloWorld.sayHello();

    test.testHello(helloWorld.sayHello);
}

main();

Answer 1

当作为回调调用时，在原型函数范围内管理this变量对于新手用户来说可能很复杂。您并不总是需要一个类的所有函数的原型。如果你真的想使用原型函数，请查看Javascript .bind（this）实现。 Google和Stackoverflow是您在该主题上的朋友。示例：Preserving a reference to "this" in JavaScript prototype functions

使用this引用DOM Window对象而不是HelloWorld实例的违规代码：

this.greetings.forEach(function(greeting) {
        greeting.execute();        
    })

非原型版本，效果很好，易于使用。小提琴：http://jsfiddle.net/EzabX/2/

var HelloWorldClass = function() {
    var greetings = [];

    this.greetings = greetings;

    this.addGreeting = function(greeting) {
        greetings.push(greeting);
    };

    this.sayHello = function() {
        document.getElementById('output').innerHTML += greetings;
        greetings.forEach(function(greeting) {
        greeting.execute();        
        })
    }; }

为什么我的回调会失去其范围？

1 个答案: