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));
}

Closures

Answer 2

有关如何解决此问题的一般解决方案，请参见How to access the correct `this` inside a callback?，但对于the filter method，只需将上下文作为第二个参数传递即可。

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

这是相对简单的。您根本不会将filterFunc用作实例方法，只需在caller1方法内定义一个局部函数并将其设为closure over the input parameter：

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);

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

3 个答案: