javascript - 通过属性动态调用对象中的方法

Question

我有一个组件接收一些参数，需要调用参数中提供的函数 .问题是函数是动态的，所以我需要在发送它们之前定义它们。
这是可以传递给组件的参数

export class SomeConfig {
 baseScope: any;
 functions?: { buttonName: string, buttonEvent: string, buttonFunction: Function}[]
}

这就是我填充参数并将其传递给组件的方式。如您所见，我可以通过填写 来定义我想要的功能。按钮功能 属性(property)。

  ngOnInit(): void {
   this.gridconfig = {
       baseScope : this,
       functions: [
         { buttonName: 'data-edit', buttonEvent: 'click', buttonFunction: this.edit},
         { buttonName: 'data-del', buttonEvent: 'hover', buttonFunction: this.delete},
       ]
    };
  });
 }

edit(){
}

delete(){
}

现在我有 mainScope 和函数。 我想在mainScope中找到方法 .

this.someconfigs.functions.forEach(fnc => {
//here i have fnc.buttonFunction which defined before and exists in this.someconfigs.mainScope
//i need to find fnc.buttonFunction in mainScope and called it dynamically, for example calling edit 
})

目前，我正在使用以下语法。我将范围传递给函数

fnc.buttonFunction(this.someconfigs.baseScope);

在我的函数中，我有一个使用主范围的参数

edit(scope: any) {
//instead of this.someproperties I use scope.someproperties  I want to call it directly in order to remove passing scope parameter
console.log("called");
}

我想直接调用它以删除传递的范围参数

Answer 1

您可以使用 Function.prototype.bind

edit() {
  console.log("called");
  console.log(this.someproperties);
}


fnc.buttonFunction.bind(this)();

或者只是在声明函数时绑定(bind)范围:

{
  buttonName: 'data-del',
  buttonEvent: 'hover',
  buttonFunction: this.delete.bind(this),
},