在常规的面向对象语言中(比如C++),this指针的指向是确定的。但在JavaScript中,this指向依赖于运行环境。
下面的例子,预期的输出是nihao:
class A {
setEventListener(func) {
this.callback = func;
}
triggerEvent() {
this.callback();
}
}
class B {
constructor(a) {
a.setEventListener(this.onEvent);
this.localValue = "nihao";
}
onEvent() {
console.log(this.localValue);
// console.log(this);
}
}
var a = new A();
var b = new B(a);
a.triggerEvent();但实际输出是undefined。
在onEvent中打印下this,可以看到,它指向的是对象a而不是b:
A { callback: [Function: onEvent] }这是因为在JavaScript中,this指向依赖于运行环境。上面的回调是被对象a执行的,所以onEvent的执行上下文是对象a。这有点像dart的Mixins。
可以在注册回调的时候,调用bind函数强制进行强制绑定,将下面的代码:
a.setEventListener(this.onEvent);改成:
a.setEventListener(this.onEvent.bind(this));这样就能得到预期的输出nihao。
关于JavaScript中this指针,可以参阅下面几篇文档: