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

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

JavaScript

30秒到達戰(zhàn)場 2023-06-09 15:41:43

我正在一個名為 StructureWindowComponent 的組件中實現(xiàn)事件處理，并且還在 LeggerStructureWindowComponent 中對其進行了覆蓋。在基類（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); }我在控制臺中收到錯誤：ERROR TypeError: (intermediate value).symbolCellLostFocus is not a function不知道這里出了什么問題..有人可以請教嗎？

查看完整描述

1 回答

holdtom

TA貢獻1805條經(jīng)驗獲得超10個贊

這是一個棘手的問題，但它與類中箭頭函數(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)在進行解釋，如果您編寫以下代碼段：

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)換成這個 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)建的每個實例定義的。這意味著方法sayHellofromA不適用于B，因為在（即）sayHello的原型中不可用，它僅適用于的每個實例。這可能會令人困惑，我強烈建議學(xué)習(xí) JavaScript 中的原型繼承！BAA

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

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

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