Ausführliche Erläuterung der Prototypenkette der JavaScript-Vererbung und Anwendungsbeispiele für geliehene Konstruktoren

Prototypkette

Der einfachste Weg, Vererbung in JavaScript zu implementieren, besteht darin, die Prototypkette zu verwenden, um den Prototyp des Untertyps auf die Instanz des übergeordneten Typs zu verweisen ist „subtype .prototype = new parent type();“, 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 einfach ist Vererbung wird über die Prototypenkette implementiert. Im Testcodebeispiel gibt es jedoch immer noch einige Probleme. Ich glaube, dass Kinder, die meinen Blog-Beitrag „Grundlegende Erklärung von objektorientiertem JS, Factory-Modus, Konstruktor-Modus, Prototyp-Modus, Hybrid-Modus, dynamischer Prototyp-Modus“ gelesen haben, wissen müssen, dass das erste Problem mit Prototyp-Kettencode darin besteht, dass der Prototyp von Der Untertyp besteht aus Instanzen des übergeordneten Typs, dh den Eigenschaften des übergeordneten Typs, die im Prototyp des Untertyps enthalten sind, was dazu führt, dass die Prototypeigenschaften der Referenztypwerte von allen Instanzen gemeinsam genutzt werden. Die Instanz1.name.push('wyc'); des obigen Codes kann die Existenz dieses Problems beweisen. Das zweite Problem bei der Prototypenkette besteht darin, dass beim Erstellen einer Instanz eines Untertyps keine Parameter an den Konstruktor des Obertyps übergeben werden können. Daher verwenden wir in der tatsächlichen Entwicklung selten die Prototypenkette allein.

Ausleihen von Konstruktoren

Um die beiden in der Prototypenkette bestehenden Probleme zu lösen, begannen Entwickler, eine Technik namens „Ausleihen von Konstruktoren“ zu verwenden, um die im Prototyp vorhandenen Probleme zu lösen Kette. Problem. 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 nichts anderes als ein Objekt ist, das Code in einer bestimmten Umgebung ausführt, sodass Konstruktoren über die Methoden apply() oder call() ausgeführt werden können. 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 den Supertyp „SuperType.call(this, name)“ aufruft. ;" Auf diese Weise wird die Vererbung von Eigenschaften realisiert und beim Erstellen einer Instanz des Untertyps können Parameter an den übergeordneten Typ übergeben werden, 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. Nach der Instanziierung des Untertyps können Sie jedoch immer noch nicht die im Prototyp des übergeordneten Typs definierte Methode getSuperValue aufrufen. Sie können nur die Konstruktormethode des übergeordneten Typs aufrufen: testFun. Dies ist dasselbe, als würde man beim Erstellen von Objekten nur das Konstruktormuster verwenden, wodurch die Funktion nicht wiederverwendbar wäre. Angesichts dieser Probleme wird die Technik des Ausleihens von Konstruktoren selten allein verwendet.

Kombinierte Vererbung (Prototypkette + geliehener Konstruktor)

Wie der Name schon sagt, ist die zusammengesetzte Vererbung ein Muster, das die Vorteile der Prototypenkette und geliehener Konstruktoren kombiniert. Auch die Implementierung ist sehr einfach, da es sich um eine Kombination handelt, die sicherlich die Vorteile beider Parteien vereint, dh die Prototypenkette erbt die Methode und der Konstruktor erbt die Eigenschaften. Der spezifische Code wird wie folgt implementiert:

// 为父类型创建构造函数
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); Prototyp = new SuperType() ;Vom übergeordneten Typ geerbte Methoden. 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.

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Prototypenkette der JavaScript-Vererbung und Anwendungsbeispiele für geliehene Konstruktoren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!