3 méthodes d'implémentation de l'héritage dans les connaissances javascript_Basic

Utilisez Object.create pour implémenter l'héritage de classe

Ce qui suit est un exemple tiré du site officiel

//Shape - superclass
function Shape() {
 this.x = 0;
 this.y = 0;
}

Shape.prototype.move = function(x, y) {
  this.x += x;
  this.y += y;
  console.info("Shape moved.");
};

// Rectangle - subclass
function Rectangle() {
 Shape.call(this); //call super constructor.
}

Rectangle.prototype = Object.create(Shape.prototype);

var rect = new Rectangle();

rect instanceof Rectangle //true.
rect instanceof Shape //true.

rect.move(1, 1); //Outputs, "Shape moved."

À ce stade, le constructeur du prototype Rectangle pointe vers la classe parent. Si vous devez utiliser votre propre constructeur, vous pouvez le spécifier manuellement, comme suit

Rectangle.prototype.constructor = Rectangle;

Utilisez util.inherites fourni avec le package d'outils utilitaires

Grammaire

util.inherits(constructeur, superConstructeur)
Exemple

const util = require('util');
const EventEmitter = require('events');

function MyStream() {
  EventEmitter.call(this);
}

util.inherits(MyStream, EventEmitter);

MyStream.prototype.write = function(data) {
  this.emit('data', data);
}

var stream = new MyStream();

console.log(stream instanceof EventEmitter); // true
console.log(MyStream.super_ === EventEmitter); // true

stream.on('data', (data) => {
 console.log(`Received data: "${data}"`);
})
stream.write('It works!'); // Received data: "It works!"

C'est aussi un exemple très simple. En fait, le code source utilise les nouvelles fonctionnalités d'ES6. Jetons un coup d'œil

.

exports.inherits = function(ctor, superCtor) {

 if (ctor === undefined || ctor === null)
  throw new TypeError('The constructor to "inherits" must not be ' +
            'null or undefined');

 if (superCtor === undefined || superCtor === null)
  throw new TypeError('The super constructor to "inherits" must not ' +
            'be null or undefined');

 if (superCtor.prototype === undefined)
  throw new TypeError('The super constructor to "inherits" must ' +
            'have a prototype');

 ctor.super_ = superCtor;
 Object.setPrototypeOf(ctor.prototype, superCtor.prototype);
};

Parmi eux, Object.setPrototypeOf est une nouvelle fonctionnalité d'ES6, qui définit le prototype d'un objet spécifié sur un autre objet ou null

Grammaire

Object.setPrototypeOf(obj, prototype)
obj est un objet qui sera prototypé
prototype est le nouveau prototype d'obj (peut être un objet ou nul).

Si défini sur null, c'est l'exemple suivant

Object.setPrototypeOf({}, null);
Je pense que setPrototypeOf porte bien son nom, spécialisé dans les prototypes pour le plaisir.
Alors, comment cette chose est-elle mise en œuvre ? À ce stade, vous devez utiliser le maître __proto__

Object.setPrototypeOf = Object.setPrototypeOf || function (obj, proto) {
 obj.__proto__ = proto;
 return obj; 
}

Attribuez simplement un proto à obj.__proto__.

Utilisez le mot-clé extends

Les étudiants qui connaissent Java devraient être très familiers avec ce mot-clé. L'héritage en Java est réalisé par celui-ci.
Le mot-clé de classe nouvellement ajouté dans ES6 est le sucre syntaxique, mais son essence est toujours une fonction.

Dans l'exemple suivant, une classe nommée Polygon est définie, puis une classe Square qui hérite de Polygon est définie. Notez que super() utilisé dans le constructeur, supper() ne peut être utilisé que dans le constructeur et la super fonction doit être appelée avant de pouvoir être utilisée.

class Polygon {
 constructor(height, width) {
  this.name = 'Polygon';
  this.height = height;
  this.width = width;
 }
}

class Square extends Polygon {
 constructor(length) {
  super(length, length);
  this.name = 'Square';
 }
}

Après avoir utilisé des mots-clés, vous n'avez pas besoin de configurer divers prototypes. Les mots-clés ont été encapsulés, ce qui est très rapide et pratique.