JavaScript中的this指针与回调函数

在常规的面向对象语言中(比如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指针，可以参阅下面几篇文档：

JavaScript中的this指针与回调函数

Comments