Vue中调用方法时括号对this指向的影响及疑问

先看你的代码场景：

const me = reactive({
  name: "foo",
  sayHi: function () {
    console.log("Hi I am : ", this);
  },
});

模板里的两种绑定方式：

• <Comp :name="me.name" @sayHi="me.sayHi"/>
• <Comp :name="me.name" @sayHi="me.sayHi()"/>

第一种情况（不带括号）：this为undefined的原因 #

当你直接传递me.sayHi时，本质是把这个函数的引用单独抽出来传给事件处理器。由于me是reactive创建的代理对象，取出me.sayHi时，这个函数已经和原代理对象的上下文脱钩了。Vue触发事件时会直接调用这个函数，此时函数是以普通函数形式执行的（没有通过对象.方法()的调用方式），在严格模式下普通函数的this就是undefined。

第二种情况（带括号）：this指向me的原因 #

写me.sayHi()时，模板会把它解析成一个匿名函数，大致等价于：

@sayHi="() => { me.sayHi() }"

事件触发时执行的是这个匿名函数，里面通过me.sayHi()的形式调用方法——这里的me是响应式代理对象，通过.调用方法时，函数的this会自动绑定到me这个代理对象上，所以打印的this就是预期的对象本身。

补充：让不带括号的写法也能绑定正确的this #

如果想保留不带括号的写法，同时让this指向me，可以用这两种方式：

// 方式1：用箭头函数（直接引用me代替this）
const me = reactive({
  name: "foo",
  sayHi: () => {
    console.log("Hi I am : ", me);
  },
});

// 方式2：手动绑定this到me
const me = reactive({
  name: "foo",
  sayHi: function () {
    console.log("Hi I am : ", this);
  },
});
me.sayHi = me.sayHi.bind(me);

内容的提问来源于stack exchange，提问作者walox