addEventListener this 指向问题

by acdzh · 2021年8月19日12:26 · 11 WORDS  ·  ~ 1 mins reading time · 0  Visitors | RAW

先看一段代码:

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');