addEventListener this 指向问题

by acdzh · 2021-08-19 12:26:03

先看一段代码:

class A {
  constructor() {
    this.msg = "I am class A";
    window.addEventListener('message', this.onmsg, false);
  }
 
  onmsg() {
    console.log(this.msg);
  }
}
 
window.msg = "This is window";
const a = new A();
window.postMessage('test');

输出的结果是 This is window. 这是因为这里 addEventListener 中的事件函数 onmsg 的 this 实际上 window 而不是 a. 如果想明确 this 的话, 需要指定 this 的指向.

class A {
  constructor() {
    this.msg = "I am class A";
    window.addEventListener('message', this.onmsg.bind(this), false);
  }
 
  onmsg() {
    console.log(this.msg);
  }
}
 
window.msg = "This is window";
const a = new A();
window.postMessage('test');

Version	Action	Time
1.0	Init	2021-08-19 20:26:03