Javascript类方法绑定不起作用

Question

I have this class:

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

I'm binding this to the handle event but it still returns the document element. I tried using arrow functions and it works but I want to know if I can do it without using arrow functions...

Answer 1

Assign before the binding.

You're thinking that a reference will be modified, however, you're only assigning a new value to that attribute rather than modifying it.

 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

Bind the this value when supplying the handler function to the addEventListener callback.

 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 文件