Wie Javascript die Prototypkette verwendet, um eine Zusammenfassung der Vererbungsmethode zu implementieren

Javascript selbst ist keine objektorientierte Sprache, sondern eine objektbasierte Sprache. Für Leute, die an andere OO-Sprachen gewöhnt sind, ist es zunächst etwas unangenehm, weil es hier kein Konzept von „Klasse“ gibt , oder „ Es gibt keinen Unterschied zwischen „Klasse“ und „Instanz“, geschweige denn zwischen „Elternklasse“ und „Unterklasse“. Wie sind diese Objekte in JavaScript so miteinander verbunden?

Glücklicherweise hat JavaScript von Anfang an die Implementierung von „Vererbung“ bereitgestellt. Bevor wir „Vererbung“ verstehen, wollen wir zunächst das Konzept der Prototypenkette verstehen.

Prototypenkette

Der spezifische Code lautet wie folgt:

  function SuperClass(){
    this.name = "women"
  }
  SuperClass.prototype.sayWhat = function(){
    return this.name + ":i`m a girl!";
  }
  function SubClass(){
    this.subname = "your sister";
  }
  SubClass.prototype = new SuperClass();
  SubClass.prototype.subSayWhat = function(){
    return this.subname + ":i`m a beautiful girl";
  }
  var sub = new SubClass();
  console.log(sub.sayWhat());//women:i`m a girl!

Prototyp verwenden Kette zum Implementieren der Vererbung

Aus dem obigen Code ist ersichtlich, dass SubClass die Eigenschaften und Methoden von SuperClass erbt. Diese Vererbung wird durch Zuweisen der Instanz von SuperClass zum Prototypobjekt von SubClass realisiert Das Prototypobjekt von SubClass ist Eine Instanz von SuperClass wird überschrieben, verfügt über alle ihre Eigenschaften und Methoden und verfügt außerdem über einen Zeiger auf das SuperClass-Prototypobjekt.

Es gibt einige Dinge, auf die wir achten müssen, wenn wir die Prototypkette zur Implementierung der Vererbung verwenden:

Achten Sie auf die Änderungen im Konstruktor nach der Vererbung. Der Konstruktor von sub verweist hier auf SuperClass, da der Prototyp von SubClass auf den Prototyp von SuperClass verweist. Ignorieren Sie beim Verständnis der Prototypenkette nicht das Standardobjekt Object am Ende. Aus diesem Grund können wir integrierte Methoden wie toString in allen Objekten verwenden.

Beim Implementieren der Vererbung über die Prototypkette können Sie keine Literale zum Definieren von Prototypmethoden verwenden, da dies das Prototypobjekt überschreibt:

  function SuperClass(){
    this.name = "women"
  }
  SuperClass.prototype.sayWhat = function(){
    return this.name + ":i`m a girl!";
  }
  function SubClass(){
    this.subname = "your sister";
  }
  SubClass.prototype = new SuperClass();
  SubClass.prototype = {//此处原型对象被覆盖，因为无法继承SuperClass属性和方法
    subSayWhat:function(){
      return this.subname + ":i`m a beautiful girl";
    }
  }
  var sub = new SubClass();
  console.log(sub.sayWhat());//TypeError: undefined is not a function

Problem bei der Instanzfreigabe. Bei der Erläuterung von Prototypen und Konstruktoren haben wir bereits erwähnt, dass Prototypen, die Referenztypattribute enthalten, von allen Instanzen gemeinsam genutzt werden. Ebenso werden die von uns geerbten Prototypen auch die Referenztypattribute im Prototyp der „übergeordneten Klasse“ gemeinsam nutzen, wenn wir die Referenz ändern Typattribute der „Elternklasse“ durch Prototypvererbung, alle anderen vom Prototyp geerbten Instanzen sind davon betroffen. Dies ist nicht nur eine Verschwendung von Ressourcen, sondern auch ein Phänomen, das wir nicht sehen möchten:

  function SuperClass(){
    this.name = "women";
    this.bra = ["a","b"];
  }
  function SubClass(){
    this.subname = "your sister";
  }
  SubClass.prototype = new SuperClass();
  var sub1 = new SubClass();
  sub1.name = "man";
  sub1.bra.push("c");
  console.log(sub1.name);//man
  console.log(sub1.bra);//["a","b","c"]
  var sub2 = new SubClass();
  console.log(sub1.name);//woman
  console.log(sub2.bra);//["a","b","c"]

Hinweis: Wenn hier ein Element zum Array hinzugefügt wird, sind alle von SuperClass geerbten Instanzen betroffen. Wenn jedoch das Namensattribut geändert wird, hat dies keine Auswirkungen auf andere Instanzen. Dies liegt daran, dass das Array ein Referenztyp und der Name ein Basistyp ist.
Wie kann das Problem der Instanzfreigabe gelöst werden? Schauen wir nach unten...

Klassische Vererbung (Konstruktordiebstahl)

Da wir eingeführt haben, dass Prototypen selten allein zum Definieren von Objekten verwendet werden, verwenden wir in der tatsächlichen Entwicklung den Prototyp Um das Problem der gemeinsamen Nutzung von Referenztypen zu lösen, haben JavaScript-Entwickler das klassische Vererbungsmuster (auch „geliehene Konstruktorvererbung“ genannt) eingeführt. Seine Implementierung ist sehr einfach: Aufruf des Super-Typkonstruktors. Wir müssen die von Javascript bereitgestellte Funktion call() oder apply() verwenden. Schauen wir uns das Beispiel an:

function SuperClass() {
  this.name = "women";
  this.bra = ["a", "b"];
}
function SubClass() {
  this.subname = "your sister";
  //将SuperClass的作用域赋予当前构造函数，实现继承
  SuperClass.call(this);
}

var sub1 = new SubClass();
sub1.bra.push("c");
console.log(sub1.bra);//["a","b","c"]
var sub2 = new SubClass();
console.log(sub2.bra);//["a","b"]

SuperClass.call(this); Die Bedeutung dieses Satzes Die Initialisierungsarbeit des SuperClass-Konstruktors wird in der SubClass-Instanzumgebung (Kontextumgebung) aufgerufen, sodass jede Instanz über eine eigene Kopie des BH-Attributs verfügt, ohne sich gegenseitig zu beeinflussen.
Diese Implementierung ist jedoch immer noch nicht perfekt. Da der Konstruktor eingeführt wurde, stehen wir auch vor dem im vorherigen Artikel erwähnten Problem des Konstruktors: Wenn der Konstruktor eine Methodendefinition enthält, hat jede Instanz eine separate Funktionsreferenz. Unser Zweck ist es, diese Methode zu teilen, und die Methoden, die wir im Supertyp-Prototyp definieren, können nicht in Subtyp-Instanzen aufgerufen werden:

  function SuperClass() {
    this.name = "women";
    this.bra = ["a", "b"];
  }
  SuperClass.prototype.sayWhat = function(){
    console.log("hello");
  }
  function SubClass() {
    this.subname = "your sister";
    SuperClass.call(this);
  }  
  var sub1 = new SubClass();
  console.log(sub1.sayWhat());//TypeError: undefined is not a function

Kombiniert Vererbung

Kombinierte Vererbung ist eine Kombination der Vorteile der Prototypenkette und des Konstruktors, die ihre jeweiligen Stärken zum Ausdruck bringt und sie kombiniert, um eine Vererbung zu erreichen um Eigenschaften und Methoden zu erben und den geliehenen Konstruktor zu verwenden, um die Vererbung von Instanzeigenschaften zu realisieren. Dies löst nicht nur das Problem der gemeinsamen Nutzung von Instanzeigenschaften, sondern ermöglicht auch die Vererbung von Supertypeigenschaften und -methoden:

  function SuperClass() {
    this.name = "women";
    this.bra = ["a", "b"];
  }
  SuperClass.prototype.sayWhat = function(){
    console.log("hello");
  }
  function SubClass() {
    this.subname = "your sister";
    SuperClass.call(this);       //第二次调用SuperClass
  }
  SubClass.prototype = new SuperClass(); //第一次调用SuperClass
  var sub1 = new SubClass();
  console.log(sub1.sayWhat());//hello

Die kombinierte Vererbungsmethode ist für uns auch die am häufigsten verwendete Methode zur Implementierung der Vererbung in der tatsächlichen Entwicklung. Dies kann bereits Ihre tatsächlichen Entwicklungsanforderungen erfüllen, aber das Streben der Menschen nach Perfektion ist endlos Die Leute werden bei diesem Muster bestimmt „pingelig“ sein: Ihr Muster ruft den Supertyp-Konstruktor zweimal auf! Zweimal. . . Glauben Sie, dass es einen Leistungsverlust darstellt, wenn es um das Hundertfache vergrößert wird?
Die wirkungsvollste Widerlegung besteht darin, eine Lösung zu finden. Glücklicherweise haben Entwickler die beste Lösung für dieses Problem gefunden:

Parasitäre kombinierte Vererbung

Vor der Einführung Lassen Sie uns bei dieser Vererbungsmethode zunächst das Konzept des parasitären Konstruktors verstehen. Der parasitäre Konstruktor ähnelt dem zuvor erwähnten Fabrikmuster. Seine Idee besteht darin, eine öffentliche Funktion zu definieren, die speziell für die Erstellung von Objekten und den Abschluss der Erstellung verwendet wird . Nach der Rückgabe dieses Objekts ist diese Funktion einem Konstruktor sehr ähnlich, aber der Konstruktor hat keinen Rückgabewert:

function Gf(name,bra){
  var obj = new Object();
  obj.name = name;
  obj.bra = bra;
  obj.sayWhat = function(){
    console.log(this.name);
  }
  return obj;
}

var gf1 = new Gf("bingbing","c++");
console.log(gf1.sayWhat());//bingbing

寄生式继承的实现和寄生式构造函数类似，创建一个不依赖于具体类型的“工厂”函数，专门来处理对象的继承过程，然后返回继承后的对象实例，幸运的是这个不需要我们自己实现，道哥（道格拉斯）早已为我们提供了一种实现方式：

function object(obj) {
  function F() {}
  F.prototype = obj;
  return new F();
}
var superClass = {
  name:"bingbing",
  bra:"c++"
}
var subClass = object(superClass);
console.log(subClass.name);//bingbing

在公共函数中提供了一个简单的构造函数，然后将传进来对象的实例赋予构造函数的原型对象，最后返回该构造函数的实例，很简单，但疗效很好，不是吗？这个方式被后人称为“原型式继承”，而寄生式继承正是在原型式基础上，通过增强对象的自定义属性实现的：

function buildObj(obj){
  var o = object(obj);
  o.sayWhat = function(){
    console.log("hello");
  }
  return o;
}
var superClass = {
  name:"bingbing",
  bra:"c++"
}
var gf = buildObj(superClass);
gf.sayWhat();//hello

寄生式继承方式同样面临着原型中函数复用的问题，于是，人们又开始拼起了积木，诞生了——寄生组合式继承，目的是解决在指定子类型原型时调用父类型构造函数的问题，同时，达到函数的最大化复用。基于以上基础实现方式如下：

//参数为两个构造函数
function inheritObj(sub,sup){
  //实现实例继承，获取超类型的一个副本
  var proto = object(sup.prototype);
  //重新指定proto实例的constructor属性
  proto.constructor = sub;
  //将创建的对象赋值给子类型的原型
  sub.prototype = proto;
}
function SuperClass() {
  this.name = "women";
  this.bra = ["a", "b"];
}
SuperClass.prototype.sayWhat = function() {
  console.log("hello");
}

function SubClass() {
  this.subname = "your sister";
  SuperClass.call(this);
}
inheritObj(SubClass,SuperClass);
var sub1 = new SubClass();
console.log(sub1.sayWhat()); //hello

这个实现方式避免了超类型的两次调用，而且也省掉了SubClass.prototype上不必要的属性，同时还保持了原型链。

Das obige ist der detaillierte Inhalt vonWie Javascript die Prototypkette verwendet, um eine Zusammenfassung der Vererbungsmethode zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!