在类对象中如何正确处理事件回调的this问题

ES6以后在类声明的对象中将方法作为一个事件处理器传递给addEventListener，通常是以下一种编程的模式.

这个代码有些问题，你们找到了吗？,正如标题要谈论的问题一样.....

下面是一个运行示例

const my=new MyTest('Yuna');

三个按钮分别正如上面代码所示一样绑定Mytest中的四个方法作为回调函数，我们尝试在触发事件处理器运行的过程中和类中的其他变量进行交互,但正如如下图所示的一样,事件处理器无法获取Mytest实例中的person变量的值,而是一个“undefined”.

当前函数处理器绑定的“this”上下文和Mytest实例中的“this”上下文不是同一回事

分析问题的原因，我们回顾上面的代码,找其中一个分析，下面的代码

this.button1.addEventListener('click',this.black_friday);

等价于:

let callback=this.black_friday();

this.button1.addEventListener('click',callback);

有经验的读者应该不难看出，实际上 black_friday()方法是一个以引用类型的方式,将它自己的函数地址存放到Mytest实例中变量所指向的某个位置,而my实例本身也是一个引用的类型,换句话说,my实例保存着它内部的变量名称和方法名称各自所指向其引用的内存位置,从而构成了一个my实例中“this”的上下文，那么不难看出callback所绑定的this是button1,而和my实例的this不是同一个引用的“内存位置”。

（补充:在javascript中:所有Object类型的实例,function和Array都属于引用类型）

那么,要改善这个问题有两种方法

1.用function类型本身自带的bind方法

2.箭头函数

Bingo~~!!,这次如期运行了，其实这两者方法和以前在es5类似的写法模式大同小异,只不过在es6之后利用class语法将以前在其他地方书写的一大堆function,现在封装成类的一个个方法,语义上显得更加简洁。

然而此处还存在一些问题~~,我们还有必要进一步改善。

欲听后文如何，且听下回分解，喜欢本文的，欢迎点赞...

如有表述错误的,欢迎指正...