Ecmascript 6 ES6箭头功能'；这'；vue.js官方github示例中的难题

以下是vue.js官方网站github的my fork示例fiddle：

I

console.log（this）

在fetchData函数表达式中，输出vue组件实例：

但是当我将arrow函数与fetchData（）一起使用时，它

console.log（这）

是

窗口

我已经学会了箭头函数的概念，但我仍然混淆了

这一点

。为什么第二小提琴

此

绑定到全局窗口对象，而第一小提琴

此

绑定到vue组件实例

什么情况下我不能使用箭头函数

此

？

您不应该使用箭头函数来定义带有Vue的方法，因为对于箭头函数，

此

箭头函数不会创建自己的this，this值 使用封闭的执行上下文

这意味着，对于Vue方法，

此

将指向全局对象或窗口

当Vue被实例化时，Vue将

methods

中定义的方法绑定到Vue对象。无法绑定箭头函数。它的

这个

将永远是它最初的样子

在这种情况下，您应该始终使用普通函数来编写Vue方法

这也适用于数据函数、计算值和生命周期挂钩。通常使用arrow函数的唯一时间是在方法或计算值中定义函数时，就像为ajax调用定义回调时一样

看

---

注意：不使用箭头函数定义Vue方法有一个例外，即如果您在方法中从未引用过此。这些病例极为罕见。您几乎总是需要使用

this

在方法中引用Vue的其他部分。在这种情况下，决不使用箭头函数定义Vue方法应该很快成为一种习惯。

很多人陷入了这个陷阱，认为ES6更好。在jQuery事件处理程序和React的

createClass

中也是如此，当使用箭头函数时，要知道其含义@安德鲁利同意了。这是我看到的最常见的错误之一。@AndrewLi这真的是解决方法吗？我的头发变白了。在jQuery或React中，您将使用bind函数。从MDN web docs:bind（）方法创建一个新函数，在调用该函数时，将其this关键字设置为提供的值，在调用新函数时，在任何提供的参数之前有一个给定的参数序列。