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, 现在封装成类的一个个方法, 语义上显得更加简洁.
然而此处还存在一些问题~~, 我们还有必要进一步改善.
欲听后文如何, 且听下回分解, 喜欢本文的, 欢迎点赞...
如有表述错误的, 欢迎指正...
来源: http://www.jianshu.com/p/c847f17503ab