3 Vererbungsimplementierungsmethoden in Javascript_Grundkenntnisse

Verwenden Sie Object.create, um die Klassenvererbung zu implementieren

Das Folgende ist ein Beispiel von der offiziellen Website

//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."

Zu diesem Zeitpunkt verweist der Konstruktor des Rechteck-Prototyps auf die übergeordnete Klasse. Wenn Sie Ihren eigenen Konstruktor verwenden müssen, können Sie ihn wie folgt manuell angeben

Rectangle.prototype.constructor = Rechteck;

Verwenden Sie util.inherites, das mit dem Dienstprogramm-Toolpaket geliefert wird

Grammatik

util.inherits(constructor, superConstructor)
Beispiel

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!"

Es ist auch ein sehr einfaches Beispiel. Tatsächlich verwendet der Quellcode die neuen Funktionen von ES6

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);
};

Unter anderem ist Object.setPrototypeOf eine neue Funktion von ES6, die den Prototyp eines angegebenen Objekts auf ein anderes Objekt oder null setzt

Grammatik

Object.setPrototypeOf(obj, Prototyp)
obj ist ein Objekt, das als Prototyp erstellt wird Prototyp ist der neue Prototyp von obj (kann ein Objekt oder null sein).

Wenn auf null gesetzt, ist es das folgende Beispiel

Object.setPrototypeOf({}, null);

Ich finde, dass setPrototypeOf seinem Namen alle Ehre macht und sich auf Prototypen zum Spaß spezialisiert hat.
Wie wird das Ding also umgesetzt? Zu diesem Zeitpunkt müssen Sie das Master-__proto__
verwenden

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

Weisen Sie proto einfach obj.__proto__ zu.

Verwenden Sie das Schlüsselwort „extens“

Studenten, die mit Java vertraut sind, sollten mit diesem Schlüsselwort bestens vertraut sein. Die Vererbung in Java wird dadurch realisiert.

Das neu hinzugefügte Klassenschlüsselwort in ES6 ist syntaktischer Zucker, aber sein Kern ist immer noch eine Funktion.

Im folgenden Beispiel wird eine Klasse namens Polygon definiert und anschließend eine Klasse Square, die von Polygon erbt. Beachten Sie, dass super() im Konstruktor verwendet wird, supper() nur im Konstruktor verwendet werden kann und die Super-Funktion aufgerufen werden muss, bevor diese verwendet werden kann.

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';
 }
}

Nachdem Sie Schlüsselwörter verwendet haben, müssen Sie keine verschiedenen Prototypen einrichten. Die Schlüsselwörter wurden gekapselt, was sehr schnell und bequem ist.