一、箭头函数的使用场景
箭头函数在es6的标准中引入,可以用于替代传统定义函数的写法,一般用在函数本身代码量比较少,且处理逻辑简单的场景,此时可以用箭头函数替代原有函数,但是如果函数的代码量较大及处理逻辑较为复杂的时候,还是使用传统函数定义的方法。
1、简化函数的定义
函数传递参数
简化函数执行上下文绑定的方式
this在js里面使用场景较多,切换也比较频繁,因此带来了各种运行时因为上下文切换导致的错误,如下代码:
由于使用了setTimeout在1000ms以后执行console中的内容,此时this已经不代表c对象的实例,此时this为全局的this,所以运行时候输出undefined。此种情况下传统的做法可以使用function.prototype.bind将执行的上下文绑定在函数上面
使用箭头函数可以让这一过程更简单
二、不能使用箭头函数的场景
1、定义方法的时候
(1)定义字面量方法
calculator.sum使用箭头函数来定义,但是调用的时候会抛出typeError,因为运行时this.array是未定义的,调用calculator.sum的时候,执行上下文里面的this仍然指向window,原因是箭头函数上山下文绑定到了window,this.array等价于window.array,显然后者是未定义的。
解决办法:
(2)定义原型方法
使用传统的函数表达式就能解决问题 JS Bin
sayCatName 变成普通函数之后,被调用时的执行上下文就会指向新创建的 cat 实例。
2、定义事件回调函数
箭头函数在声明的时候就绑定了执行上下文,要动态改变上下文是不可能,在需要动态上下文的时候,它的弊端就凸显出来了,比如在客户端编程中常见的dom事件回调函数(evenListener)绑定,触发回调函数时候this指向当前发生事件的dom节点,而动态上下文这个时候就很有用,比如下边这段代码试图使用箭头函数来做事件回调函数
在全局上下文定义的箭头函数执行的时候,this会指向为window,当单击事件发生的时候,浏览器会尝试用button作为上下文来执行事件回调函数,但是箭头函数预定义的上下文不能被修改,这样this.innerHTML就等价于window。innerHTML,而后者是没有任何意义的。
使用函数表达式就可以在运行时候动态的改变this,修正后的代码
3、定义构造函数
构造函数中的this指向新创建的对象,当执行new Car()的时候,构造函数Car的上下文就是新创建的对象,也就是说 this instanceof Car === true。显然箭头函数是不能用来做构造函数的,实际上js会禁止你这么做,如果你这么做了,他就会抛出异常。
换句话说,箭头构造函数的执行并没有任何意义,并且是由歧义的,比如当我们运行下面代码
构造新的Message实例时,js引擎抛了错误,因为Message不是构造函数,在笔者看来相比旧的js引擎在出错时悄悄失败的设计,ES6出错时给出具体错误信息是非常不错的实践,可以通过使用函数表达式或者函数声明来声明构造函数修复上面的例子