Zusammenfassung der sechs Hauptmuster der Javascript-Vererbung_Javascript-Fähigkeiten

1. Prototypenkette

function SuperType(){
this.property = true;
}

SuperType.prototype.getSuperValue = function(){
return this.property;
};
function SubType(){
this.subproperty = false;
}
//继承了SuperType
SubType.prototype = new SuperType();
SubType.prototype.getSubValue = function (){
return this.subproperty;
};
var instance = new SubType();
alert(instance.getSuperValue()); //true

Der Kern der Implementierung besteht darin, das Prototypobjekt zu überschreiben und durch eine Instanz des neuen Typs zu ersetzen.

2. Konstruktor ausleihen

function SuperType(){
this.colors = ["red", "blue", "green"];
}
function SubType(){
//继承了SuperType
SuperType.call(this);
}
var instance1 = new SubType();
instance1.colors.push("black");
alert(instance1.colors); //"red,blue,green,black"
var instance2 = new SubType();
alert(instance2.colors); //"red,blue,green"

Wenn Sie nur den Konstruktor ausleihen, werden Sie die Probleme des Konstruktormusters nicht vermeiden können – die Methoden sind alle im Konstruktor definiert, sodass eine Wiederverwendung von Funktionen nicht in Frage kommt. Darüber hinaus sind im Prototyp des Supertyps definierte Methoden für Untertypen nicht sichtbar, sodass alle Typen nur das Konstruktormuster verwenden können. Angesichts dieser Probleme wird die Technik des Ausleihens von Konstruktoren selten allein verwendet.

3. Kombinationsvererbung

function SuperType(name){
this.name = name;
this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function(){
alert(this.name);

};
function SubType(name, age){
//继承属性
SuperType.call(this, name);
this.age = age;
}
//继承方法
SubType.prototype = new SuperType();
SubType.prototype.constructor = SubType;
SubType.prototype.sayAge = function(){
alert(this.age);
};
var instance1 = new SubType("Nicholas", 29);
instance1.colors.push("black");
alert(instance1.colors); //"red,blue,green,black"
instance1.sayName(); //"Nicholas";
instance1.sayAge(); //29
var instance2 = new SubType("Greg", 27);
alert(instance2.colors); //"red,blue,green"
instance2.sayName(); //"Greg";
instance2.sayAge(); //27

In diesem Beispiel definiert der SuperType-Konstruktor zwei Eigenschaften: Name und Farben. Der Prototyp von SuperType definiert eine Methode sayName(). Der SubType-Konstruktor übergibt beim Aufruf des SuperType-Konstruktors den Namensparameter und definiert dann sein eigenes Attributalter. Anschließend wird die Instanz von SuperType dem Prototyp von SubType zugewiesen und anschließend die Methode sayAge() für den neuen Prototyp definiert. Auf diese Weise können zwei verschiedene SubType-Instanzen ihre eigenen Eigenschaften haben – einschließlich der Eigenschaft „colors“ – und dieselbe Methode verwenden.

Kombinierte Vererbung vermeidet die Mängel von Prototypketten und geliehenen Konstruktoren, kombiniert ihre Vorteile und wird zum am häufigsten verwendeten Vererbungsmuster in JavaScript. Darüber hinaus können „instanceof“ und „isPrototypeOf()“ auch zur Identifizierung von Objekten verwendet werden, die auf der Grundlage kombinierter Vererbung erstellt wurden.

4. Prototypische Vererbung

function object(o){
function F(){}
F.prototype = o;
return new F();
}

Innerhalb der Funktion object() wird zunächst ein temporärer Konstruktor erstellt, dann wird das übergebene Objekt als Prototyp dieses Konstruktors verwendet und schließlich wird eine neue Instanz dieses temporären Typs zurückgegeben. Im Wesentlichen führt object() eine flache Kopie des übergebenen Objekts aus. Betrachten Sie das folgende Beispiel.

var person = {
name: "Nicholas",
friends: ["Shelby", "Court", "Van"]
};
var anotherPerson = object(person);
anotherPerson.name = "Greg";
anotherPerson.friends.push("Rob");
var yetAnotherPerson = object(person);
yetAnotherPerson.name = "Linda";
yetAnotherPerson.friends.push("Barbie");
alert(person.friends); //"Shelby,Court,Van,Rob,Barbie"

Die von Crockford befürwortete prototypische Vererbung erfordert, dass Sie ein Objekt haben müssen, das als Basis für ein anderes Objekt dienen kann. Wenn ein solches Objekt vorhanden ist, können Sie es an die Funktion object() übergeben und das erhaltene Objekt dann entsprechend den spezifischen Anforderungen ändern. In diesem Beispiel kann das Personenobjekt als Basis für ein anderes Objekt verwendet werden, also übergeben wir es an die Funktion object(), die dann ein neues Objekt zurückgibt. Dieses neue Objekt verwendet „Person“ als Prototyp, sodass sein Prototyp eine Basistypwerteigenschaft und eine Referenztypwerteigenschaft enthält. Dies bedeutet, dass person.friends nicht nur einer Person gehört, sondern auch von einer anderen Person und noch einer anderen Person geteilt wird. Tatsächlich entspricht dies der Erstellung zweier weiterer Kopien des Personenobjekts.

ECMAScript 5 standardisiert die prototypische Vererbung durch die neue Methode Object.create(). Diese Methode akzeptiert zwei Parameter: ein Objekt, das als Prototyp des neuen Objekts verwendet wird, und (optional) ein Objekt zum Definieren zusätzlicher Eigenschaften für das neue Objekt. Die Object.create()-Methode verhält sich genauso wie die object()-Methode, wenn ein Parameter übergeben wird.

var person = {
name: "Nicholas",
friends: ["Shelby", "Court", "Van"]
};
var anotherPerson = Object.create(person);
anotherPerson.name = "Greg";
anotherPerson.friends.push("Rob");
var yetAnotherPerson = Object.create(person);
yetAnotherPerson.name = "Linda";
yetAnotherPerson.friends.push("Barbie");
alert(person.friends); //"Shelby,Court,Van,Rob,Barbie"

Der zweite Parameter der Methode Object.create() hat das gleiche Format wie der zweite Parameter der Methode Object.defineProperties(): Jede Eigenschaft wird durch ihren eigenen Deskriptor definiert. Jede auf diese Weise angegebene Eigenschaft überschreibt die gleichnamige Eigenschaft des Prototypobjekts. Zum Beispiel:

var person = {
name: "Nicholas",
friends: ["Shelby", "Court", "Van"]
};

var anotherPerson = Object.create(person, {
name: {
value: "Greg"
}
});
alert(anotherPerson.name); //"Greg"

Zu den Browsern, die die Methode Object.create() unterstützen, gehören IE9, Firefox 4, Safari 5, Opera 12 und Chrome.

Prototypische Vererbung ist vollkommen ausreichend, wenn keine großen Anstrengungen unternommen werden müssen, um einen Konstruktor zu erstellen, sondern Sie lediglich ein Objekt einem anderen Objekt ähnlich halten möchten. Vergessen Sie jedoch nicht, dass Eigenschaften, die Referenztypwerte enthalten, immer den entsprechenden Wert gemeinsam nutzen, genau wie bei der Verwendung des Prototypmusters.

5. Parasitäre Vererbung

Parasitische Vererbung ist eine Idee, die eng mit der prototypischen Vererbung zusammenhängt und auch von Crockford populär gemacht wurde. Die Idee der parasitären Vererbung ähnelt dem parasitären Konstruktor- und Factory-Muster, das heißt, eine Funktion zu erstellen, die nur den Vererbungsprozess kapselt, das Objekt intern auf irgendeine Weise verbessert und schließlich so verhält, als ob es wirklich die ganze Arbeit erledigt hätte Objekt zurückgeben. Der folgende Code demonstriert das parasitäre Vererbungsmuster.

function createAnother(original){
var clone = object(original); //通过调用函数创建一个新对象
clone.sayHi = function(){ //以某种方式来增强这个对象
alert("hi");
};
return clone; //返回这个对象
}

In diesem Beispiel empfängt die Funktion createAnother() einen Parameter, nämlich das Objekt, das als Basis für das neue Objekt verwendet wird. Übergeben Sie dann dieses Objekt (Original) an die Funktion object() und weisen Sie das zurückgegebene Ergebnis dem Klonen zu. Fügen Sie dann dem Klonobjekt eine neue Methode sayHi () hinzu und geben Sie schließlich das Klonobjekt zurück. Sie können die Funktion createAnother() wie folgt verwenden:

var person = {
name: "Nicholas",
friends: ["Shelby", "Court", "Van"]
};
var anotherPerson = createAnother(person);
anotherPerson.sayHi(); //"hi"

这个例子中的代码基于person 返回了一个新对象——anotherPerson。新对象不仅具有person的所有属性和方法，而且还有自己的sayHi()方法。
在主要考虑对象而不是自定义类型和构造函数的情况下，寄生式继承也是一种有用的模式。前面示范继承模式时使用的object()函数不是必需的；任何能够返回新对象的函数都适用于此模式。

使用寄生式继承来为对象添加函数，会由于不能做到函数复用而降低效率；这一
点与构造函数模式类似。

6.寄生组合式继承

前面说过，组合继承是JavaScript 最常用的继承模式；不过，它也有自己的不足。组合继承最大的问题就是无论什么情况下，都会调用两次超类型构造函数：一次是在创建子类型原型的时候，另一次是在子类型构造函数内部。没错，子类型最终会包含超类型对象的全部实例属性，但我们不得不在调用子类型构造函数时重写这些属性。再来看一看下面组合继承的例子。

function SuperType(name){
this.name = name;
this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function(){
alert(this.name);
};
function SubType(name, age){
SuperType.call(this, name); //第二次调用SuperType()
this.age = age;
}
SubType.prototype = new SuperType(); //第一次调用SuperType()
SubType.prototype.constructor = SubType;
SubType.prototype.sayAge = function(){
alert(this.age);
};

加粗字体的行中是调用SuperType 构造函数的代码。在第一次调用SuperType 构造函数时，SubType.prototype 会得到两个属性：name 和colors；它们都是SuperType 的实例属性，只不过现在位于SubType 的原型中。当调用SubType 构造函数时，又会调用一次SuperType 构造函数，这一次又在新对象上创建了实例属性name 和colors。于是，这两个属性就屏蔽了原型中的两个同名属性。图6-6 展示了上述过程。
如图6-6 所示，有两组name 和colors 属性：一组在实例上，一组在SubType 原型中。这就是调用两次SuperType 构造函数的结果。好在我们已经找到了解决这个问题方法——寄生组合式继承。

所谓寄生组合式继承，即通过借用构造函数来继承属性，通过原型链的混成形式来继承方法。其背后的基本思路是：不必为了指定子类型的原型而调用超类型的构造函数，我们所需要的无非就是超类型原型的一个副本而已。本质上，就是使用寄生式继承来继承超类型的原型，然后再将结果指定给子类型的原型。寄生组合式继承的基本模式如下所示。

function inheritPrototype(subType, superType){
var prototype = object(superType.prototype); //创建对象
prototype.constructor = subType; //增强对象
subType.prototype = prototype; //指定对象
}

这个示例中的inheritPrototype()函数实现了寄生组合式继承的最简单形式。这个函数接收两个参数：子类型构造函数和超类型构造函数。在函数内部，第一步是创建超类型原型的一个副本。第二步是为创建的副本添加constructor 属性，从而弥补因重写原型而失去的默认的constructor 属性。最后一步，将新创建的对象（即副本）赋值给子类型的原型。这样，我们就可以用调用inherit-Prototype()函数的语句，去替换前面例子中为子类型原型赋值的语句了，例如

function SuperType(name){
this.name = name;
this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function(){
alert(this.name);
};
function SubType(name, age){
SuperType.call(this, name);
this.age = age;
}
inheritPrototype(SubType, SuperType);
SubType.prototype.sayAge = function(){
alert(this.age);
};

这个例子的高效率体现在它只调用了一次SuperType 构造函数，并且因此避免了在SubType.prototype 上面创建不必要的、多余的属性。与此同时，原型链还能保持不变；因此，还能够正常使用instanceof 和isPrototypeOf()。开发人员普遍认为寄生组合式继承是引用类型最理想的继承范式。

YUI 的YAHOO.lang.extend()方法采用了寄生组合继承，从而让这种模式首次出现在了一个应用非常广泛的JavaScript 库中。要了解有关YUI 的更多信息，请访问http://developer. yahoo.com/yui/。

以上所述就是本文的全部内容了，希望对大家学习javascript继承有所帮助。