javascript - 无法读取未定义的属性 'hello'

Question

这个问题已经有答案了:

How does the "this" keyword work, and when should it be used? (22 个回答)

已关闭 4 年前。

我有两个类 Foo 和 Bar。

还有 Foo 的礼节叫你好。

Bar 正在使用回调调用 Foo 的方法，该回调使用属性 hello。

每当 Foo 中的 hello 值发生变化时，Bar 使用的值应该相应同步。

但事实并非如此。如何重构以下代码来实现此目的？

  class Foo{
        start(){
            const bar = new Bar()
            bar.start(this.myFooCallback)
            this.hello = 'world'
        }
        myFooCallback(){
            console.log(this.hello)
        }
    }
    class Bar{
        start(cb){
            setInterval(()=>{
                cb()
            },1000)
        }
    }
    
    const foo = new Foo()
    foo.start()

Answer 1

您需要bind上下文:

  class Foo{
        start(){
            const bar = new Bar()
            bar.start(this.myFooCallback.bind(this))
            this.hello = 'world'
        }
        myFooCallback(){
            console.log(this.hello)
        }
    }
    class Bar{
        start(cb){
            setInterval(()=>{
                cb()
            },1000)
        }
    }
    
    const foo = new Foo()
    foo.start()

您可以阅读有关上下文和函数绑定(bind)的更多信息:

• Function binding
• You Don't Know JS: this & Object Prototypes