用可变变量访问 JavaScript 类、对象的方法（动态访问 JS 类、对象的方法）

JavaScript中，用可变变量访问对象方法或类静态方法，如果访问的方法中 this，此时 this 将会是 undefined。
用对象解构赋值获得函数名（如：xxx）后，用函数名后面加括号（如：xxx()）执行函数，this 也是 undefined。

问题复现：

// 动态访问方法
class Cls1 {
    fn () {
        console.log(this);
    }
}

const obj = new Cls1();

// ❌ 错误方法
const fn1 = obj.fn;
fn1(); // this undefined

// 解构赋值取得
const { fn } = obj;

// ❌ 错误方法
fn(); // this undefined

1、用箭头函数

箭头函数中的 this 总是指向其上级对象，用箭头函数声明方法，可解决上面的两个问题，但不是完美的。箭头函数中不能用 super 关键字，导致我们不能在子类中指定调用父类的方法。

// 动态访问方法
class Cls1 {
    fn = () => {
        console.log(this);
    };
}

const obj = new Cls1();

// 变量函数
const fn1 = obj.fn;
fn1(); // ok

// 解构赋值取得
const { fn } = obj;
fn(); // ok

2、用原型方法

这里举例用 call() 原型方法实现，apply()和 bind() 方法可同样实现，只有参数调用上的却别。

要了解详情，请阅读《JavaScript 原型方法：call、apply、bind 的使用》

// 动态访问方法
class Cls1 {
    fn () {
        console.log(this);
    }
}

const obj = new Cls1();

// 变量函数
const fn1 = obj.fn;
fn1.call(obj); // ok

// 解构赋值取得
const { fn } = obj;
fn.call(obj); // ok

静态方法可以把方法中的 this 换成类名就可以，也可以用 call 方法，把对象实例换成类名就可以。

3、用 bind 改良 call

每次执行函数的时候，期待 fn() 就可以，但总是要加上 call 变成 fn.call(obj)，真实不方便。

bind 的常规用法：

const { fn } = obj;
const fb = fn.bind(obj) // 把对象实例绑到函数上
fb(); // 可以这样执行函数

这样是不是感觉问题更大了，要先 bind，执行的又是跟原先函数名不一样的函数。
我们转换一项思路，把绑定的这个步骤放到构造函数中去，这样就可以预先绑定对象实例了。

class Cls1 {
    constructor () {
        this.fn = this.fn.bind(this); // 给 fn 绑上对象实例
    }

    fn () {
        console.log(this);
    }
}

const obj = new Cls1();
obj.fn();

const { fn } = obj;
fn();

还有一种解决方法是使用 Proxy，访问方法的时候，将自动绑定 this。