如何在调用提取的TypeScript类方法时正确绑定this并传递参数

问题原因 #

1. this绑定丢失：类的方法被单独提取赋值时，会和原实例的绑定关系断开。你把api.api1赋值给func后，调用d.func()时，this不再指向api实例，导致this.baseurl返回undefined。
2. 参数传递错误：你硬编码了'a','b'作为参数，没有使用数组中存储的d.params，无法传递对应方法的正确参数。

解决方案 #

方法1：使用bind绑定实例到方法 #

通过bind(api)把类方法和实例绑定，确保调用时this指向正确的实例；同时用扩展运算符...将参数数组展开为函数的参数。

修改后的完整代码：

enum APIPermissions{ HIGH, LOW };
class Api{
  baseurl: string;
  constructor(admin: boolean){
    if(admin){
      this.baseurl = 'localhost';
    }else{
      this.baseurl = 'admin.localhost'
    }
  }

  api1(param1: string){
    return this.baseurl+'/api1 data';
  }

  api2(param1: string, param2: string){
    return this.baseurl+'/api2 data';
  }

  api3(json: any){
    return this.baseurl+'/api3 data';
  }
}
const api = new Api(true);
const data = [
{
    func: api.api1.bind(api), // 绑定实例到方法
    params: ['test1'],
    permissions: [APIPermissions.LOW]
},
{
    func: api.api2.bind(api),
    params: ['test1', 'test2'],
    permissions: [APIPermissions.HIGH]
}
]
  
for(const d of data){
    const result = d.func(...d.params); // 展开参数数组
    console.log(result);
    // Check result and do something
}

方法2：用箭头函数包装类方法 #

箭头函数的this会继承自外层作用域，这里外层的api实例就是我们需要的上下文，同样配合扩展运算符传参。

仅修改data数组部分的代码：

const data = [
{
    func: (...args) => api.api1(...args), // 箭头函数保留this上下文
    params: ['test1'],
    permissions: [APIPermissions.LOW]
},
{
    func: (...args) => api.api2(...args),
    params: ['test1', 'test2'],
    permissions: [APIPermissions.HIGH]
}
]

运行结果 #

两种方法都能得到预期输出：

"localhost/api1 data"
"localhost/api2 data"

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