Principes d'implémentation des classes ES6 et de l'héritage (exemples de code)

Ce que cet article vous apporte concerne les principes d'implémentation (exemples de code) des classes ES6 et de l'héritage. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

1. La classe es6 utilise

javascript utilise l'héritage prototypique Nous pouvons réaliser l'héritage de classe grâce à la fonctionnalité prototype
es6 est Nous fournissons du sucre syntaxique. comme l'héritage orienté objet.

class Parent {
  constructor(a){
    this.filed1 = a;
  }
  filed2 = 2;
  func1 = function(){}
}

class Child extends Parent {
    constructor(a,b) {
      super(a);
      this.filed3 = b;
    }
  
  filed4 = 1;
  func2 = function(){}
}

Nous utilisons maintenant babel pour explorer les principes d'implémentation des classes es6 et de l'héritage.

1. Implémentation de la classe

Avant la conversion :

class Parent {
  constructor(a){
    this.filed1 = a;
  }
  filed2 = 2;
  func1 = function(){}
}

Après la conversion :

function _classCallCheck(instance, Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError("Cannot call a class as a function");
  }
}

var Parent = function Parent(a) {
  _classCallCheck(this, Parent);

  this.filed2 = 2;

  this.func1 = function () { };

  this.filed1 = a;
};

On peut voir que la couche inférieure de la classe est toujours le constructeur :

1. Appelez la méthode _classCallCheck pour déterminer s'il existe un nouveau mot-clé avant l'appel de fonction en cours.

Avec le mot-clé new avant l'exécution du constructeur, un objet vide sera créé à l'intérieur du constructeur, le proptype du constructeur pointera vers le _proto_ de cet objet vide, et cela pointera vers ceci objet vide. Comme ci-dessus, dans _classCallCheck : cette instance de Parent renvoie true.

S'il n'y a pas de new devant le constructeur, le proptype du constructeur n'apparaîtra pas sur la chaîne de prototypes de celui-ci, et false sera renvoyé.

2. Attribuez les variables et les fonctions à l'intérieur de la classe à ceci.

3. Exécutez la logique à l'intérieur du constructeur .

4.renvoyez ceci (le constructeur est fait à la fin par défaut).

2. Implémentation de l'héritage

Avant la conversion :

class Child extends Parent {
    constructor(a,b) {
      super(a);
      this.filed3 = b;
    }
  
  filed4 = 1;
  func2 = function(){}
}

Après la conversion :

Regardons d'abord l'implémentation interne de Child, puis Comment les fonctions appelées en interne sont implémentées :

var Child = function (_Parent) {
  _inherits(Child, _Parent);

  function Child(a, b) {
    _classCallCheck(this, Child);

    var _this = _possibleConstructorReturn(this, (Child.__proto__ || Object.getPrototypeOf(Child)).call(this, a));

    _this.filed4 = 1;

    _this.func2 = function () {};

    _this.filed3 = b;
    return _this;
  }

  return Child;
}(Parent);

1 Appelez la fonction _inherits pour hériter du proptype de la classe parent.

_hérite de l'implémentation interne :

function _inherits(subClass, superClass) {
  if (typeof superClass !== "function" && superClass !== null) {
    throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
  }
  subClass.prototype = Object.create(superClass && superClass.prototype, {
    constructor: { value: subClass, enumerable: false, writable: true, configurable: true }
  });
  if (superClass)
    Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
}

(1) Vérifiez le constructeur parent.

(2) Héritage parasite typique : créez un objet vide en utilisant le proptype du constructeur de la classe parent et pointez cet objet vers le proptype du constructeur de sous-classe.

(3) Pointez le constructeur parent vers le _proto_ du constructeur enfant (on ne sait pas exactement ce que fait cette étape, et cela semble dénué de sens.)

2. Le package enregistre la référence de classe parent et effectue la logique de construction de sous-classe à l'intérieur de la fermeture.

3.nouveau chèque.

4. Utilisez le this actuel pour appeler le constructeur de la classe parent.

var _this = _possibleConstructorReturn(this, (Child.__proto__ || Object.getPrototypeOf(Child)).call(this, a));

Le Child.__proto__ ici || Object.getPrototypeOf(Child) est en fait le constructeur parent (la dernière opération de _inherits), puis remplace son appelant par l'appel this through actuel, et transmettre les paramètres. (J'ai l'impression que vous pouvez utiliser le Parent transmis directement ici)

function _possibleConstructorReturn(self, call) {
  if (!self) {
    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
  }
  return call && (typeof call === "object" || typeof call === "function") ? call : self;
}

Vérifiez si cela a été initialisé, si super a été appelé et renvoyez ceci qui a été attribué par la classe parent.

5. Attribuez-y les variables et les fonctions à l'intérieur de la sous-classe de lignes.

6. Exécutez la logique à l'intérieur du constructeur de sous-classe.

On peut voir qu'es6 nous fournit en fait un moyen simple d'écrire "l'héritage parasitaire combiné".

3. super

super représente le constructeur de la classe parent.

super.fun1() est équivalent à Parent.fun1() ou Parent.prototype.fun1().

super() est équivalent à Parent.prototype.construtor()

Quand on n'écrit pas de constructeur de sous-classe :

var Child = function (_Parent) {
  _inherits(Child, _Parent);

  function Child() {
    _classCallCheck(this, Child);

    return _possibleConstructorReturn(this, (Child.__proto__ || Object.getPrototypeOf(Child)).apply(this, arguments));
  }

  return Child;
}(Parent);

On voit que la valeur par défaut Le constructeur appellera activement le constructeur de la classe parent et transmettra les paramètres transmis par le constructeur actuel à la classe parent par défaut.

Ainsi, lorsque nous déclarons le constructeur, nous devons activement appeler super(), sinon le constructeur parent ne peut pas être appelé et l'héritage ne peut pas être complété.

Un exemple typique est dans le composant de Reatc. Nous devons appeler super(props) après avoir déclaré le constructeur, car la classe parent doit effectuer certaines opérations d'initialisation sur les accessoires dans le constructeur.

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!