先声明,本文站在巨人的肩膀上发散的思维。如题,首先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

就这些了,理解不到,还请指正。

Logo

前往低代码交流专区

更多推荐