在使用js面向对象的过程中，在涉及到鼠标事件的时候，会有一些问题。主要的问题是事件函数中this的指向会被改变，并不是指向的当前类。有些时候可以通过匿名函数的方式来解决问题，但有时候在程序运行过程中，需要将绑定的事件移除掉，这就不能使用匿名函数的方式，因此对这个问题进行研究。
1.实例
需要实现一个需求，我们希望点击btn1后给btn3添加事件，点击btn2后移除那个事件，而加给btn3的事件为，当点击按钮后，需要能显示obj对象中的obj.word。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button id="btn1">btn1</button>
<button id="btn2">btn2</button>
<button id="btn3">btn3</button>
<script>
var button1 = document.getElementById('btn1');
var button2 = document.getElementById('btn2');
var button3 = document.getElementById('btn3');
var word = 'outword';
var Obj = function () {};
Obj.prototype = {
btn1: button1,
btn2: button2,
btn3: button3,
word: 'inword',
init: function () {
this.btn1.addEventListener('click', this.add.bind(this));
this.btn2.addEventListener('click', this.remove.bind(this));
},
add: function () {
this.btn3.addEventListener('click', this.doSomething);
},
remove: function () {
this.btn3.removeEventListener('click', this.doSomething);
},
doSomething: function () {
console.log(this.word);
}
}
var test = new Obj();
test.init();
</script>
</body>
</html>
以上为第一种写法。
在这种情况下，
- 点击btn1可以添加事件
- 点击btn2可以移除事件
- 点击btn3，控制台打印出undefined
点击btn3后执行的doSomething中的this为btn3这个按钮它本身，所以就会有undefined的结果。
因此不符合需求。
再试验第二种写法
add: function () {
var self = this;
this.btn3.addEventListener('click', function(){
self.doSomething();
});
},
remove: function () {
var self = this;
this.btn3.removeEventListener('click', function(){
self.doSomething();
});
},
在这种情况下，
- 点击btn1可以添加事件
- 点击btn2不能移除事件
- 点击btn3，控制台打印出"inword"
点击btn3，控制台打印出正确的"inword"，说明作用域是正确的。但是点击btn2不能移除事件，原因是add中添加的匿名函数和remove中的匿名函数其实是两个函数，并不是同一个函数，所以移除的时候没有成功。
因此不符合需求。
再试验第三种写法
add: function () {
this.btn3.addEventListener('click', this.doSomething.bind(this));
},
remove: function () {
this.btn3.removeEventListener('click', this.doSomething.bind(this));
},
在这种情况下，
- 点击btn1可以添加事件
- 点击btn2不能移除事件
- 点击btn3，控制台打印出"inword"
这一种的写法上比起匿名函数的写法要简洁一些，但是本次的结果和上次的一样，原因也比较类似，都是因为add中添加的this.doSomething.bind(this)和remove中的this.doSomething.bind(this)其实是两个函数。由此可以得到启发，如果在add中将执行的那个函数保存起来，然后在remove的时候也使用它，即可达成目的。
因此不符合需求。
再试验第四种写法
add: function () {
this.doSomethingBind = this.doSomething.bind(this);
this.btn3.addEventListener('click', this.doSomethingBind);
},
remove: function () {
this.btn3.removeEventListener('click', this.doSomethingBind);
this.doSomethingBind = null;
},
在这种情况下，
- 点击btn1可以添加事件
- 点击btn2可以移除事件
- 点击btn3，控制台打印出"inword"
通过this.doSomething.bind(this)改变作用域，同时将它保存起来，在remove中使用，即可实现需求。
符合需求。
2.封装
当要绑定和解绑的事件多的时候，就会发现写起来会比较繁琐，可以进行一些封装。
给obj添加一个新的需要绑定的方法
doOtherthing: function () {
console.log(this.word + 'Otherthing');
}
现在我们所需要添加的事件为，在鼠标移入到btn3的时候执行doOtherthing。
修改原来的obj中的add方法和remove方法，并添加一些内容。
userEventHandlerBox: {
'click': {
element: this.btn3,
event: 'click',
funcName: 'doSomething',
},
'mouseenter': {
element: this.btn3,
event: 'mouseenter',
funcName: 'doOtherthing',
}
},
add: function () {
this.addAllUserEventHandler();
},
remove: function () {
this.removeAllUserEventHandler()
},
addAllUserEventHandler: function () {
for (var key in this.userEventHandlerBox) {
this.addOneUserEventHandler(key);
}
},
removeAllUserEventHandler: function () {
for (var key in this.userEventHandlerBox) {
this.removeOneUserEventHandler(key);
}
},
addOneUserEventHandler: function (event) {
this.userEventHandlerBox[event].func = this[this.userEventHandlerBox[event].funcName].bind(this);
this.userEventHandlerBox[event].element.addEventListener(event, this.userEventHandlerBox[event].func);
},
removeOneUserEventHandler: function (event) {
if (this.userEventHandlerBox[event].func) {
this.userEventHandlerBox[event].element.removeEventListener(event, this.userEventHandlerBox[event].func);
this.userEventHandlerBox[event].func = null;
}
},
实现了新的需求。
3.掺元类
在实际使用过程中，我们发现addAllUserEventHandler，removeAllUserEventHandler，addOneUserEventHandler，removeOneUserEventHandler，这四个方法都是一样，可以单独写成一个类。再结合掺元类的使用，就不需要在各个类中都把这个方法都写一遍，能够使代码更简洁。
/**
* 使用掺元类
*
* @param {any} receivingClass - 接收方法的类名
* @param {any} givingClass - 提供方法的类名
* 可以使用大于两个的参数，表示只传递指定名称的方法
*/
var augment = function(receivingClass, givingClass){
if(arguments.length > 2){
for(var i= 2, len = arguments.length;i<len;i++){
receivingClass.prototype[arguments[i]] = givingClass.prototype[arguments[i]];
}
}else{
for(var methodName in givingClass.prototype){
if(!receivingClass.prototype[methodName]){
receivingClass.prototype[methodName] = givingClass.prototype[methodName];
}
}
}
}
var DealUserEventHandler = function () {};
DealUserEventHandler.prototype = {
addAllUserEventHandler: function () {
for (var key in this.userEventHandlerBox) {
this.addOneUserEventHandler(key);
}
},
removeAllUserEventHandler: function () {
for (var key in this.userEventHandlerBox) {
this.removeOneUserEventHandler(key);
}
},
addOneUserEventHandler: function (event) {
this.userEventHandlerBox[event].func = this[this.userEventHandlerBox[event].funcName].bind(this);
this.userEventHandlerBox[event].element.addEventListener(event, this.userEventHandlerBox[event]
.func);
},
removeOneUserEventHandler: function (event) {
if (this.userEventHandlerBox[event].func) {
this.userEventHandlerBox[event].element.removeEventListener(event, this.userEventHandlerBox[
event].func);
this.userEventHandlerBox[event].func = null;
}
},
}
同时改写一下Obj中的init方法。
init: function () {
this.btn1.addEventListener('click', this.add.bind(this));
this.btn2.addEventListener('click', this.remove.bind(this));
augment(Obj, DealUserEventHandler);
},
这样就能很方便的进行使用了。
