箭头函数
1. 简单的定义:
胖箭头函数 Fat arrow functions
,又称箭头函数,是一个来自ECMAScript 2015(又称ES6)的全
箭头函数的产生,主要由两个目的:更简洁的语法和与父作用域共享关键字this。接下来,让我们来看几个详细的例子
当需要编写一个简单的单一参数函数时,可以采用箭头函数来书写,标识名=>
表达式。这样就可以省却 function
和 return
的输入,还有括号,分号等。箭头函数是ES6
新增加的一个特性。 let f = v => v;
最直接的感觉就是简便,当然不可能就是这么一点好处,下面就一起来探讨一下。
几个小细节 :
- 如果箭头函数的代码块多余一条语句,就必须要使用大括号将其括起来,并且使用
return
语句返回。 - 由于大括号会被解释位为代码块,所以如果箭头函数直接返回一个对象,必须在外面加上括号。
let f = id => ({age: 22, name: Alice })
- 箭头函数还可以和解构赋值
Destructuring
联合使用.
const f = ({first, last}) => first + '' + last;
- 可以简化回调函数,大大简化和缩短代码行数。
2. 箭头函数和普通函数的区别
-
this
的指向普通函数与箭头函数有个微小的不同点。 箭头函数没有自己的this值 ,其this值是通
过继承其它传入对象而获得的,通常来说是上一级外部函数的 this
的指向。
function f() { setTimeout( () => { console.log("id:", this.id); },100); } f.call( { id: 42 }); //id: 42;
这个例子中, setTimeout 的参数是一个箭头函数, 每隔100毫秒运行一次,如果是普通函
数,执行的this
应该指向全局对象, 但是箭头函数会让 this
总是指向函数所在的对象 箭头函数里面嵌套箭头函数会有多少个this
呢?
function f() { return () => { return () => { return () => { console.log("id:", this.id); }; }; }; } f().call( {id: 42})()()(); //id: 42
上面的代码中只有一个 this
, 就是函数f的this
。这是因为所有的内层函数都是箭头函数
arguments
, super
, new.target
所以顺理成 章,箭头函数也就不能再用这些方法call()
,apply()
,bind()
,因为这是一些改变this指向的方法, 箭头函数并没有this啊。 var adder = { base : 1, add : function(a) { var f = v => v + this.base; return f(a); }, addThruCall: function(a) { var f = v => v + this.base; var b = { base : 2 }; return f.call(b, a); }}; console.log(adder.add(1));
3. 怎么处理好箭头函数的使用问题呢?
- 使用非箭头函数来处理由
object.method()
语法调用的方法。因为它们会接收到来自调用者的有意义的this值。 - 在其它场合都使用箭头函数。
4. 使用箭头函数的注意点
- 箭头函数在参数和箭头之间不能换行。
- 函数体内的this对象就是定义时所在的对象,而不是使用时所在的对象。
'use strict';var obj = { a: 10};Object.defineProperty(obj, "b", { get: () => { console.log(this.a, typeof this.a, this); return this.a+10; // represents global object 'Window', therefore 'this.a' returns 'undefined' }});
- 不可以当作构造函数,简单说就是不能再使用
new
命令了,不然会报错。
var Foo = () => {};var foo = new Foo();// TypeError: Foo is not a constructor
- 不可以使用
arguments
对象,该对象在函数体内不存在,如果实在要用可以用rest
代替。 - 不可以使用
yield
命令,箭头函数不可用作Generator
函数。
值得注意的一点就是this
对象的指向是可变的,但在箭头函数内是固定的。
5. 总结
箭头函数是我最喜欢的ES6
特性之一。使用=>来代替function
是非常便捷的。但我也曾见过只使用
=>
来声明函数的代码,我并不认为这是好的做法,因为=>也提供了它区别于传统function,其所 独有的特性。我个人推荐,仅在你需要使用它提供的新特性时,才使用它。 - 当只有一条声明语句(statement)时, 隐式
return
。 - 需要使用到父作用域中的
this
。