Javascript VueJS：为什么“这个”未定义？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43929650/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
VueJS: why is "this" undefined?
提问by thanksd
I'm creating a component with Vue.js.
我正在使用Vue.js创建一个组件。
When I reference thisin any of the the lifecycle hooks(created, mounted, updated, etc.) it evaluates to undefined:
当我引用this中的任何所述的生命周期钩（created，mounted，updated等等）它的计算结果为undefined：
mounted: () => {
console.log(this); // logs "undefined"
},
The same thing is also happening inside my computed properties:
同样的事情也在我的计算属性中发生：
computed: {
foo: () => {
return this.bar + 1;
}
}
I get the following error:
我收到以下错误：
Uncaught TypeError: Cannot read property 'bar' of undefined
未捕获的类型错误：无法读取未定义的属性“bar”
Why is thisevaluating to undefinedin these cases?
为什么在这些情况下this评估 to undefined？
回答by thanksd
Both of those examples use an arrow function() => { }, which binds thisto a context different from the Vue instance.
这两个示例都使用箭头函数() => { }，它绑定this到与 Vue 实例不同的上下文。
As per the documentation:
根据文档：
Don't use arrow functions on an instance property or callback (e.g.
vm.$watch('a', newVal => this.myMethod())). As arrow functions are bound to the parent context,thiswill not be the Vue instance as you'd expect andthis.myMethodwill be undefined.
不要在实例属性或回调（例如
vm.$watch('a', newVal => this.myMethod())）上使用箭头函数。由于箭头函数绑定到父上下文，this因此不会像您期望的那样成为 Vue 实例并且this.myMethod将是未定义的。
In order to get the correct reference to thisas the Vue instance, use a regular function:
为了获得this作为 Vue 实例的正确引用，请使用常规函数：
mounted: function () {
console.log(this);
}
Alternatively, you can also use the ECMAScript 5 shorthandfor a function:
或者，您也可以对函数使用ECMAScript 5 速记：
mounted() {
console.log(this);
}
回答by Ashutosh Narang
You are using arrow functions.
您正在使用箭头函数。
The Vue Documentationclearly states not to use arrow functions on a property or callback.
该Vue的文件中明确规定不能在属性或回调使用箭头功能。
Unlike a regular function, an arrow function does not bind this. Instead, thisis bound lexically (i.e. thiskeeps its meaning from its original context).
与常规函数不同，箭头函数不绑定this。相反，this在词法上是绑定的（即this保留其原始上下文的含义）。
var instance = new Vue({
el:'#instance',
data:{
valueOfThis:null
},
created: ()=>{
console.log(this)
}
});
This logs the following object in the console:
这会在控制台中记录以下对象：
Window?{postMessage: ?, blur: ?, focus: ?, close: ?, frames: Window,?…}
Window?{postMessage: ?, blur: ?, focus: ?, close: ?, frames: Window,?…}
Whereas... If we use a regular function (which we should on a Vue instance)
而...如果我们使用常规函数（我们应该在 Vue 实例上使用）
var instance = new Vue({
el:'#instance',
data:{
valueOfThis:null
},
created: function(){
console.log(this)
}
});
Logs the following object in the console:
在控制台中记录以下对象：
hn?{_uid: 0, _isVue: true, $options: {…}, _renderProxy: hn, _self: hn,?…}
hn?{_uid: 0, _isVue: true, $options: {…}, _renderProxy: hn, _self: hn,?…}
