javascript - 如何从 JS 类中设置的 addEventListener 调用变量？

Question

这个问题已经有答案了:

How to access the correct `this` inside a callback (15 个回答)

已关闭 3 年前。

我正在学习在 Javascript 中使用类，并且我知道如何从方法调用 constructor() 中定义的变量。我的问题是，当监听器调用方法本身时，我无法使用相同的变量。

我尝试添加 this.value01.bind(this) 但未成功。

这是我正在使用的代码:

class mytest extends HTMLElement {
    constructor(){
    super();
    this.value01 = document.body.clientWidth;

    this.testingMethod();

    window.addEventListener( 'resize', this.onWindowResize, false)
  }

  connectedCallback(){
    console.log( "From connectedCallback()", this.value01 ); // works
  }

  testingMethod(){
    console.log( "From testingMethod()", this.value01 );
  }

  onWindowResize(){
    console.log( "From onWindowResize()", this.value01 ); // undefined!
  }
}
customElements.define("my-test", mytest);

此网址提供 fiddle :https://jsfiddle.net/1mohk8jw/2/调整窗口大小并检查控制台以查看问题。

我想要一种重用构造函数中定义的变量并在监听器调用的方法中使用的方法。如何使用常量从 onWindowResize() 方法中删除未定义的内容？

Answer 1

您会看到未定义，因为调用回调时与this的绑定(bind)正在发生变化，它指向全局对象。

要解决这个问题，您需要执行以下两件事之一:

1. 将 this 显式绑定(bind)到您的回调，以便 this 始终引用您的类实例。

2. 使用箭头函数语法 () => 保留词法 this

class Mytest{
  constructor(){
    this.value01 = document.body.clientWidth;
    window.addEventListener('click', this.thisTestWithoutBind, false);
    window.addEventListener('click', this.thisTestWithBind.bind(this), false);
    window.addEventListener('click', () => this.thisTestWithArrowFunc(), false);
  }

  thisTestWithoutBind(){
    console.log(Object.is(window, this)); //true
    console.log( "From thisTestWithoutBind()", this.value01 ); // undefined!
  }
  
  thisTestWithBind(){
    console.log( "From thisTestWithBind()", this.value01 ); // not undefined!
  }
    
  thisTestWithArrowFunc(){
    console.log( "From thisTestWithArrowFunc()", this.value01 ); // not undefined!
  }
}
new Mytest();