JavaScript 中的"extends"关键字?
在 JavaScript 中，您可以使用 extends 关键字扩展类和对象。它经常用于构建其他类的子类。除了内置对象之外，还可以使用 extends 关键字将自定义类作为子类。
类是现实世界项目的蓝图，因此我们可以轻松地在编程中更改、访问和使用它们。它被指定为建立一个抽象数据类型来保存特定类型的信息以及用于操作该信息的方法。您可以使用 extends 关键字来使用类继承。
任何具有原型属性的构造函数，或者可以使用 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() 函数。在此上下文中，overrideMethod() 函数和"behaviour"属性被"Jungle"类覆盖。
<!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 关键字。
