坑爹的箭头函数

es6（es2015）中引入了箭头函数，形如

() => {
    console.log('arrow function!');
}

// 相当于
function() {
    console.log('arrow function!');
}

　　

爱好新技术的我，当然是热情拥抱她，把所有的function 都用箭头取代了

然而这给我今天的开发带来的灾难性的打击，浪费了整整一下午时间终于发现他们之间其实还是有很大区别的，由于过分钟爱她，以致于始终不愿意相信是她出了问题。

出问题的代码如下：

watch: {
    'calendar.value': (value) => {
        this.calendar.items[this.calendar.picker].value = value;
    }
},

这是Vue组件中的一段代码， 对于Vue组件，this无处不在，方法中，钩子函数中，Watch选项中。。。

然而，在这段代码中this竟然指向了window对象，导致整个页面都出错了，功能瘫了大半。

百思不得其解，后来终于不得不承认是箭头函数出了问题，换成如下传统方式就解决了问题了

watch: {
    'calendar.value': function(value) {
        this.calendar.items[this.calendar.picker].value = value;
    }
},

 

万般感慨，深刻反思以后，写下此文以加深记忆，不能再浪费时间踩这个坑了。。。