Anmerkungen zur JavaScript-Vererbungsstudie [muss für Neulinge gelesen werden]_Javascript-Kenntnisse

Als objektorientierte Sprache (JS basiert auf Objekten) ist JavaScript für die Realisierung der Vererbung unerlässlich. Da es jedoch nicht über das Konzept von Klassen verfügt, wird es die Vererbung durch Klassen nicht wie bei einer echten objektorientierten Programmierung realisieren Aber Vererbung kann auch auf andere Weise erreicht werden. Es gibt viele Möglichkeiten, die Vererbung zu implementieren. Hier sind nur einige davon.

1. Prototypenkettenvererbung

function Person() {  //被继承的函数叫做超类型（父类，基类）
      this.name='mumu';
      this.age='18';
    }
    
    Person.prototype.name='susu';//当属性名相同时需就近原则，先在实例里面查找，没找到再到原型里找
       
    function Worker(){ //继承的函数叫做子类型（子类，派生类）
      this.job='student';
    }

    Worker.prototype=new Person();//通过原型链继承，超类型实例化后的对象实例，赋值给子类的原型属性
    var p2=new Worker(); 

    console.log(p2.name);
    console.log(p2 instanceof Object);//ture 所有的构造函数都继承自Object

Der Schlüssel zur Implementierung der Vererbung oben ist: Worker.prototype=new Person(); Verwandeln Sie den Prototyp von Worker in eine Instanz von Person und erben Sie über die Prototypenkette.

Hinweis: Wenn Sie die Prototypenkette zum Implementieren der Vererbung verwenden, können Sie keine Objektliterale zum Erstellen von Prototypenmethoden verwenden, da dadurch die Beziehung unterbrochen und die Prototypenkette neu geschrieben wird.

Prototyp-Kettenvererbungsproblem:

1. Es liegt ein Problem mit der gemeinsamen Nutzung von Referenzen vor, und die Unterklasse wirkt sich auf die übergeordnete Klasse aus.

function Person() {  
      this.bodys=['eye','foot'];
    }
    
    function Worker(){ 
    }

    Worker.prototype=new Person();
    var p1=new Worker();
    p1.bodys.push('hand');
    var p2=new Worker(); 
    console.log(p1.bodys);
    console.log(p2.bodys);

2. Beim Erstellen einer Instanz eines Untertyps können keine Parameter im Konstruktor des Obertyps übergeben werden.

Wie können also die beiden Probleme der Prototypenkette gelöst werden? Schauen Sie sich dann weiter unten die Vererbungsmethoden an~

2. Ausleihen der Konstruktorvererbung (auch Objektidentitätswechsel, gefälschtes Objekt oder klassische Vererbung genannt)

function Person(name,age){
    this.name=name;
    this.age=age;
    this.bodys=['eye','foot'];
  }

  Person.prototype.showName=function(){
    console.log(this.name);
  }

  function Worker(name,age,job){
    Person.call(this,name,age);
    this.job=job;//子类添加属性
  }

  var p1=new Worker('mumu','18','学生'); 
  p1.bodys.push('hand') ;
  var p2=new Worker();

  console.log(p1.name);
  console.log(p2.bodys);
  console.log(p1.showName());

Eine kurze Analyse des oben genannten Prinzips der Verwendung geliehener Konstruktoren: Person.call(this,name,age); Dieser Code ruft den übergeordneten Konstruktor auf, erbt die übergeordneten Eigenschaften und verwendet die Aufrufmethode, um den Personenkonstruktor zum Ändern aufzurufen die Ausführungszeit der Funktion Dies, hier Dies-> ein Worker-Objekt aus der neuen Konstruktor-Verkleidungsmethode: Übergeben Sie den Worker an die Person oben.

Wenn der Referenztyp im Konstruktor platziert wird, wird er nicht gemeinsam genutzt, sodass p2 nicht betroffen ist.

Die Konstruktor-Vererbungsmethode wird hier verwendet, um das Problem zu lösen, dass die Prototypenkette keine Parameter übergeben kann und Referenztypen gemeinsam genutzt werden.

Tipps: Die Methoden call() und apply() können den Umfang der Funktionsausführung ändern. Kurz gesagt, sie ändern den Inhalt, auf den sie in der Funktion verweisen.

Sowohl call() als auch apply() akzeptieren zwei Parameter: Der erste ist der Bereich, in dem die Funktion ausgeführt wird, und der andere ist der übergebene Parameter.

Der Unterschied zwischen Aufruf und Anwenden ist der Unterschied in den Parametern.
Die Parameter im Aufruf müssen einzeln aufgelistet werden.
Die Parameter in apply müssen ein Array oder ein Argumentobjekt sein

Dann stellt sich die Frage: Warum ist das Ergebnis von p1.showName() falsch? ----Weil die geliehene Konstruktor-Vererbungsmethode nur die Eigenschaften und Methoden im Konstruktor erben kann. Hier wird auch ein Problem mit der Ausleihe von Konstruktoren entdeckt.

Hinweis: Da die Methoden im Konstruktor platziert werden, wird ihr bei jeder Instanziierung Speicherplatz zugewiesen, was zu einer Verschwendung von Ressourcen führt. Daher platzieren wir die Methoden im Allgemeinen im Prototyp und die Attribute im Konstruktor . .

Problem mit der Vererbung des Borrowing-Konstruktors:

Da der geliehene Konstruktor nur die Eigenschaften und Methoden im Konstruktor erben kann, sind die im Prototyp des Supertyps definierten Methoden für die Unterklasse unsichtbar, sodass dies gleichbedeutend ist mit dem Fehlen eines Prototyps. Daher können alle Methoden nur im Konstruktor definiert werden, sodass keine Wiederverwendung von Funktionen erfolgt.

Wie können also die Probleme gelöst werden, die durch die Ausleihe von Bauunternehmern entstehen? Dann müssen wir uns die folgende Vererbungsmethode ansehen

3. Kombinationsvererbung (pseudoklassische Vererbung)

function Person(name,age){
    this.name=name;
    this.age=age;
  }

  Person.prototype.showName=function(){
    console.log(this.name);
  }

  function Worker(name,age,job){
    Person.call(this,name,age);//借用构造函数
    this.job=job;
  }
  
  Worker.prototype=new Person();//原型链继承
  var p1=new Worker('mumu','18','学生'); 

  console.log(p1.age);
  p1.showName();

Kombinierte Vererbung: Kombinieren Sie die Prototypenkette mit geliehenen Konstruktoren.

Idee: Realisieren Sie die Vererbung von Attributen und Methoden am Prototyp mithilfe der Prototypenkette und verwenden Sie den Konstruktor, um die Vererbung von Instanzattributen zu realisieren

Das obige Beispiel Person.call(this,name,age); leiht sich den Konstruktor aus, um die Eigenschaften zu erben

Worker.prototype=new Person(); Die Prototypkette erbt die Methode, vermeidet die Mängel beider, integriert ihre Vorteile und wird zum am häufigsten verwendeten Vererbungsmuster.

Probleme mit kombinierter Vererbung:

Der Supertyp-Konstruktor wird zweimal aufgerufen, einmal beim Erstellen des Subtyp-Prototyps und einmal im Konstruktor des Subtyps.

Um dieses Problem zu lösen, müssen wir die parasitäre kombinierte Vererbung nutzen.

4. Prototypische Vererbung

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

  var person = {
    name: 'mumu',
    friends: ['xiaxia', 'susu']
  };

  var anotherPerson = object(person);
  anotherPerson.friends.push('wen');
  var yetAnotherPerson = object(person);
  anotherPerson.friends.push('tian');
  console.log(person.friends);//["xiaxia", "susu", "wen", "tian"]
console.log(anotherPerson.__proto__)//Object {name: "mumu", friends: Array[4]}

Eine kurze Analyse: Das Funktionsobjekt (Proto) ist eine temporäre Transitfunktion. Der darin enthaltene Parameter Proto stellt ein zu übergebendes Objekt dar. Der F()-Konstruktor ist ein vorübergehend neu erstelltes Objekt, das zum Speichern des übergebenen Objekts F verwendet wird. prototyp = proto; Weisen Sie die Objektinstanz dem Prototypobjekt des F-Konstruktors zu und geben Sie schließlich die Objektinstanz des übergebenen Objekts zurück. Die prototypische Vererbung teilt weiterhin Eigenschaften von Referenztypen.

5. Parasitäre Vererbung

//临时中转函数  
function object(proto) {
    function F() {}
    F.prototype = proto;
    return new F();
  }

  //寄生函数
  function create(proto){
    var f=object(proto);
    f.love=function(){
      return this.name;
    }
    return f;
  }

  var person = {
    name: 'mumu',
    friends: ['xiaxia', 'susu']
  };

  var anotherPerson = create(person);
  console.log(anotherPerson.love());寄生组合式继承

6. Parasitäre kombinierte Vererbung

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

  //寄生函数
  function create(Person,Worker){
    var f=object(Person.prototype);//创建对象
    f.constructor=Worker;//调整原型构造指针，增强对象
    Worker.prototype=f;//指定对象
  }
  
  function Person(name,age){
    this.name=name;
    this.age=age;
  }
  Person.prototype.showName=function(){
    console.log(this.name);
  }
  function Worker(name,age,job){
    Person.call(this,name,age);
    this.job=job;
  }
  
  create(Person,Worker);//寄生组合式继承
  var p1=new Person('mumu','18','学生');
p1.showName();

Diese Methode ist auch die perfekteste und idealste unter den aktuellen Vererbungsmethoden.

Die oben genannten Lernhinweise zur JavaScript-Vererbung [muss für Neulinge gelesen werden] sind alle vom Herausgeber geteilten Inhalte. Ich hoffe, dass sie Ihnen eine Referenz geben können, und ich hoffe, dass Sie Script Home unterstützen.