码迷,mamicode.com
首页 > 其他好文 > 详细

坑爹的箭头函数

时间:2016-10-16 01:32:42      阅读:135      评论:0      收藏:0      [点我收藏+]

标签:

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;
    }
},

 

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

  

坑爹的箭头函数

标签:

原文地址:http://www.cnblogs.com/yangfengitblog/p/5965445.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!