Heim > Web-Frontend > js-Tutorial > Ausführliche Erläuterung von Anwendungsbeispielen der JavaScript-Vererbung: prototypische Vererbung, parasitäre Vererbung und parasitäre kombinierte Vererbung

Ausführliche Erläuterung von Anwendungsbeispielen der JavaScript-Vererbung: prototypische Vererbung, parasitäre Vererbung und parasitäre kombinierte Vererbung

伊谢尔伦
Freigeben: 2017-07-25 16:01:44
Original
1477 Leute haben es durchsucht

Prototypische Vererbung

Die Implementierungsmethode der prototypischen Vererbung unterscheidet sich von der der gewöhnlichen Vererbung, sondern basiert auf Prototypen, die Sie erstellen können Neue Objekte basierend auf vorhandenen Objekten, ohne dass benutzerdefinierte Typen erstellt werden müssen. Der spezifische Code lautet wie folgt:


function object(o) {
  function F() {}
  F.prototype = o;
  return new F();
}
Nach dem Login kopieren

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
Nach dem Login kopieren

Parasitär Vererbung


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

Verwendungsbeispiel:


/* 原型式继承 */
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();
Nach dem Login kopieren

Parasitäre kombinatorische Vererbung

Die Implementierung der Vererbung im kombinierten Modus in JavaScript hat ihre eigenen Mängel. Die Implementierungsidee besteht darin, dass der Konstruktor Eigenschaften erbt und die Vererbungsmethode in gemischter Form in der Prototypkette erfolgt muss nicht verwendet werden. Instanziieren Sie beim Erben einer Methode den Konstruktor des übergeordneten Typs. Der Code lautet wie folgt:


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;
}
Nach dem Login kopieren

Bei der Verwendung müssen Sie nur die Codezeile „SubType.prototype = new SuperType();“ ersetzen Kombinationsmodus mit inheritPrototype( subType, superType); das war's. Die hohe Effizienz der parasitären kombinierten Vererbung spiegelt sich darin wider, dass der Konstruktor des übergeordneten Typs nur einmal aufgerufen wird, wodurch die Erstellung unnötiger oder redundanter Eigenschaften vermieden wird. Gleichzeitig bleibt die Prototypenkette unverändert, sodass „instanceof“ und „isPrototypeof()“ weiterhin normal verwendet werden können. Dies ist derzeit die idealste Vererbungsmethode, und wir stellen derzeit auf dieses Modell um. (YUI verwendet dieses Muster ebenfalls.)

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung von Anwendungsbeispielen der JavaScript-Vererbung: prototypische Vererbung, parasitäre Vererbung und parasitäre kombinierte Vererbung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage