手机网站图片自适应代码,做网站定金一般多少,京津冀协同发展10周年,客户推广公司概述
ES6提供了类#xff0c;给模块化带来了很大的帮助。在类里面绑定事件#xff0c;一来是为了使得代码结构清晰#xff0c;二来是为了可以使用类的变量和方法。但是#xff0c;由于事件的回调函数并不是由类的实例对象触发#xff0c;所以#xff0c;事件回调函数里面…概述
ES6提供了类给模块化带来了很大的帮助。在类里面绑定事件一来是为了使得代码结构清晰二来是为了可以使用类的变量和方法。但是由于事件的回调函数并不是由类的实例对象触发所以事件回调函数里面并不能访问类的this变量。另外我们也不希望事件回调函数对外暴露免得调用者直接调用。
简单来说我们就希望 1. 事件回调函数要能访问类的this变量 2. 事件回调函数不能直接调用
如何访问类的this
方案一将类的this保存成一个局部变量
this的指代是动态改变的但是局部变量的指代却是明确的并且函数定义的局部变量在整个函数里面都可以用。所以我们可以使用let that this保存类的this变量。 class A{//绑定事件的方法bindEvent(){let that this;this.button1.on(click,function(e){this.addClass(on); //this指代所点的元素that.doSomething(); //that指向类的this})}doSomething(){//事件处理函数}//解绑事件unBindEvent(){this.button1.off();}}这种方法只在使用jquery时有用因为jquery解绑事件不需要提供回调函数直接off就可以了。但是原生js需要提供回调函数也有它的道理因为同一个元素的同一种事件可以绑定多个回调函数所以你需要指出释放哪一个。
方案二使用bind()改变this的指向
有类A,在A中要添加mousemove事件根据需求写出下面代码:
class A{//添加事件addEvent(){document.addEventListener( mousemove, onMouseMove, false );}//添加事件removeEvent(){document.removeEventListener( mousemove, onMouseMove , false );}}//事件回调函数中
function onMouseMove(event){console.log(this); //#document
}
但是这样获取不到类的this。onMouseMove的this将会指向document。因为事件是添加到document上的所以自然是由document触发事件并调用onMouseMove进行处理所以onMouseMove中的this指向document。
比较正确的做法是使用bind()函数改变onMouseMove中this的指向同时将事件回调函数移到类外面
class A{//添加事件addEvent(){document.addEventListener( mousemove, onMouseMove.bind(this), false );}//添加事件removeEvent(){document.removeEventListener( mousemove, onMouseMove.bind(this) , false );}}//事件回调函数中
function onMouseMove(event){console.log(this);
}但是这样仍然存在问题事件移除不掉了因为this.bind()每次调用都会返回一个新的函数所以
document.addEventListener( mousemove, onMouseMove.bind(this), false );
和
document.removeEventListener( mousemove, onMouseMove.bind(this), false );
两者的第二个参数并不相同。
正确的做法是 将bind()的结果保存到一个变量中
class A{constructor(){this._onMouseMove onMouseMove.bind(this); //看这里}//添加事件addEvent(){document.addEventListener( mousemove, this._onMouseMove , false );}//添加事件removeEvent(){document.removeEventListener( mousemove, this._onMouseMove , false );}}//事件回调函数中
function onMouseMove(event){console.log(this);
}
如何定义私有的事件回调函数
在Java中不想对外暴露的方法可以定义为私有方法但是ES6并没有提供私有方法只能通过一些办法模拟。但是事件回调函数比较特别因为事件除了定义还要移除这会带来额外的麻烦。但还是有办法的
使用Symbol变量来定义
const _onMouseMove Symbol(_onMouseMove);
class A{constructor(){this[_onMouseMove] onMouseMove.bind(this);}//添加事件addEvent(){document.addEventListener( mousemove, this[_onMouseMove] , false );}//添加事件removeEvent(){document.removeEventListener( mousemove, this[_onMouseMove] , false );}}//事件回调函数中
function onMouseMove(event){console.log(this);
}
Symbol(_onMouseMove)会产生一个唯一的值这个值是在对象创建的时候才生成的所以调用者没有办法在写代码时知道这个值的所以就无法调用使用这个值命名的方法了这样就定义了一个私有方法。 参考链接
