关于bind

下面这段代码会输出什么结果?

class Foo {

constructor(name) {

this.name = name

}

greet() {

console.log('hello, this is ', this.name)

}

someThingAsync() {

return Promise.resolve()

}

asyncGreet() {

this.someThingAsync().then(this.greet)

}

}

new Foo('dog').asyncGreet()

如果你说程序会崩溃，并且报错：Cannot read property ‘name’ of undefined。

1、因为第16行的geet没有在正确的环境下执行。当然，也有很多方法解决这个BUG!

我喜欢使用bind函数来解决问题：

asyncGreet () {

this.someThingAsync()

.then(this.greet.bind(this))

}

这样会确保greet会被Foo的实例调用，而不是局部的函数的this。

2、如果你想要greet永远不会绑定到错误的作用域，你可以在构造函数里面使用bind来绑 。

class Foo {

constructor(name) {

this.name = name this.greet = this.greet.bind(this)

}

}

3、你也可以使用箭头函数(=>)来防止作用域被修改。

asyncGreet() {

this.someThingAsync().then(() = >{

this.greet()

})

}