ES6之箭头函数

ES6标准新增了一种新的函数：Arrow Function（箭头函数）。

ES6允许使用箭头（=>）定义函数，箭头函数提供了一种更加简洁的函数书写方式

基本特点

(1). 箭头函数this为父作用域的this，不是调用时的this

箭头函数的this永远指向其父作用域，任何方法都改变不了，包括call，apply，bind。

(2). 箭头函数不能作为构造函数，不能使用new

(3). 箭头函数没有arguments，caller，callee

注意

(1). 箭头函数通过call和apply调用，不会改变this指向，只会传入参数

(2). 箭头函数没有原型属性

(3). 箭头函数不能作为Generator函数，不能使用yield关键字

(4). 箭头函数返回对象时，要加一个小括号

(5). 箭头函数在ES6 class中声明的方法为实例方法，不是原型方法

(6). 多重箭头函数就是一个高阶函数，相当于内嵌函数

基础语法

1.使用ES6箭头函数语法定义函数，将原函数的“function”关键字和函数名都删掉，并使用“=>”连接参数列表和函数体。

var fn1 = function(a, b) {
    return a + b
}
 
function fn2(a, b) {
    return a + b
}

var fn1 = (a, b) => {
    return a + b
}
 
(a, b) => {
    return a + b
}

2.当函数参数只有一个，括号可以省略；但是没有参数时，括号不可以省略。

// 无参
var fn1 = function() {}
var fn1 = () => {}
 
// 单个参数
var fn2 = function(a) {}
var fn2 = a => {}
 
// 多个参数
var fn3 = function(a, b) {}
var fn3 = (a, b) => {}
 
// 可变参数
var fn4 = function(a, b, ...args) {}
var fn4 = (a, b, ...args) => {}
 

3.如果返回一个对象，需要特别注意，如果是单表达式要返回自定义对象，不写括号会报错，因为和函数体的{ ... }有语法冲突。

注意，用小括号包含大括号则是对象的定义，而非函数主体

x => {key: x} // 报错
x => ({key: x}) // 正确