JS传递类实例方法作为回调时this为undefined的规则咨询

两种传参方式的差异原理 #

1. 直接传递myClass.bar时this为undefined #

• 类中声明的普通方法（bar() {}语法）本身不会预先绑定实例的this，它的this指向完全由调用时的执行上下文决定，和定义位置无关。
• 执行handler(myClass.bar)时，你传递的只是bar函数本身的引用，此时已经和myClass实例脱离了关联。
• handler内部执行callback()时属于无调用前缀的独立调用，而类内部默认运行在严格模式下，严格模式中独立调用的普通函数this就会是undefined，和你的运行结果一致。

2. 箭头函数包裹后this指向正常 #

• 箭头函数没有自身的this，它的this继承自定义时所在外层作用域的this，不会被调用方式改变。
• 这里的箭头函数() => myClass.bar()定义时，直接捕获了当前作用域下的myClass实例引用，执行时本质是调用myClass.bar()，属于带前缀的对象方法调用，this自然指向myClass实例。

对应规范说明 #

ECMAScript官方标准中明确了两类函数的this绑定规则：

• 普通函数遵循「调用时绑定」规则：如果调用时带对象前缀（形如obj.func()），this指向该对象；独立调用时严格模式下this为undefined，非严格模式指向全局对象。
• 箭头函数遵循「词法绑定」规则：不存在自身的this，直接继承外层作用域的this，不受调用方式影响。

其他可选解决方案 #

如果不想每次传递回调都包裹箭头函数，也可以在类定义时直接把方法写成实例箭头函数，预先绑定this：

class MyClass {
    foo = 'foo';
    // 箭头函数作为实例属性，this直接绑定到当前实例
    bar = () => {
        console.log('This is:');
        console.log(this);
    }
}

修改后直接传递handler(myClass.bar)也能得到正确的this指向。

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