简单谈谈JS箭头函数

上一篇文章《最近遇到的IPhone手机手机端H5页面Input输入框兼容问题总结》里面第一个问题使用到的代码里面使用到了箭头函数，有小伙伴表示看不懂。

这篇文章详情一下JavaScript箭头函数不绑定this的特性，希望对大家有帮助，能够快速上手用箭头函数。

箭头函数表达式的语法比普通函数表达式更短，并且不绑定自己的this，arguments，super或者 new.target。这些函数表达式最适合使用于非方法函数，并且它们不能使用作构造函数。

基本使用法有下面几种：

1、当有多个参数时

(参数1, 参数2, …, 参数N) => { 函数公告 }

(参数1, 参数2, …, 参数N) => 表达式（单一）

这相当于：(参数1, 参数2, …, 参数N) =>{ return 表达式; }

2、当只有一个参数时，圆括号是可选的

(单一参数) => {函数公告}

单一参数 => {函数公告}

3、没有参数的函数应该写成一对圆括号

() => {函数公告}

箭头函数一个主要特性就是不绑定this，平常工作中使用的最多的也是这个特性。在箭头函数出现之前，每个新定义的函数都有它自己的 this值。这在实际中写起来很麻烦。例如写一个没秒钟自增1的函数，需要先把this分配给封闭的that变量：

function add(){

var that=this;

that.num=0;

setInterval(function addOne(){

that.num++;

},1000);

}

而假如用箭头函数，就会简便很多：

function add(){

this.num=0;

setInterval(()=>{

this.num++;//这里的this正确的指向了add函数

},1000);

}

这么一比较是不是发现用箭头函数很爽啊，可以少写很多代码。当然箭头函数还有很多其余的特性，就不在本文的详情范围内了。^_^

一起学习，互相督促进步，欢迎关注我~