先上代码,给鼠标移动绑定了个事件函数,用的是箭头函数,但是在执行的时候崩溃了,没有执行成功,鼠标事件并没有出现预期的效果,我打印当前this的值,居然是window。
为此我特别查了下箭头函数与普通函数到底有啥区别,查了MDN文档,是这么说的,箭头函数时es2015引入的,它不提供自身的 this 绑定,也就是说这个函数本身里是没有this的,它里面的this 的值保持为闭合词法上下文的值,这话的意思是说,它里面的this是当前最近的非箭头函数的this,那么此案例中,距离最近的非箭头函数就是liClick函数,而我采用了函数直接调用的方式,liClick();在函数直接调用方式中,函数的this即为window,严谨点说是在非严格模式下。那么将以上案例修正的方法就是将箭头函数改成普通函数即可,改成普通函数后,this的值就指向了它的调用者。this的指向问题请看我上一篇文章。
箭头函数与普通函数的区别我们再看一个案例:
setInterval里的回调函数理论上是有window 调用的,但是此案例中,第一个setInterval使用了箭头函数,根据最近原则,这个箭头函数里的this指向的是调用者,此案例中使用了new 生成了一个实例, 那么this就指向了Timer的实例对象timer。而第二个setInterval 是用普通函数的方式定义的,那么this当然就指向window.因此后面两个setTimeout的输出值自然就是3,0 了。