为什么在vue中的methods中箭头函数的this指向undefined
先声明,本文站在巨人的肩膀上发散的思维。如题,首先this不会是vm,这一点很笃定。但为何是undefined不是window,想着有些困惑。搞明白这个,首先得晓得这几个前提:1.箭头函数的this是在定义函数时继承了其父级作用域的this,不是在执行过程中绑定的。2.vue默认开启了严格模式。3.全局作用域下的函数中使用this,在严格模式下this指向undefined以上...
·
先声明,本文站在巨人的肩膀上发散的思维。如题,首先this不会是vm,这一点很笃定。但为何是undefined不是window,想着有些困惑。
搞明白这个,首先得晓得这几个前提:
1.箭头函数的this是在定义函数时继承了其父级作用域的this,不是在执行过程中绑定的。
2.vue默认开启了严格模式。
3.全局作用域下的函数(非箭头函数)中使用this,在严格模式下this指向undefined
以上三点为前提,可以印证。
了解这三条,再去看一下vue的源码,有这么一段:
function initMethods (vm: Component) {
const methods = vm.$options.methods
if (methods) {
for (const key in methods) {
//这一行是重点
vm[key] = methods[key] == null ? noop : bind(methods[key], vm)
if (process.env.NODE_ENV !== 'production' && methods[key] == null) {
//...这一段是容错信息 不用管
}
}
}
}
可以看到重点的那一句,其实是把methods中的函数直接动态绑定到了vue实例vm上。而这个操作是在全局函数initMethods中执行的,此函数中的this为在严格模式下为undefined。由此导致我们在mehtods中使用箭头函数的this时,为undefined。
依样可以写个小测试,加深下理解
"use strict";
let vm={}
function init(vm){
vm["handle"]=_=>{
console.log(this)
}
}
init(vm)
vm.handle() //输出 undefined
就这些了,理解不到,还请指正。
更多推荐
已为社区贡献2条内容
所有评论(0)