简介
在ECMAScript6中,箭头函数是其中最有趣的新增特性。顾名思义箭头函数是一种使用箭头(=>)定义函数的新语法
与普通函数的差异
- 没有this,super,arguments和new.target绑定 箭头函数中的this,super,arguments及new.target这些值由外围最近一层非箭头函数决定
- 不能通过new关键字调用 箭头函数没有[[Construct]]方法,所以不能被用作构造函数,如果通过new关键字调用箭头函数,程序会抛出错误
- 没有原型 由于不可以通过new关键字调用箭头函数,因而没有构建原型的需求,所以箭头函数不存在prototype这个属性
- 不可以改变this绑定 函数内部的this值不可被改变,在函数的生命周期内始终保持一致
- 不支持arguments对象 箭头函数没有arguments绑定,所以你必须通过命名参数和不定参数这两种形式访问函数的参数
- 不支持重复的命名参数 无论在严格还是非严格模式下,箭头函数都不支持重复的命名参数;而在传统函数的规定中,只有在严格模式下才不能有重复的命名参数
有这些差异的原因
- this绑定是JS程序中一个常见的错误来源,在函数内很容易就对this的值失去控制,其经常导致程序出现意想不到的行为,箭头函数消除了这方面的烦恼
- 如果限制箭头函数的this值,简化代码执行的过程,则JS引擎可以更轻松地优化这些操作,而常规函数往往通识会作为构造函数使用或者以其他方式对其进行修改
箭头函数的语法
- 单一参数
reflect = value => value
// 实际上相当于
let reflect = function(value){
retun value
- 两个或两个以上的函数
let sum = (num1,num2) => num1+num2;
//实际上相当于
let sum function(num1,num2){
return num1+num2
}
- 没有参数
let getName = () => "Xhy";
//实际上相当于
let getName = function(){
return "Xhy"}
箭头函数的辨识方法
尽管箭头函数与传统函数的语法不同,但它同样可以被识别出来
var comparator = (a,b) => a-b
console.log(typeof comparator) //"function"
console.log(comparator instanceof Function) //true
由console.log()的输出结果可知,使用typeof和instanceof操作符调用箭头函数与调用其他函数并无二致。
创建立即执行函数表达式
JS函数的一个流行的使用方式是创建立即执行函数表达式(IIFE),你可以定义一个匿名函数并立即调用,自始至终不保存对该函数的引用。当想创建一个与其他程序隔离的作用域时,这种模式非常方便。
箭头函数没有this绑定
函数内的this绑定是JS中最常出现错误的因素,函数内的this值可以根据函数调用的上下文而改变,这有可能错误地影响其他对象。箭头函数中没有this绑定,必须通过查找作用域链来决定其值。如果箭头函数被非箭头函数包含,则this绑定的是最近一层非箭头函数的this;否则,this的值会被设置为全局对象。同样,箭头函数中的this值取决于该函数外部非箭头函数的this值,且不能通过call()、apply()或bind()方法来改变this的值
箭头函数没有arguments绑定
箭头函数没有自己的arguments对象,且未来无论函数在哪个上下文中执行,箭头函数始终可以访问外围函数的arguments对象
总结
ECMAScript6中函数方面最大的改变是添加了箭头函数。箭头函数的设计目标是用来替代匿名函数表达式,它的语法更简洁。具有词法级的this绑定,没有arguments对象,函数内部的this值不可被改变,因而不能用作构造函数使用