ES6学习（箭头函数详解）

箭头函数（Arrow Function）

箭头函数表达式的语法比函数表达式更简洁，并且没有自己的this，arguments，super或 new.target。这些函数表达式更适用于那些本来需要匿名函数的地方，并且它们不能用作构造函数。

语法

基础语法

(参数1, 参数2, …, 参数N) => { 函数声明 }

//相当于：(参数1, 参数2, …, 参数N) =>{ return 表达式; }
(参数1, 参数2, …, 参数N) => 表达式（单一）

// 当只有一个参数时，圆括号是可选的：
(单一参数) => {函数声明}
单一参数 => {函数声明}

// 没有参数的函数应该写成一对圆括号。
() => {函数声明}

高级语法

//加括号的函数体返回对象字面表达式：
参数=> ({foo: bar})

//支持剩余参数和默认参数
(参数1, 参数2, ...rest) => {函数声明}
(参数1 = 默认值1,参数2, …, 参数N = 默认值N) => {函数声明}

//同样支持参数列表解构
let f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;
f();  // 6

优点

简明的语法

举例：将数组中的数字乘2并返回结果

function 函数

const numbers = [1,2,3,4]

const double = numbers.map(function(number){
    return number *2;
});

console.log(double);

使用箭头函数：

const number = [1,2,3,4]

const double2 = number.map(number => {
    return number *2;
});

console.log(double2);

对于箭头函数中的参数：

• 没有参数加括号
• 一个参数可选择
• 多个参数逗号分隔

const double3 = numbers.map(function(number,i){
    return `${i}:${number *2}`;
});

console.log(double3);

const hello = number.map(() =>{
    return 'hello';
})

console.log(hello);

对于正常的函数，如何更改成为箭头函数？

• 删掉function 关键字
• 加上一个 =>
• 没有参数加括号
• 一个参数可选择
• 多个参数逗号分隔

隐式返回

显式返回：通俗来说就是使用 return 关键字进行结果的返回。比如上面的代码。

const double5 = number.map((number) => number *2);
console.log(double5)

对于上面的函数，匿名函数。如果想要调用函数的话，就必须调用命名函数：

function greet(name){
    console.log(`Hello ${name}`);
}

greet('jack');

修改之后：

const greet = name=>{console.log(`Hello ${name}`);}

greet('jack');

不绑定this

const Jackyjk = {
    name : 'Mr.J',
    hobbies:['sleeping','eating','reading'],
    printHobbies: function(){
        this.hobbies.map(function(hobby){
            console.log(`${this.name} love ${hobby}`);
        })
    }
}
Jackyjk.printHobbies();

在Javascript中，this值是在运行的时候进行绑定的，Jackyjk对象调用printHobbies()方法，在方法中this指向的是Jackyjk这个对象。在后面的map方法的回调函数，因为他是独立运行的，不是作为对象的方法调用。此时this指向window或者global(严格模式下为 undefined) 

使用箭头函数进行更改：

const Jackyjk = {
    name : 'Mr.J',
    hobbies:['sleeping','eating','reading'],
    printHobbies: function(){
        this.hobbies.map(hobby => {
            console.log(`${this.name} love ${hobby}`);
        })
    }
}
Jackyjk.printHobbies();

在箭头函数中，this值指向其父作用域。

函数参数默认值

之前复制默认值：

function add(a,b){
    var a = a || 3;
    var b = a || 5;
    return a + b;
}

运行结果：8

function add(a = 3,b = 5){
    return a + b;
}

注意：对于上面两个参数，如果正常运行，第二个参数可以省略，第一个不能省略（改用undefined）。多个参数同样是如此。

什么时候不适合使用箭头函数？

作为构造函数，需要绑定对象（继续使用默认绑定）

const Person = (name,points) =>{
    this.name = name;
    this.points = points;
}

const Jack = new Person('Jack',18);
Person.prototype.updatePoints = () =>{
    this.points ++;
    console.log(this.points);
}

new 创建 Person实例：

1. 生成一个新的对象
2. 把构造函数中的this值指向新生成的对象
3. 把这个对象绑定它的原型对象
4. 返回这个新生成的对象

箭头函数并不会把this值放在新生成的对象中去，此时只能使用原始函数：

const Person = function(name,points){
    this.name = name;
    this.points = points;
}

const Jack = new Person('Jack',18);
Person.prototype.updatePoints = () =>{
    this.points ++;
    console.log(this.points);
}

上面已经写到，箭头函数this值指向父作用域，即window。当想定义对象方法的时候，使用原始函数(修改如下)：

需要this时（绑定交互事件）

第一部分以及上面的例子中可以看见，对于回调函数，this值永远指向的是父作用域，而这样极易导致指向window或global，绑定对象函数方法，不能使用箭头函数。此时适合用原始函数。

需要使用arguments对象

由于箭头函数中没有arguments属性，所以不能使用：

如何判断是否使用箭头函数？

借用《你不知道的Javascript（下卷）》，P108的框图：