首頁猿問打字稿：從擴(kuò)展類調(diào)用超級(jí)方法給出類...

打字稿：從擴(kuò)展類調(diào)用超級(jí)方法給出類型錯(cuò)誤 - （中間值）不是函數(shù)

JavaScript

30秒到達(dá)戰(zhàn)場(chǎng) 2023-06-09 15:41:43

我正在一個(gè)名為 StructureWindowComponent 的組件中實(shí)現(xiàn)事件處理，并且還在 LeggerStructureWindowComponent 中對(duì)其進(jìn)行了覆蓋。在基類（StructureWindowComponent）中，blur事件的事件處理如下：symbolCellLostFocus = (symbolField : MatInput, $index: number) =>{ console.log("base class symbol cell lost focus"); //implementation... }在派生類 LeggerStructureWindowComponent 中，我像這樣使用 super 調(diào)用此方法...symbolCellLostFocus = (symbolField : MatInput, $index: number) =>{ console.log("derived class symbol lost focus"); super.symbolCellLostFocus(symbolField, $index); }我在控制臺(tái)中收到錯(cuò)誤：ERROR TypeError: (intermediate value).symbolCellLostFocus is not a function不知道這里出了什么問題..有人可以請(qǐng)教嗎？

查看完整描述

1 回答

holdtom

TA貢獻(xiàn)1805條經(jīng)驗(yàn) 獲得超10個(gè)贊

這是一個(gè)棘手的問題，但它與類中箭頭函數(shù)語法的使用以及原型鏈有關(guān)。它與 Angular 無關(guān)。

基本上如果你想解決你的問題，你需要替換a = () => { ... }為a() { ... }：

symbolCellLostFocus(symbolField : MatInput, $index: number) {

? console.log("base class symbol cell lost focus");

? //implementation...

}

symbolCellLostFocus(symbolField : MatInput, $index: number) {

? console.log("derived class symbol lost focus");

? super.symbolCellLostFocus(symbolField, $index);

}

現(xiàn)在進(jìn)行解釋，如果您編寫以下代碼段：

class A {

? ? name = 'A'

? ? sayHello = () => {

? ? ? ? console.log('Hello from A')

? ? }

}

class B extends A {

? ? name = 'B'

? ? sayHello = () => {

? ? ? ? console.log('Hello from B')

? ? ? ? super.sayHello()

? ? }

}

它被轉(zhuǎn)換成這個(gè) JavaScript 片段：

class A {

? ? constructor() {

? ? ? ? this.name = 'A';

? ? ? ? this.sayHello = () => {

? ? ? ? ? ? console.log('Hello from A');

? ? ? ? };

? ? }

}

class B extends A {

? ? constructor() {

? ? ? ? super(...arguments);

? ? ? ? this.name = 'B';

? ? ? ? this.sayHello = () => {

? ? ? ? ? ? console.log('Hello from B');

? ? ? ? ? ? super.sayHello();

? ? ? ? };

? ? }

}

如您所見，方法是在構(gòu)造函數(shù)中為構(gòu)造函數(shù)創(chuàng)建的每個(gè)實(shí)例定義的。這意味著方法sayHellofromA不適用于B，因?yàn)樵冢矗﹕ayHello的原型中不可用，它僅適用于的每個(gè)實(shí)例。這可能會(huì)令人困惑，我強(qiáng)烈建議學(xué)習(xí) JavaScript 中的原型繼承！BAA

ES2015 中引入的類只是 JavaScript 中原型繼承的語法糖。class, constructor,等關(guān)鍵字super只抽象了編寫原型鏈所需的語法。本質(zhì)上，它是在 JavaScript 中實(shí)現(xiàn)組合和繼承的方式，一個(gè)非常強(qiáng)大的概念。

不管怎樣，當(dāng)你super.X()在這里寫的時(shí)候，JavaScript 引擎試圖訪問X原型上的方法，它不存在。你最終得到Object.getPrototypeOf(this).undefined(), 并且undefined確實(shí)不是一個(gè)函數(shù)，所以你會(huì)得到一個(gè)TypeError: (intermediate value).sayHello is not a function運(yùn)行時(shí)錯(cuò)誤。

反對(duì) 回復(fù) 2023-06-09