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