1、ES6 增加了箭头函数:
2、相当于:
3、如果需要给函数传入多个参数:
4、如果函数的代码块需要多条语句:
5、如果需要直接返回一个对象:
6、与变量解构结合:
7、很多时候,你可能想不到要这样用,所以再来举个例子,比如在 React 与 Immutable 的技术选型中,我们处理一个事件会这样做:
8、其实就可以简化为:
9、比较本篇我们重点比较一下箭头函数与普通函数。
10、主要区别包括:
11、冤铘讵柘没有 this箭头函数没有 this,所以需要通过查找作用域链来确定 this 的值。这就意味着如果箭头函数被非箭头函数包含,t茑霁酌绡his 绑定的就是最近一层非箭头函数的 this。模拟一个实际开发中的例子:我们的需求是点击一个按钮,改变该按钮的背景色。为了方便开发,我们抽离一个 Button 组件,当需要使用的时候,直接:
12、HTML 代码如下:
13、JavaScript 代码如下:
14、看着好像没有问题,结果却是报错 Uncaught TypeError: Cannot read property 'style' of undefined这是因为当使用 addEventListener() 为一个元素注册事件的时候,事件函数里的 this 值是该元素的引用。
15、所以如果我们在 setBgColor 中 console.log(this),this 指向的是按钮元素,那 this.element 就是 undefined,报错自然就理所当然了。
16、也许你会问,既然 this 都指向了按钮元素,那我们直接修改 setBgColor 函数为:
17、不就可以解决这个问题了?
18、确实可以这样做,但是在实际的开发中,我们可能会在 setBgColor 中还调用其他的函数,比如写成这种:
19、所以我们还是希望 setBgColor 中的 this 是指向实例对象的,这样就可以调用其他的函数。
20、利用 ES5,我们一般会这样做:
21、为避免 addEventListener 的影响,使用 bind 强制绑定 setBgColor() 的 this 为实例对象
22、使用 ES6,我们可以更好的解决这个问题:
23、由于芟镊圭薅箭头函数没有 this,所以会向外层查找 this 的值,即 bindEvent 中的 this,此时 this 指向实例对象,所以可以正确的调用 th足毂忍珩is.setBgColor 方法, 而 this.setBgColor 中的 this 也会正确指向实例对象。
24、在这里再额外提一点,就是注意 bindEvent 和 setBgColor 在这里捂执涡扔使用的是普通函数的形式,而非箭头函数,如果我们改成箭头函数,会导致函数里的 this 指向 window 对象 (非严格模式下)。
25、最后,因为箭头函数没有 this,所以也不能用 call()、apply()、bind() 这些方法改变 this 的指向,可以看一个例子:
26、 冤铘讵柘没有 arguments箭头函数没有自己的 arguments 对象,这不一定是件坏事,因为箭头函数可以访问外围函数的 arguments 对象:
27、那如果我们就是要访问箭头函数的参数呢?
28、你可以通过命名参数或者 rest 参数的形式访问参数:
29、 不能通过 new 关键字调用
30、JavaScript 函数有两个内部方法:[[Call觥终柯计]] 和 [[Construct]]。当通过 new 调用函数时,执行 [[Construct]] 方法,创建一个实例对象,然后再执行挣窝酵聒函数体,将 this 绑定到实例上。当直接调用的时候,执行 [[Call]] 方法,直接执行函数体。
31、箭头函数并没有 [[Construct]] 方法,不能被用作构造函数,如果通过 new 的方式调用,会报错。
32、 没有 new.target因为不能使用 new 调用,所以也没有 new.target 值。
33、 没有原型
34、由于不能使用 new 调用箭头函数,所以也没有构建原型的需求,于是箭头函数也不存在 prototype 这个属性。
35、 没有 super连原型都没有,自然也不能通过 super 来访问原型的属性,所以箭头函数也是没有 super 的,不过跟 this、arguments、new.target 一样,这些值由外围最近一层非箭头函数决定。
36、最后,关于箭头函数,引用 MDN 的介绍就是:
37、翻译过来就是:箭头函数表达式的语法比函数表达式更短,并且不绑定自己的this,arguments,super或 new.target。这些函数表达式最适合用于非方法函数(non-method functions),并且它们不能用作构造函数。
38、那么什么是 non-method functions 呢?
39、我们先来看看 method 的定义:
40、对象属性中的函数就被称之为 method,那么 no艘绒庳焰n-mehtod 就是指不被用作对象属性中的函数了,可是为什么说箭头函数更适合 non-method 呢?
41、让我们来看一个例子就明白了:
42、自执行函数
43、自执行函数的形式为:
44、或者
45、利用箭头简化自执行函数的写法:
46、但是注意:使用以下这种写法却会报错: