箭头函数在ES6中用的很常见,刚开始我还觉得这有什么,就是简写了一下而已
后来用习惯之后就觉得是真滴方便
在说之前先简单的概括一下。箭头函数和普通函数的区别如下。
普通函数:根据调用我的人(谁调用我,我的this就指向谁)
箭头函数:根据所在的环境(我再哪个环境中,this就指向谁)
先来看一个简单的例子
document.onclick = function () { alert(this); //HTMLDocument } document.onclick = () => { alert(this); //Window }
这两个你运行的时候普通函数this指向的是HTMLDocument,箭头函数指向的是Window。
如果还觉得不明显再看下列代码
document.onclick = function () { let arr = [1, 2, 3]; arr.a = function () { alert(this); } arr.a(); //1,2,3 }
这里先是使用普通函数,输出了1,2,3。
下面我换成箭头函数
document.onclick = function () { let arr = [1, 2, 3]; arr.a = () => { alert(this); } arr.a(); //HTMLDocument }这里输出就是HTMLDOcument了,因为正如前面所说,箭头函数的this是由它所处的环境决定的