Grundlagen der JavaScript-Vererbung (Prototypkette, geliehener Konstruktor, gemischter Modus, prototypische Vererbung, parasitäre Vererbung, parasitäre kombinierte Vererbung)_Javascript-Kenntnisse

Ich habe versprochen, die JavaScript-Vererbung zu erklären, aber es hat sich bis jetzt verzögert. Kommen wir ohne weitere Umschweife direkt zur Sache.

Da Sie die Vererbung verstehen möchten, beweist dies, dass Sie bereits über ein gewisses Verständnis von objektorientiertem JavaScript verfügen. Wenn Sie immer noch nichts verstehen, können Sie sich auf „Grundlegende Erklärung von objektorientiertem JS“ beziehen. Fabrikmodus, Konstruktormodus, Prototypmodus, gemischter Modus, dynamischer Prototypmodus 》, sprechen wir über die Methoden, die im Allgemeinen zum Abschluss der JavaScript-Vererbung verwendet werden.

　Prototypenkette

Der einfachste Weg, die Vererbung in JavaScript zu implementieren, besteht darin, den Prototyp des Untertyps einfach auf die Instanz des übergeordneten Typs zu verweisen, d. h. „subtype.prototype = neuer übergeordneter Typ ();“. Die Implementierungsmethode lautet wie folgt:

// 为父类型创建构造函数
function SuperType() {
  this.name = ['wuyuchang', 'Jack', 'Tim'];
  this.property = true;
}

// 为父类型添加方法
SuperType.prototype.getSuerperValue = function() {
  return this.property;
}

// 为子类型创建构造函数
function SubType() {
  this.test = ['h1', 'h2', 'h3', 'h4'];
  this.subproperty = false;
}

// 实现继承的关键步骤，子类型的原型指向父类型的实例
SubType.prototype = new SuperType();

// 在此处给子类型添加方法，一定要在实现继承之后，否则会在将指针指向父类型的实例，则方法为空
SubType.prototype.getSubValue = function() {
  return this.subproperty;
}


/* 以下为测试代码示例 */
var instance1 = new SubType();
instance1.name.push('wyc');
instance1.test.push('h5');
alert(instance1.getSuerperValue());    // true
alert(instance1.getSubValue());      // false
alert(instance1.name);          // wuyuchang,Jack,Tim,wyc
alert(instance1.test);          // h1,h2,h3,h4,h5


var instance2 = new SubType();
alert(instance2.name);          // wuyuchang,Jack,Tim,wyc
alert(instance2.test);          // h1,h2,h3,h4

Sie können sehen, dass der obige Code eine einfache Vererbung ist, die über die Prototypenkette implementiert wird, im Testcodebeispiel gibt es jedoch immer noch einige Probleme. Ich glaube, dass diejenigen, die meinen Blog-Beitrag „Grundlegende Erklärung von objektorientiertem JS, Fabrikmodus, Konstruktormodus, Prototypmodus, Hybridmodus, dynamischer Prototypmodus“ gelesen haben, die Existenz von Prototypkettencode kennen müssenDas erste Problem besteht darin, dass, da der Prototyp des Untertyps eine Instanz des übergeordneten Typs ist, d von allen Instanzen geteilt werden . Die Instanz1.name.push('wyc'); des obigen Codes kann die Existenz dieses Problems beweisen. Das zweite Problem mit der Prototypenkette ist: Beim Erstellen einer Instanz eines Subtyps können Parameter nicht an den Konstruktor des Supertyps übergeben werden. Daher verwenden wir in der tatsächlichen Entwicklung selten die Prototypenkette allein.

　Konstruktor ausleihen

Um die beiden in der Prototypenkette bestehenden Probleme zu lösen, begannen Entwickler, eine Technik namens „geliehene Konstruktoren“ zu verwenden, um die in der Prototypenkette bestehenden Probleme zu lösen. Die Implementierungsidee dieser Technologie ist ebenfalls recht einfach. Sie müssen lediglich den Konstruktor des übergeordneten Typs innerhalb des Konstruktors des Untertyps aufrufen. Vergessen Sie nicht, dass eine Funktion nur ein Objekt ist, das Code in einer bestimmten Umgebung ausführt. Sie können also einen Konstruktor über die Methode apply() oder call() ausführen. Der Code lautet wie folgt:

// 为父类型创建构造函数
function SuperType(name) {
  this.name = name;
  this.color = ['pink', 'yellow'];
  this.property = true;

  this.testFun = function() {
    alert('http://tools.jb51.net/');
  }
}

// 为父类型添加方法
SuperType.prototype.getSuerperValue = function() {
  return this.property;
}

// 为子类型创建构造函数
function SubType(name) {
  SuperType.call(this, name);
  this.test = ['h1', 'h2', 'h3', 'h4'];
  this.subproperty = false;
}

// 在此处给子类型添加方法，一定要在实现继承之后，否则会在将指针指向父类型的实例，则方法为空
SubType.prototype.getSubValue = function() {
  return this.subproperty;
}


/* 以下为测试代码示例 */
var instance1 = new SubType(['wuyuchang', 'Jack', 'Nick']);
instance1.name.push('hello');
instance1.test.push('h5');
instance1.color.push('blue');
instance1.testFun();            // http://tools.jb51.net/
alert(instance1.name);            // wuyuchang,Jack,Nick,hello
// alert(instance1.getSuerperValue());    // error 报错
alert(instance1.test);            // h1,h2,h3,h4,h5    
alert(instance1.getSubValue());        // false    
alert(instance1.color);            // pink,yellow,blue

var instance2 = new SubType('wyc');
instance2.testFun();            // http://tools.jb51.net/
alert(instance2.name);            // wyc    
// alert(instance2.getSuerperValue());    // error 报错
alert(instance2.test);            // h1,h2,h3,h4
alert(instance2.getSubValue());        // false
alert(instance2.color);            // pink,yellow

Sie können sehen, dass der Konstruktor des Subtyps SubType im obigen Code die Vererbung von Attributen realisiert, indem er den Supertyp „SuperType.call(this, name);“ aufruft. Er kann auch als übergeordneter Typ beim Erstellen einer Instanz verwendet werden des Subtyps werden übergeben, es treten jedoch erneut neue Probleme auf. Sie können sehen, dass ich eine Methode im Konstruktor des übergeordneten Typs definiert habe: testFun, und eine Methode im Prototyp des übergeordneten Typs: getSuperValue. Nachdem den Untertyp instanziiert hat, kann es jedoch immer noch nicht die im Prototyp des übergeordneten Typs definierte Methode getSuperValue aufrufen. Es kann nur die Konstruktormethode des übergeordneten Typs aufgerufen werden: testFun . Dies ist dasselbe, als würde man beim Erstellen von Objekten nur das Konstruktormuster verwenden, wodurch die Funktion nicht wiederverwendbar wird. Angesichts dieser Probleme wird die Technik des Ausleihens von Konstruktoren selten allein verwendet.

Kombinierte Vererbung (von der Prototypkette geliehener Konstruktor)

Wie der Name schon sagt, handelt es sich bei der kombinierten Vererbung um ein Muster, das die Vorteile der Verwendung der Prototypenkette und des Ausleihens von Konstruktoren kombiniert. Auch die Implementierung ist sehr einfach. Da es sich um eine Kombination handelt, werden sicherlich die Vorteile beider Parteien kombiniert, nämlich die Prototyp-Kettenvererbungsmethode und die Konstruktor-Vererbungseigenschaft . Die spezifische Code-Implementierung lautet wie folgt:

// 为父类型创建构造函数
function SuperType(name) {
  this.name = name;
  this.color = ['pink', 'yellow'];
  this.property = true;

  this.testFun = function() {
    alert('http://tools.jb51.net/');
  }
}

// 为父类型添加方法
SuperType.prototype.getSuerperValue = function() {
  return this.property;
}

// 为子类型创建构造函数
function SubType(name) {
  SuperType.call(this, name);
  this.test = ['h1', 'h2', 'h3', 'h4'];
  this.subproperty = false;
}

SubType.prototype = new SuperType();

// 在此处给子类型添加方法，一定要在实现继承之后，否则会在将指针指向父类型的实例，则方法为空
SubType.prototype.getSubValue = function() {
  return this.subproperty;
}


/* 以下为测试代码示例 */
var instance1 = new SubType(['wuyuchang', 'Jack', 'Nick']);
instance1.name.push('hello');
instance1.test.push('h5');
instance1.color.push('blue');
instance1.testFun();            // http://tools.jb51.net/
alert(instance1.name);            // wuyuchang,Jack,Nick,hello
alert(instance1.getSuerperValue());      // true
alert(instance1.test);            // h1,h2,h3,h4,h5    
alert(instance1.getSubValue());        // false    
alert(instance1.color);            // pink,yellow,blue

var instance2 = new SubType('wyc');
instance2.testFun();            // http://tools.jb51.net/
alert(instance2.name);            // wyc    
alert(instance2.getSuerperValue());      // true
alert(instance2.test);            // h1,h2,h3,h4
alert(instance2.getSubValue());        // false
alert(instance2.color);            // pink,yellow

Der obige Code erbt die Eigenschaften des übergeordneten Typs über SuperType.call(this, name); und die Methoden des übergeordneten Typs über SubType.prototype = new SuperType();. Der obige Code löst bequem die Probleme, auf die die Prototypenkette und geliehene Konstruktoren stoßen, und ist zur am häufigsten verwendeten Instanzvererbungsmethode in JavaScript geworden. Der gemischte Modus ist jedoch nicht ohne Mängel. Sie können sehen, dass beim Erben der Methode tatsächlich die Eigenschaften des übergeordneten Typs geerbt wurden, daher wird er aufgerufen zweimal im Konstruktor des Untertyps erbt die Eigenschaften des übergeordneten Typs und überschreibt die im Prototyp geerbten Eigenschaften. Es ist offensichtlich unnötig, den Konstruktor zweimal aufzurufen, aber gibt es eine Möglichkeit, das Problem zu lösen? Schauen wir uns bei der Lösung dieses Problems die folgenden zwei Muster an.

Prototypische Vererbung

Die Implementierungsmethode der prototypischen Vererbung unterscheidet sich von der der gewöhnlichen Vererbung. Stattdessen werden Prototypen verwendet, um neue Objekte auf der Grundlage vorhandener Objekte zu erstellen . Der spezifische Code lautet wie folgt:

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

Codebeispiel:

/* 原型式继承 */
function object(o) {
  function F() {}
  F.prototype = o;
  return new F();
}

var person = {
  name : 'wuyuchang',
  friends : ['wyc', 'Nicholas', 'Tim']
}

var anotherPerson = object(person);
anotherPerson.name = 'Greg';
anotherPerson.friends.push('Bob');

var anotherPerson2 = object(person);
anotherPerson2.name = 'Jack';
anotherPerson2.friends.push('Rose');

alert(person.friends);  // wyc,Nicholas,Tim,Bob,Rose

Parasitäre Vererbung

/* 寄生式继承 */
function createAnother(original) {
  var clone = object(original);
  clone.sayHi = function() {
    alert('hi');
  }
  return clone;
}

Anwendungsbeispiel:

/* 原型式继承 */
function object(o) {
  function F() {}
  F.prototype = o;
  return new F();
}
   
/* 寄生式继承 */
function createAnother(original) {
  var clone = object(original);
  clone.sayHi = function() {
    alert('hi');
  }
  return clone;
}

var person = {
  name : 'wuyuchang',
  friends : ['wyc', 'Nicholas', 'Rose']
}
var anotherPerson = createAnother(person);
anotherPerson.sayHi();

寄生组合式继承

　　前面说过了JavaScrip中组合模式实现继承的缺点，现在我们就来解决它的缺点，实现思路是，对于构造函数继承属性，而原型链的混成形式继承方法，即不用在继承方法的时候实例化父类型的构造函数。代码如下：

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

/* 寄生组合式继承 */
function inheritPrototype(subType, superType) {
  var prototype = object(superType.prototype);
  prototype.constructor = subType;
  subType.prototype = prototype;
}

而在使用时只需要将组合模式中的“SubType.prototype = new SuperType();”这行代码替换成inheritPrototype(subType, superType);即可。寄生组合式继承的高效率体现在它只调用了一次父类型构造函数，避免了创建不必要的或多余的属性。与此同时，原型链还能保持不变，因此，还能够正常使用instanceof和isPrototypeof()。这也是目前来说最理想的继承方式了，目前也在向这种模式转型。（YUI也使用了这种模式。）

此博文参考《JavaScript高级程序设计第3版》，代码为经过改写，更具体，并加了注释使大家更易懂。如对JS继承方面有独到见解的童鞋不别吝啬，回复您的见解供大家参考！