es6中的箭頭函數

箭頭函數（arrow function）

箭頭函數至關於一個匿名函數

x => x * x;
//同等於下面的匿名函數
//x - >傳參
//x * x  -> return

function(x) {
    return x * x;
}

若是箭頭函數含表達式就必須加{...} 和 return

x => {
    if(x>10) {
        return x + x;
    }else {
        return x * x;
    }
}

若是箭頭函數不是一個參數，參數就必須加()->(x,y)

//兩個參數
(x,y) => x * y
//沒有參數
() = > 1 + 4
//可變參數
var fn = (x,...rest) => {
    for(var i = 0;i < rest.length; i++) {
        x += rest[i]
    }
    return x;
}
//rest是個Array [4,5]
fn(1,4,5);//10

若是return的值是一個對象須要加()進行區分，防止衝突

var fn = x => { foo: x }
fn(3);//undefined

var fn = x => ({ foo: x })
fn(3);//Object {foo: 3}

箭頭函數中的this由上下文決定

//es6 =>寫法

var obj = {
    age: 18,
    fnc : function (x) {
        var fn = x => this.age + x;//this->obj
        return fn(x);
    }
}
obj.fnc(5)//23

//es5寫法

//錯誤的寫法
var obj = {
    age: 18,
    fnc : function (x) {
        var fn = function (x) {
            return this.age + x;//this->window
        } 
        return fn(x);
    }
}
obj.fnc(5)//NaN
//正確的寫法
var obj = {
    age: 18,
    fnc : function (x) {
        var that = this;//this->obj
        var fn = function (x) {
            return that.age + x;
        } 
        return fn(x);
    }
}
obj.fnc(5)//23

若是用call()或者apply()調用箭頭函數時，沒法對this進行綁定（傳入的第一個參數被忽略）：

var obj = {
    age: 18,
    fnc : function (x) {
        var fn = x => this.age + x;//this->obj
        return fn.call({age:20},x);//用call沒法改變this的指向，箭頭函數中的age依然等於18
    }
}
obj.fnc(5)//23