Quelle est la façon d'implémenter l'héritage dans Es6

Dans es6, vous pouvez utiliser le mot-clé class avec le mot-clé extends pour implémenter l'héritage. Le mot-clé class a été introduit dans ES6 pour déclarer une classe, et une classe (classe) peut hériter des propriétés et des méthodes de la classe parent via extends. La syntaxe est "le nom de la sous-classe de la classe étend le nom de la classe parent {...} ;".

L'environnement d'exploitation de ce tutoriel : système Windows 7, ECMAScript version 6, ordinateur Dell G3.

Dans es6, vous pouvez utiliser le mot-clé class avec le mot-clé extends pour implémenter l'héritage

Dans ES6, la classe (class) est introduite comme modèle pour les objets et les classes peuvent être définies via le mot-clé class.

héritage es6

La classe peut être héritée via le mot-clé extends

class Animal {}
class Cat extends Animal { };

Le code ci-dessus définit une classe Cat, qui hérite de tous les attributs et méthodes de la classe Animal via le mot-clé extends. Mais comme aucun code n’est déployé, les deux classes sont exactement les mêmes, ce qui équivaut à copier une classe Animal. Ensuite, nous ajoutons du code dans Cat.

class Cat extends Animal {
    constructor(name, age, color) {
        // 调用父类的constructor(name, age)
        super(name, age);
        this.color = color;
    }
    toString() {
        return this.color + ' ' + super.toString(); // 调用父类的toString()
    }
}

Le mot-clé super apparaît à la fois dans la méthode constructeur et dans la méthode toString. Il représente ici le constructeur de la classe parent et est utilisé pour créer un nouvel objet this de la classe parent.

Il convient de noter que le mot-clé class n'est qu'un sucre de syntaxe pour le prototype, et l'héritage JavaScript est toujours implémenté sur la base du prototype.

class Pet {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  showName() {
    console.log("调用父类的方法");
    console.log(this.name, this.age);
  }
}

// 定义一个子类
class Dog extends Pet {
  constructor(name, age, color) {
    super(name, age); // 通过 super 调用父类的构造方法
    this.color = color;
  }

  showName() {
    console.log("调用子类的方法");
    console.log(this.name, this.age, this.color);
  }
}

Avantages :

• Clair et pratique
  

Inconvénients :

• Tous les navigateurs ne prennent pas en charge les classes.

【Recommandations associées : tutoriel vidéo javascript, front-end web】

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!