类方法作为同类方法参数传递时丢失作用域报错问题

为什么会报错？ #

这是JavaScript中this的绑定规则导致的：

• 直接调用myClass.function3()或myClass.function4()时，this会自动指向myClass实例，能正常访问_myvar和类内方法，所以无异常。
• 但把function3作为参数传给function2时，相当于把这个函数从实例上剥离成了独立的普通函数。当function2里执行myfunction()时，该函数的this不再指向myClass实例——非严格模式下是全局对象（比如浏览器的window），严格模式下是undefined。此时调用this.function4()或访问this._myvar，自然会因找不到对应属性/方法抛出类型错误。

另外注意：你原代码里的consoleLog是拼写错误，正确写法是console.log，这个错误也会导致后续报错，需要先修正。

绑定this的解决方法 #

方法1：传递函数时用bind固定this #

在传递function3时，用bind把它的this绑定到类实例上：

// 修改function1内部调用
function1(){
    this.function2(this.function3.bind(this))
}

// 或者直接调用时绑定
myClass.function2(myClass.function3.bind(myClass));

bind会返回一个新函数，这个新函数的this会永久绑定为你传入的对象，不管后续怎么调用它。

方法2：在构造函数中提前绑定方法 #

如果function3/function4会被频繁作为回调传递，建议在类的构造函数里提前完成this绑定，避免重复操作：

class Myclass{
    private _myvar = "foo"

    constructor() {
        // 提前把方法的this绑定到当前实例
        this.function3 = this.function3.bind(this);
        this.function4 = this.function4.bind(this);
    }

    function1(){
        this.function2(this.function3)
    }

    function2(myfunction){
        myfunction()
    }

    function3(){
        this.function4()
    }

    function4(){
        console.log(this._myvar)
    }
}

这样后续无论怎么传递这些方法，它们的this始终指向类实例。

方法3：用箭头函数定义类方法 #

箭头函数的this继承自外层作用域，在类中用箭头函数定义方法时，this会一直指向当前类实例：

class Myclass{
    private _myvar = "foo"

    function1 = () => {
        this.function2(this.function3)
    }

    function2(myfunction){
        myfunction()
    }

    function3 = () => {
        this.function4()
    }

    function4 = () => {
        console.log(this._myvar)
    }
}

注意：这种方式会把方法变成实例的私有属性，而非原型上的共享方法，每个类实例都会复制一份方法，适合不需要继承方法的小型类场景。

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