Grundlegende prototypische Vererbung
Eine einfache, aber effektive Methode zur Vererbung in JavaScript ist die Verwendung des folgenden Zweiliners:
B.prototype = Object.create(A.prototype);
B.prototype.constructor = B;
Das ist ähnlich wie folgt:
B.prototype = new A();
Der Hauptunterschied zwischen beiden besteht darin, dass der Konstruktor von Abei Verwendung nicht ausgeführt wird Object.create, was intuitiver und der klassenbasierten Vererbung ähnlicher ist.
Sie können jederzeit festlegen, dass der Konstruktor von optional ausgeführt werden soll, Awenn Sie eine neue Instanz von erstellen B, indem Sie ihn dem Konstruktor hinzufügen von B:
function B(arg1, arg2) {
A(arg1, arg2);
}
Wenn Sie alle Argumente von Ban übergeben möchten A, können Sie auch Folgendes verwenden Function.prototype.apply():
function B() {
A.apply(this, arguments);
}
Wenn Sie ein anderes Objekt in den Konstruktor Kette mixin wollen B, können Sie kombinieren Object.createmit Object.assign:
B.prototype = Object.assign(Object.create(A.prototype), mixin.prototype);
B.prototype.constructor = B;
Demo
function A(name) {
this.name = name;
}
A.prototype = Object.create(Object.prototype);
A.prototype.constructor = A;
function B() {
A.apply(this, arguments);
this.street = "Downing Street 10";
}
B.prototype = Object.create(A.prototype);
B.prototype.constructor = B;
function mixin() {
}
mixin.prototype = Object.create(Object.prototype);
mixin.prototype.constructor = mixin;
mixin.prototype.getProperties = function() {
return {
name: this.name,
address: this.street,
year: this.year
};
};
function C() {
B.apply(this, arguments);
this.year = "2018"
}
C.prototype = Object.assign(Object.create(B.prototype), mixin.prototype);
C.prototype.constructor = C;
var instance = new C("Frank");
console.log(instance);
console.log(instance.getProperties());
Erstellen Sie Ihren eigenen Wrapper
Wenn Sie nicht gerne ungefähr denselben Zweizeiler in Ihren Code schreiben, können Sie eine grundlegende Wrapper-Funktion wie die folgende schreiben:
function inheritance() {
var args = Array.prototype.slice.call(arguments);
var firstArg = args.shift();
switch (args.length) {
case 0:
firstArg.prototype = Object.create(Object.prototype);
firstArg.prototype.constructor = firstArg;
break;
case 1:
firstArg.prototype = Object.create(args[0].prototype);
firstArg.prototype.constructor = firstArg;
break;
default:
for(var i = 0; i < args.length; i++) {
args[i] = args[i].prototype;
}
args[0] = Object.create(args[0]);
var secondArg = args.shift();
firstArg.prototype = Object.assign.apply(Object, args);
firstArg.prototype.constructor = firstArg;
}
}
So funktioniert dieser Wrapper:
- Wenn Sie einen Parameter übergeben, erbt der Prototyp von
Object.
- Wenn Sie zwei Parameter übergeben, erbt der Prototyp des ersten vom zweiten.
- Wenn Sie mehr als zwei Parameter übergeben, erbt der Prototyp des ersten vom zweiten und die Prototypen anderer Parameter werden eingemischt.
Demo
function inheritance() {
var args = Array.prototype.slice.call(arguments);
var firstArg = args.shift();
switch (args.length) {
case 0:
firstArg.prototype = Object.create(Object.prototype);
firstArg.prototype.constructor = firstArg;
break;
case 1:
firstArg.prototype = Object.create(args[0].prototype);
firstArg.prototype.constructor = firstArg;
break;
default:
for(var i = 0; i < args.length; i++) {
args[i] = args[i].prototype;
}
args[0] = Object.create(args[0]);
var secondArg = args.shift();
firstArg.prototype = Object.assign.apply(Object, args);
firstArg.prototype.constructor = firstArg;
}
}
function A(name) {
this.name = name;
}
inheritance(A);
function B() {
A.apply(this, arguments);
this.street = "Downing Street 10";
}
inheritance(B, A);
function mixin() {
}
inheritance(mixin);
mixin.prototype.getProperties = function() {
return {
name: this.name,
address: this.street,
year: this.year
};
};
function C() {
B.apply(this, arguments);
this.year = "2018"
}
inheritance(C, B, mixin);
var instance = new C("Frank");
console.log(instance);
console.log(instance.getProperties());
Hinweis
Object.createkann sicher in jedem modernen Browser verwendet werden, einschließlich IE9 +. Object.assignfunktioniert weder in einer IE-Version noch in einigen mobilen Browsern. Es wird empfohlen, Polyfill Object.create und / oder Object.assignwenn Sie sie verwenden und Browser unterstützen möchten, die sie nicht implementieren.
Eine Polyfüllung finden Sie Object.create hier
und eine Object.assign hier .