Angular 6+ 如何将内部函数与类变量一起使用？

Question

我想在处理 5 个不同的用户输入数组时使用 array.filter(my_func()) 优雅地返回没有用户刚刚删除的元素的数组，并带有一个私有的 filterInput 类变量。 但是， my_func() 在用作内部调用时没有“this”上下文。

有一个更好的方法吗？ 宁愿不在 5 个不同的调用者中编写相同的过滤器函数，只是为了保持范围。

MyClass
    private inputArray1: string[];
...
    private filterInput: string;
...
    private filterFunc(element, index, array) {
        return (element !== this.filterInput);
    }
...
    public caller1(input: string) {//this is called from the onclick() in the HTML
        this.filterInput = input;
        this.inputArray1 = this.inputArray1.filter(this.filterFunc());
    }

任何人都知道如何在不废弃过滤器实用程序的情况下完成此操作，只需使用搜索编写我自己的然后返回 slice1 + slice2？

Answer 1

您可以使用函数绑定方法来修复this引用

public caller1(input: string) {
  this.filterInput = input;
  this.inputArray1 = this.inputArray1.filter(this.filterFunc.bind(this));
}

或者你可以使用javascript箭头函数

public caller1(input: string) {
  this.filterInput = input;
  this.inputArray1 = this.inputArray1.filter((elm,idx,arr) => this.filterFunc(elm,idx,arr));
}

另一种方式是 javascript 函数闭包🧙‍♂️

private filterFunc() {
    const filterInput = this.filterInput;
    return function (element, index, array) {
         return (element !== filterInput);
}

public caller1(input: string) {
    this.inputArray1 = this.inputArray1.filter(this.filterFunc());
}

但我更喜欢使用这样的参数来设置过滤器值

private filterFunc(filterInput) {
    return function (element, index, array) {
         return (element !== filterInput);
}

public caller1(input: string) {
    this.inputArray1 = this.inputArray1.filter(this.filterFunc(this.filterInput));
}

闭馆🚀🚀

Answer 2

有关如何解决此问题的一般解决方案，请参阅如何在回调中访问正确的“ this ”？ ，但对于filter方法，只需将上下文作为第二个参数传递：

this.inputArray1 = this.inputArray1.filter(this.filterFunc, this);
//                                                          ^^^^

虽然这是相对单调的。 您根本不会使filterFunc成为实例方法，您只需在caller1方法中定义一个本地函数并使其成为input参数的闭包：

public caller1(input: string) {
    function filterFunc(element, index, array) {
        return (element !== input);
//                          ^^^^^
    }
    this.inputArray1 = this.inputArray1.filter(filterFunc);
//                                             ^^^^^^^^^^
}

或者做同样的事情，但通过将函数内联定义为表达式、使用箭头语法并省略不需要的参数来更简洁：

public caller1(input: string) {
    this.inputArray1 = this.inputArray1.filter(element => element !== input);
}

Answer 3

另一种可能的方法是像这样编写“filterFunc”（ts 编译器不会将它放在原型上）：

private filterFunc = (element, index, array) => {
    return (element !== this.filterInput);
}

并像这样使用它：

this.inputArray1 = this.inputArray1.filter(this.filterFunc);