資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究JavaScript 中的“extends”關鍵字？
在 JavaScript 中，您可以使用 extends 關鍵字擴充套件類和物件。它通常用於建立作為其他類的子類的類。除了內建物件外，還可以使用 extends 關鍵字對自定義類進行子類化。
類充當現實世界事物的藍圖，以便我們能夠輕鬆地在程式設計中修改、訪問和使用它們。它被指定為建立抽象資料型別，以將特定型別的資訊與操作該資訊的方法結合在一起。您使用 extends 關鍵字來使用類繼承。
任何具有 prototype 屬性或可以使用 new 呼叫的建構函式都可以作為父類的候選物件。
語法
class childclass extends parentclass {...}
class parentclass extends in-built object {...}
示例 1
在下面的示例中，Jungle 類繼承了 extAnimal 類所有方法和屬性。因此，animalSize() 函式和 name 屬性將新增到 Jungle 類中。
之後，我們建立了一個 wildAnimal 物件並使用它來訪問 Jungle 類的 animalSize() 方法。
<!DOCTYPE html> <html> <title>"extends" keyword in JavaScript - TutorialsPoint</title> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body style="text-align:center"> <script> class extAnimal { constructor(name) { this.name = name; } animalSize() { document.write(`Elephant is bigger ${this.name}`); } } class Jungle extends extAnimal { } let wildAnimal = new Jungle('than Tiger'); wildAnimal.animalSize(); </script> </body> </html>
示例 2
在此示例中，讓我們瞭解如何在子類中使用 super 關鍵字來指示其父類。
您可以在這裡看到 'Jungle' 類中的 'super' 是 'Animal' 的子類。因此，每當呼叫 'Jungle' 類的建構函式時，它也會呼叫 'Animal' 類的建構函式，從而賦予它一個 name 屬性。
<!DOCTYPE html> <html> <title>"extends" keyword in JavaScript - TutorialsPoint</title> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body style="text-align:center"> <script> class Animal { constructor(name) { this.name = name; } clawSize() { document.write(`Bear has ${this.name}`); } } class Jungle extends Animal { constructor(name) { document.write("Created jungle as class"+"<br>"); super(name); } } let wildAnimal = new Jungle('long claws'); wildAnimal.clawSize(); </script> </body> </html>
示例 3
在此示例中，讓我們瞭解覆蓋方法或屬性。如果子類的方法或屬性與父類的方法或屬性名稱相同，則將使用子類的方法和屬性。此技術稱為方法覆蓋。
在這種情況下，父類 'Animal' 和子類 'Jungle' 都具有 'behaviour' 屬性和 overrideMethod() 函式。在此上下文中，'Jungle' 類覆蓋了 overrideMethod() 函式和 'behaviour' 屬性。
<!DOCTYPE html> <html> <title>"extends" keyword in JavaScript - TutorialsPoint</title> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body style="text-align:center"> <script> class Animal { constructor(name) { this.name = name; this.behavior = "aggressive"; } overrideMethod() { document.write();(`Hello ${this.name}.`); } } class Jungle extends Animal { constructor(name) { super(name); this.behavior = 'Wild'; } overrideMethod() { document.write(`Loins are very ${this.name}.`); document.write('behavior: ' + this.behavior); } } let y = new Jungle('Aggressive'+'<br>'); y.overrideMethod(); </script> </body> </html>
示例 4
在此示例中，讓我們瞭解如何使用 super 關鍵字來呼叫父類的靜態方法。
<!DOCTYPE html> <html> <title>"extends" keyword in JavaScript - TutorialsPoint</title> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body style="text-align:center"> <script> class Animal { constructor() {} static getAge() { return 'I have 4 puppies'; } } class Jungle extends Animal { constructor() { super() } static getAge() { return super.getAge() + ' that are all of same age'; } } document.write(Jungle.getAge()) </script> </body> </html>
簡而言之
在 ES6 中使用繼承需要使用 extends 關鍵字。基類或父類是要擴充套件的類型別。子類，也稱為子類，是擴充套件基類或父類的類。
要呼叫父類的建構函式，請在子類的建構函式中呼叫 super(arguments) 方法。
要在子類的方法中呼叫父類的方法，只需使用 super 關鍵字。
1K+ 瀏覽量
