es6學習_箭頭函式解決this指向問題

//需求,有一個自定義陣列物件myArray,其中的sum方法的作用是對myArray物件的value值累加,
//每次累加都要加上addNum

var myArray = {
    value: [1,2,3,4,5],
    addNum: 10,
    sum: function() {
        //下面的this.value中的this就是myArray物件,這是正常的
        return this.value.reduce(function(sum,currentValue) {
            //這裡的this應該是myArray才對,但是編譯器到這裡懵逼了,實際上下面列印出的this是window物件,注意不是嚴格模式
            console.log(this)
            return sum + currentValue + this.addNum},0)
    }
}
//這裡輸出NaN,因為this指向window物件,它沒有addNum物件,this.addNum是undefined,那麼相加自然就是NaN了
console.log(myArray.sum())  

//解決方案一,將this物件臨時儲存
var myArray = {
    value: [1,2,3,4,5],
    addNum: 10,
    sum: function() {
        var _self = this; //就是在這裡儲存,這裡的this指向是myArray
        return this.value.reduce(function(sum,currentValue) {
            console.log(_self); //用上面臨時儲存的物件
            return sum + currentValue + _self.addNum},0)
    }
}
console.log(myArray.sum()); //輸出65,ok

//解決方案二,用函式的bind方法繫結this
var myArray = {
    value: [1,2,3,4,5],
    addNum: 10,
    sum: function() {
        return this.value.reduce(function(sum,currentValue) {
            console.log(this);
            return sum + currentValue + this.addNum}.bind(this),0);
    }
}
console.log(myArray.sum()); //ok

//解決方案三,箭頭函式
var myArray = {
    value: [1,2,3,4,5],
    addNum: 10,
    sum: function() {
        return this.value.reduce((sum,currentValue) => {
            console.log(this)
            return sum + currentValue + this.addNum},0)
    }
}
console.log(myArray.sum()); //ok