2021-04-25为什么在vue中的methods中箭头函数的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
就这些了，理解不到，还请指正。
————————————————
版权声明：本文为CSDN博主「喯啵儿灞」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/u598975767/article/details/105784025