现在写JS代码都流行用class
了,自己在写一些东西都时候也会用。
但是在一个对象里如果绑定了某些事件需要在销毁时移除绑定,在使用bind
的情况下不能正常移除。
这里单独记录一下,如下代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
| class User {
constructor (name) { this.name = name; window.addEventListener("click", this.printName.bind(this)); }
name = "";
printName () { console.log(this.name); }
destroy () { window.removeEventListener("click", this.printName.bind(this)); }
}
|
User
类中printName
方法需要访问自己到属性,如果在绑定事件时不将上下文指向自己,那么在printName
中作用域会丢失,将会打印window.name
;
但是在使用bind
以后,destory
方法中的移除事件并不会生效,众所周知如果事件需要解绑,那么函数不能使用匿名函数
或直接function
,因为每次返回的都是不同的函数,使用bind
同理,返回的也是一个新的不同函数。
解决办法则是用一个属性去接收事件处理函数,则可以在多个地方使用:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
| class User {
constructor (name) { this.name = name; window.addEventListener("click", this.eventClick); }
name = "";
eventClick = this.printName.bind(this);
printName () { console.log(this.name); }
destroy () { window.removeEventListener("click", this.eventClick); }
}
|
本文转自:https://blog.csdn.net/qq_40936253/article/details/84972259
关于removeEventListener里使用里bind不生效解决办法