如何在具有继承的 class 中使用回调函数

Question

如何在子方法中使用父方法作为回调函数

class Parent {
    numbers: number[];

    constructor(numbers: number[]) {
        this.numbers = numbers;
    }

    protected iterateNumbers(iterCallback: (nb: number) => void): void {
        for (const nb of this.numbers) {
            iterCallback(nb);
        }
    }

    protected inc(nb: number): number {
        return nb++;
    }
}

class Child extends Parent {
    constructor(numbers: number[]) {
        super(numbers)
    }

    getNumbers(): void {
        this.iterateNumbers(this.displayNumber);
    }

    private displayNumber(nb: number): void {
        console.log(this.inc(nb));
    }
}

const c = new Child([1, 2, 3, 4, 5]);
c.getNumbers();

此代码导致此错误：TypeError: Cannot read property 'inc' of undefined

修改为 super()

Answer 1

您需要在子 class 的构造函数中调用 super 方法才能访问 super class.

的属性和方法

此外，由于您拥有私有的 displayNumber 方法，您将无法从 child class 创建的对象访问它。删除 private 关键字将允许访问

尝试更改您的扩展子项以包含构造函数方法和超级调用：

class Child extends Parent {

    constructor() {
        super()
    }
    
    getNumbers(): void {
        this.iterateNumbers(this.displayNumber);
    }

    displayNumber(nb: number): void {
        console.log(this.inc(nb));
    }
}

您可以在 MDN docs on the super keyword

中阅读更多内容

更新：

经过一些测试后，我找到了解决您为什么会收到该错误的解决方案，当然这完全与上下文有关。如果您将 inc 方法设为静态，您将能够通过 Parent.inc()

调用它

通过将 displayNumber 方法作为回调传递，您将失去要从中调用它的 class 的上下文。这就是您收到未定义错误的原因。

class Parent {
    numbers: number[];

    constructor(numbers: number[]) {
        this.numbers = numbers;
    }

    protected iterateNumbers(iterCallback: (nb: number) => void): void {
        for (const nb of this.numbers) {
            iterCallback(nb);
        }
    }

    static inc(nb: number): number {
        return nb++;
    }
}

class Child extends Parent {
    constructor(numbers: number[]) {
        super(numbers)
    }

    getNumbers(): void {
        this.iterateNumbers(this.displayNumber);
    }

    private displayNumber(nb: number): void {
        console.log(Parent.inc(nb));
    }
}

const c = new Child([1, 2, 3, 4, 5]);
c.getNumbers(); // prints 1 2 3 4 5

如果你运行这个代码你会看到打印出来的数字。

现在，通过在 child 构造函数中调用 super 方法并将 inc 方法更新为静态方法，然后这样调用它，我想您会得到预期的结果。

Answer 2

找到了一种方法来做同样的事情，但使用 none 静态方法

ES6 风格允许您使用新功能，例如 super 关键字。当您使用 ES6 classes 语法时，super 关键字全都与父 class 上下文有关。

class Parent {
    numbers: number[];

    constructor(numbers: number[]) {
        this.numbers = numbers;
    }

    protected iterateNumbers(predictionCallback: (nb: number) => void): void {
        for (const nb of this.numbers) {
            predictionCallback(nb);
        }
    }

    protected inc(nb: number): number {
        return nb++;
    }
}

class Child extends Parent {

    constructor(numbers: number[]) {
        super(numbers)
    }

    getNumbers() {
        this.iterateNumbers(this.displayNumber);
    }

    private displayNumber(nb: number): void {
        console.log(super.inc(nb));
    }
}

const c = new Child([1, 2, 3, 4, 5]);
c.getNumbers();

如何在具有继承的 class 中使用回调函数

How to use a callback function in a class with inheritance

javascript

oop

callback

typescript