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 关键字。

更新于: 2022年8月23日

1K+ 浏览量

开启您的 职业生涯

通过完成课程获得认证

立即开始
广告