ES6 箭头函数

通常函数的定义方法

function fn(...){
    ......
}
// 或者：
var fn = function(...){
    ......    
}

简写方法速记

将原函数的 “function” 关键字和函数名都删掉，并使用 “=>” 连接参数列表和函数体。

function add(a, b){
    return a + b;
}
// 简写为：
(a, b) => { // 删掉了 function 和函数名
    return a + b;
}

var add = function(a, b){
    return a + b;
}
// 简写为：
var add = (a, b) => { // 删掉了 function
    return a + b;
}

附加规则

1.当函数参数只有一个时，括号可以省略；但是没有参数或者大于一个参数时，括号不可以省略。
2.函数体（中括号）中有且只有一行 return 语句时，中括号及 return 关键字可以省略。

新旧函数定义的对比

无参数函数

let fn = function(){
    return 'helloWorld';
}

// 简写为：
let fn = () => { // 但是没有参数时，括号不可以省略
    return 'helloWorld';
}
// 根据规则二，简写为：
let fn = () => 'helloWorld';

一个参数的函数

let fn = function(a){
    return a;
}

// 简写为：
let fn = (a) => {
    return a;
}
// 根据规则一，还可以简写为：
let fn = a => {
    return a;
}
// 根据规则二，还可以简写为：
let fn = a => a;

多个参数的函数

let fn = function(a, b){
    return a + b;
}
// 简写为：
let fn = (a, b) => { // 多于一个参数，圆括号不可省略
    return a + b;
}
// 根据规则二，还可以简写为：
let fn = (a, b) => a + b;

函数体代码多于一行

let fn = function(){
    console.log('hello');
    console.log('world');
    return 'helloWorld';
}
//简写为：
let fn = () => {
    console.log('hello');
    console.log('world');
    return 'helloWorld';
}

函数返回 json 对象时

let fn = function(){
    return {"a": 5};
}

// 简写为：
// let fn = () => {"a": 5}; // 这是错误的
// 应简写为：
let fn = () => ({"a": 5}); // 注意 {} 外的圆括号。

实例

//排序方法1
let arr = [3, 6, 2, 1];
let arr2 = arr.sort(function(a, b){
    return a - b;
});
alert(arr2);

//排序方法2
let arr3 = [939, 23, 0, -1, 94];
let arr4 = arr3.sort((a,b) => a - b);
alert(arr4);

小结：

1.只是一种函数的简写，可用可不用，看程序猿心情；
2.类似于匿名函数，在某些情况下使用，可减少代码量。

注意点

1、箭头函数没有自己的 this 对象，所有 this 固定，不再善变（函数体内的 this 对象，就是定义时所在的对象，而不是使用时所在的对象）

var obj = {
    data: ['John Backus',  'John Hopcroft'],
    init: function() {
        // 箭头函数
        document.onclick = ev => {
            alert(this.data) // ['John Backus', 'John Hopcroft']
        }
        // 非箭头函数
        // document.onclick = function(ev) {
        //     alert(this.data) // undefined
        // }
    }
}
obj.init()

2、不可以当作构造函数，也就是说，不可以对箭头函数使用 new 命令，否则会抛出一个错误

var Person = (name, age) => {
    this.name = name
    this.age = age
}
var p = new Func('John', 33) // error

3、不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替

var func = () => {
    console.log(arguments)
}
func(55)  // error

4、不可以使用yield命令，因此箭头函数不能用作 Generator 函数

不适用场合

1、第一个场合是定义函数的方法，且该方法内部包括 this。

var cat = {
    lives: 9,
    jumps: () => {
        this.lives;
    }
}

上面代码中，cat.jumps() 方法是一个箭头函数，这是错误的。调用 cat.jumps() 时，如果是普通函数，该方法内部的 this 指向 cat；如果写成上面那样的箭头函数，使得 this 指向全局对象，因此不会得到预期结果。

2、第二个场合是需要动态 this 的时候，也不应使用箭头函数。

var button = document.getElementById('press');
button.addEventListener('click', () => {
    this.classList.toggle('on');
});

上面代码运行时，点击按钮会报错，因为 button 的监听函数是一个箭头函数，导致里面的 this 就是全局对象。如果改成普通函数，this 就会动态指向被点击的按钮对象。

另外，如果函数体很复杂，有许多行，或者函数内部有大量的读写操作，不单纯是为了计算值，这时也不应该使用箭头函数，而是要使用普通函数，这样可以提高代码可读性。

ES6 箭头函数