Question

我上了这个课：

class test{
    constructor(){
        document.addEventListener('click', handle);
        this.handle = this.handle.bind(this);
    }

    handle(){
        console.log(this); //returns document element
    }
}

new test()

我将this绑定到handle事件，但它仍返回document元素。我尝试使用箭头功能，但它可以正常工作，但我想知道是否可以在不使用箭头功能的情况下做到这一点...

Answer 1

在绑定之前分配。

您以为引用将被修改，但是，您只是为该属性分配了一个新值，而不是对其进行修改。

class test {
  constructor() {
    this.eleFromEstack = "Test"; //  Just a test!
    this.handle = this.handle.bind(this);
    document.addEventListener('click', this.handle);
  }

  handle() {
    console.log(this);
  }
}

new test();

<h1>Click!!</h1>

Answer 2

在向this回调提供handler函数时绑定addEventListener值。

class Test{
    field = "hello"
    handle(){
        console.log(this); //returns document element
    }
    constructor(){
        document.querySelector("#container").addEventListener('click', this.handle.bind(this));
       
    }
   
}
let test = new Test();

<div id="container">test</div>

Answer 3

没关系，我的本地服务器正在使用更新后的代码缓存JS文件

Javascript类方法绑定不起作用

3 个答案: