javascript - 使用绑定(bind)确保方法引用对象，但它似乎不起作用

Question

为了进一步使用正确的 Javascript 进行实验，我尝试从一种方法 (SayHello) 运行另一种方法 (WaitAndSayHello)。由于涉及回调，我使用了 bind确保每个方法中的“this”都指向对象。

pretendThingConstructor = function (greeting) {
    this.greeting = greeting;

    this.SayHello = function() {
        console.log(this.greeting); // Works
    };

    this.WaitAndSayHello = function() {
        setTimeout(function() { 
            console.log(this)  
            this.SayHello() // Fails
        }, 500);
    }
    this.WaitAndSayHello.bind(this); // This bind() doesn't seem to work
}


var pretend_thing = new pretendThingConstructor('hello world');
pretend_thing.SayHello();
pretend_thing.WaitAndSayHello();

代码打印“hello world”，然后第二次失败并返回“Object # has no method 'SayHello'”。我可以从 console.log 中看到，“this”指的是该事件。但是不应该使用 bind() 来解决这个问题吗？

如何使 bind() 工作？

此外，我想干净地做到这一点:即，不在多个地方引用对象的名称。

Answer 1

您不能“延迟调用”.bind()。您需要在函数声明时调用它，例如

this.WaitAndSayHello = function() {
    setTimeout(function() { 
        console.log(this)  
        this.SayHello() // Fails
    }, 500);
}.bind(this)

此外，您传递给 setTimeout() 的匿名函数会创建一个新的上下文，因此具有它自己的 this 上下文值。

你要么需要在变量中保存对“外部this”的引用

this.WaitAndSayHello = function() {
    var self = this;

    setTimeout(function() { 
        console.log(self)  
        self.SayHello() // succeeds
    }, 500);
}.bind(this)

或者再次使用.bind()，比如

this.WaitAndSayHello = function() {
    setTimeout(function() { 
        console.log(this)  
        this.SayHello() // succeeds
    }.bind(this), 500);
}.bind(this)