ES6 - 箭头函数

箭头函数有点类似于匿名函数，而且更加简洁。

一. 语法：

function add(x,y){
    return x + y;
}
console.log(add(1,2));// 3

• 基本语法：在()与{}之间添加=>

let add = (x,y) =>{
    return x + y;
};
console.log(add(1,2));// 3

• 当返回值只有一句表达式时可以省略{}与return

let add = (x,y) => x + y ;
console.log(add(1,2));// 3

• 当参数只有一个时，可以省略()

let arr = [1,3,4].map(e => {
    return e + 1;
})
console.log(arr);// [ 2, 4, 5 ]

• 无参数时也应该写()

setTimeout(()=>{
    console.log('无参数')
},500);// 无参数

• 返回值为对象字面量时，如果简写需要添加()

let show = ({name,age}) => ({name:name,age:age});
console.log(show({name:'tom',age:21}));// { name: 'tom', age: 21 }

• 支持参数数组解构赋值与对象解构赋值

let test1 = ([a,b,c]) => {
    return a + b + c;
}

let test2 = ({name,age,hobby}) => {
    return `my name is ${name} , i am ${age} years old , hobby is ${hobby}`;
}

console.log(test1([1,2,3]));// 6
console.log(test2({name:'tom',age:21,hobby:'game'}));
// my name is tom , i am 21 years old , hobby is game

二. 主要特点：

• 不能作为构造函数

var Foo = () => {};
let foo = new Foo();// TypeError: Foo is not a constructor

• 不绑定this（这是与匿名函数最大的区别，也是箭头函数重要的作用）

function Person(name){
    this.name = name;
    this.say = function(){
        return function(){
            console.log(this.name);
        }       
    }
}
let person = new Person('tom');
person.say()();// undefined

由于this绑定问题（函数创建了自己的this），得不到期望结果

function Person(name){
    this.name = name;
    this.say = function(){
        let that = this;
        return function(){
            console.log(that.name);
        }       
    }
}
let person = new Person('tom');
person.say()();// tom

在没有箭头函数之前，我们经常使用中间量来保存this的引用。成功的解决了this的问题，但是不够优雅。

function Person(name){
    this.name = name;
    this.say = function(){
        return ()=>{
            console.log(this.name);
        }       
    }
}
let person = new Person('tom');
person.say()();// tom

因为箭头函数没有绑定this，它的this是通过作用域寻找上一层的this，效果与上面的一样。

• 由于不绑定this，因此使用call、apply、bind时第一个参数会被忽略。
  不使用箭头函数时，call正常修改this指向：

let obj = {
    base:1,
    addWithCall:function(x){
        let fn = function(){
            return x + this.base;
        }
        let b = {
            base:10
        };
        return fn.call(b,x); 
    }
}
console.log(obj.addWithCall(1));// 11

使用箭头函数，箭头函数内部的this是词法作用域，由上下文确定。也就是说this.base指向的是obj的base

let obj = {
    base:1,
    addWithCall:function(x){
        let fn = () => x + this.base;
        let b = {
            base:10
        };
        return fn.call(b,x); 
    }
}
console.log(obj.addWithCall(1));// 2

• 不绑定arguments，获取的arguments是父作用域的。

// 例子1：
let arguments = [1,2,3];

let a = () => arguments[0];

console.log(a(9));// 1

// 例子2：
function b(){
    return () => {
        return arguments[0];
    }
}

console.log(b(1)(2));// 1

解决方案：使用剩余参数代替arguments

function b(){
    return (...args) => {
        return args[0];
    }
}

console.log(b(1)(2));// 2

• 没有prototype属性

var Foo = () => {};
console.log(Foo.prototype); // undefined