ES6-箭头函数

2017-04-09

什么是箭头函数

箭头函数表达式是ES6提供的一种类似函数表达式的一种表达式,它比函数表达式更简短,更简洁,箭头函数最适用于非方法函数,并且它们不能用于构造函数。

基础语法

1.(param1, param2, …, paramN) => { statements }

1
var sum = (x, y) => { return x + y }



2.(param1, param2, …, paramN) => expression ,这种写法中 expression 等价于 { return expression }

1
2
var sum = (x, y) => x + y
sum(1, 2) //return 3


Tips

  • 如果只有一个参数,圆括号是可选的

    1
    var addOne = x => x + 1
  • 如果没有参数,则必须用圆括号或者下划线

    1
    2
    var noParam = () => {}
    var noParam = _ => {}
  • 如果返回的是一个对象,函数体要用圆括号括起来

    1
    2
    var getObj = param => ({ b: 10})
    var getObj = param => { return { b: 10} } //等价于圆括号括起来


高级语法

1.支持默认参数

1
2
3
var sum = (x=1, y=2) => x + y
sum() //return 3
sum(4, 5) //return 9



2.支持剩余参数…rest, 但是注意,剩余参数必须放到最后

1
2
3
4
5
var foo = (x, ...rest) => {
console.log(...rest)
}
foo(1, 2, 3, 4) // 2 3 4

3.箭头函数不绑定this, arguments, super 或 new.target


作用

1. 使代码更简洁,更简短,这个优点很直观,就不阐释了

2. 对 this 的词法解析



因为箭头函数不绑定 this ,所以在箭头函数中引用 this 将按照词法作用域链迭代往外层寻找 this , 直到找到为止. 这样就能在某些场景下避免以前 ES5 用 self=this 或者 that=this 的尴尬


1
2
3
4
5
6
7
8
9
10
11
ES5的写法
function Person() {
var self = this;
self.age = 0;
setInterval(function growUp() {
self.age++;
}, 3000);
}
var p = new Person();

在上述代码中, 如果不用 self 捕获 this 的值, 因为 growUp 函数不是某个对象的方法, 所以其 this 会被指定为全局对象而导致代码出错

1
2
3
4
5
6
7
8
9
10
ES6的写法
function Person() {
this.age = 0;
setInterval(() => {
this.age++;
}, 3000);
}
var p = new Person();

上述代码运用了箭头函数, 因为箭头函数不绑定 this , 所以 this 会绑定到 Person 函数的 this

看到上面的例子,我们容易想到,箭头函数适用于非方法的函数,如果用于定义对象的方法,容易出现意想不到的错误

1
2
3
4
5
6
7
8
9
10
11
12
var obj = {
a: 10,
b: () => {
console.log(this.a)
},
c: function(){
console.log(this.a)
}
}
obj.b() //undefined
obj.c() //10

理解一下上面的代码, 为什么箭头函数里的 this.a 是 undefined 呢, 原因就像刚刚我说的那样, 箭头函数并不绑定 this , 所以 obj.b 这个箭头函数中的 this 其实是全局变量 window , 故 this.a 为 undefined 了

Tips

  • 和 this 一样, 箭头函数也不绑定 arguments ,其 arguments 也是往作用域链寻找.
  • 箭头函数不能用做构造函数, 所以用 new 关键字的时候会报错
  • 箭头函数没有原型

    1
    2
    var foo = () => {}
    console.log(foo.prototype) //undefined
  • 箭头函数的箭头不是操作符, 但是箭头函数有特殊的解析规则就是: 相比普通的函数, 受操作符的优先级影响。

    1
    2
    3
    4
    let callback
    callback = callback || function()
    callback = callback || () => {} // 报错
    callback = callback || (() => {}) // 正常
  • 严格模式的 this 的有关规则在箭头函数中会被忽略

    1
    2
    var f = () => { 'use strict'; return this }
    f() === window //true



好了,关于箭头函数的知识先总结这么多。以后有新的再加上。