Einführung in verschiedene Vererbungsmethoden in Javascript_Grundkenntnisse

1. Vererbung der Prototypenkette: Die Beziehung zwischen Konstruktoren, Prototypen und Instanzen: Jeder Konstruktor verfügt über ein Prototypobjekt, und das Prototypobjekt enthält einen Zeiger auf den Konstruktor und die Instanzen enthalten einen internen Zeiger auf das Prototypobjekt. Verwenden Sie „instanceof“, um die Beziehung zwischen Prototyp und Instanz zu bestätigen.

Nachteile der Prototypkettenvererbung: Durch das wörtliche Überschreiben des Prototyps wird die Beziehung unterbrochen, der Prototyp des Referenztyps verwendet und der Untertyp kann keine Parameter an den Supertyp übergeben

function Parent(){
    this.name='mike';
  }
  function Child(){
    this.age=12;
  }
  //儿子继承父亲（原型链）
  Child.prototype=new Parent();//Child继承Parent，通过原型形成链条
  var test=new Child();
  console.log(test.age);
  console.log(test.name);//得到被继承的属性
  //孙子继续原型链继承儿子
  function Brother(){
    this.weight=60;
  }
  Brother.prototype=new Child();//继承原型链继承
  var brother=new Brother();
  console.log(brother.name);//继承了Parent和Child，弹出mike
  console.log(brother.age);//12

  console.log(brother instanceof Child);//ture
  console.log(brother instanceof Parent);//ture
  console.log(brother instanceof Object);//ture

2. Konstruktor implementiert Vererbung: Es wird auch Fake-Objekt oder klassische Vererbung genannt.
Nachteile der Vererbung der Konstruktorimplementierung: Obwohl das Ausleihen von Konstruktoren die beiden Probleme der Vererbung der Prototypkette löst, ist eine Wiederverwendung ohne Prototyp nicht möglich, sodass das Muster Prototypkette + geliehener Konstruktor erforderlich ist.

function Parent(age){
    this.name=['mike','jack','smith'];
    this.age=age;
  }
  function Child(age){
    Parent.call(this,age);//把this指向Parent,同时还可以传递参数
  }
  var test=new Child(21);
  console.log(test.age);//21
  console.log(test.name);

  test.name.push('bill');
  console.log(test.name);//mike,jack,smith,bill

3. Kombinationsvererbung: Verwenden Sie die Prototypkette, um Prototypeigenschaften und -methoden zu erben, und leihen Sie Konstruktoren aus, um die Vererbung von Instanzeigenschaften zu erreichen. Auf diese Weise wird die Wiederverwendung von Funktionen durch die Definition von Methoden im Prototyp erreicht, und jede Implementierung verfügt garantiert über ihre eigenen Attribute.

Nachteile: In jedem Fall wird der Supertyp-Konstruktor zweimal aufgerufen, einmal beim Erstellen des Subtyp-Prototyps, einmal beim Erstellen des Subtyp-Prototyps und einmal innerhalb des Subtyp-Konstruktors.

function Parent(age){
    this.name=['mike','jack','smith'];
    this.age=age;
  }
  Parent.prototype.run=function(){
    return this.name+' are both '+this.age;
  }
  function Child(age){
    Parent.call(this,age);//给超类型传参，第二次调用
  }
  Child.prototype=new Parent();//原型链继承，第一次调用
  var test1=new Child(21);//写new Parent(21)也行
  console.log(test1.run());//mike,jack,smith are both 21

  var test2=new Child(22);
  console.log(test2.age);
  console.log(test1.age);
  console.log(test2.run());
  //这样可以使test1和test2分别拥有自己的属性age同时又可以有run方法

4. Prototypische Vererbung: Mithilfe von Prototypen können Sie neue Objekte basierend auf vorhandenen Objekten erstellen, ohne benutzerdefinierte Typen erstellen zu müssen. Es erfordert, dass es ein Objekt gibt, das als Basis für ein anderes Objekt dienen kann.

function object(o){
    function F(){};
    F.prototype=o;
    return new F();
  }
  var person={
    name:'nicho',
    friends:['shell','jim','lucy']
  }
  var anotherPerson = object(person);
  anotherPerson.name = 'Greg';
  anotherPerson.friends.push('Rob');
  console.log(anotherPerson.friends);//["shell", "jim", "lucy", "Rob"]

  var yetAnotherPerson = object(person);
  yetAnotherPerson.name = 'Linda';
  yetAnotherPerson.friends.push('Barbie');
  console.log(yetAnotherPerson.friends);//["shell", "jim", "lucy", "Rob", "Barbie"]

  console.log(person.friends);//["shell", "jim", "lucy", "Rob", "Barbie"]

ECMAScript5 standardisiert die prototypische Vererbung durch die neue Methode Object.create(), die zwei Parameter akzeptiert: ein Objekt, das als Prototyp des neuen Objekts verwendet wird, und (optional) ein Objekt, das Eigenschaften für das neue Objekt definiert.

var person2={
    name:'nicho',
    friends:['shell','jim','lucy']
  };
  var anoP2=Object.create(person2);
  anoP2.name="Greg";
  anoP2.friends.push('Rob');
  console.log(anoP2.friends);//["shell", "jim", "lucy", "Rob"]

  var yetP2=Object.create(person2);
  yetP2.name="Linda";
  yetP2.friends.push('Barbie');
  console.log(yetP2.friends);//["shell", "jim", "lucy", "Rob", "Barbie"]

  console.log(person2.friends);//["shell", "jim", "lucy", "Rob", "Barbie"]
  /*以这种方式指定的任何属性都会覆盖原型对象上的同名属性。*/
  var threeP=Object.create(person,{
    name:{value:'red'}
  });
  console.log(threeP.name);//red,如果threeP中无name则输出person2里的name值nicho

5. Parasitäre Vererbung: Die Idee ähnelt dem parasitären Konstruktor- und Factory-Muster, das heißt, es wird eine Funktion erstellt, die nur zum Kapseln des Vererbungsprozesses verwendet wird Die Funktion wird intern auf irgendeine Weise verwendet, um das Objekt zu verbessern und schließlich das Objekt zurückzugeben, als ob es wirklich die ganze Arbeit erledigt hätte.

function object(o){
    function F(){};
    F.prototype=o;
    return new F();
  };
  function createAnother(o){
    var cl=object(o);
    cl.sayHi=function(){
      console.log('hi');
    }
    return cl;
  };
  var person={
    name:'nick',
    friends:['shelby','court','van']
  }
  var anotherPerson=createAnother(person);
  anotherPerson.sayHi();//hi
  console.log(anotherPerson.name);//nick
  console.log(anotherPerson.friends);//["shelby", "court", "van"]

  /*这个例子中的代码基于 person 返回了一个新对象—— anotherPerson 。 新对象不仅具有 person
   的所有属性和方法，而且还有自己的 sayHi() 方法*/

Parasitäre kombinierte Vererbung: Unabhängig von den Umständen wird der Supertyp-Konstruktor zweimal aufgerufen, einmal beim Erstellen des Subtyp-Prototyps, einmal beim Erstellen des Subtyp-Prototyps und einmal während der Subtyp-Konstruktion, sodass der Subtyp endet Enthält alle Instanzeigenschaften des Supertypobjekts, die wir beim Aufruf des Subtypkonstruktors überschreiben müssen. Daher die Entstehung der parasitären kombinatorischen Vererbung.

6. Parasitäre kombinierte Vererbung: Leihen Sie sich Konstruktoren aus, um Eigenschaften und Methoden über die gemischte Form der Prototypenkette zu erben. Grundidee: Sie müssen nicht den Konstruktor des Supertyps aufrufen, um den Prototyp des Subtyps anzugeben. Im Wesentlichen wird die parasitäre Vererbung verwendet, um den Prototyp des Supertyps zu erben und das Ergebnis dann dem Prototyp des Subtyps zuzuweisen.

function SuperType(name){
    this.name=name;
    this.colors=['red','blue','green'];
  }
  SuperType.prototype.sayName=function(){
    console.log(this.name);
  }
  function SubType(name,age){
    SuperType.call(this,name);
    this.age=age;
  }
  function object(o){
    function F(){};
    F.prototype=o;
    return new F();
  };
  /*inheritPrototype此函数第一步是创建超类型原型的一个副本。第二步是为创建的副本添加constructor属性，
  * 从而弥补因重写原型而失去的默认的constructor属性，第三步将新创建的对象（副本）赋值给子类型的原型*/
  function inheritPrototype(subType,superType){
    var prototype=object(superType.prototype);//创建对象
    prototype.constructor=subType;//增强对象
    subType.prototype=prototype;//指定对象
  }
  inheritPrototype(SubType,SuperType);
  SubType.prototype.sayAge=function(){
    console.log(this.age);
  }

  var p=new SubType('xiaoli',24);
  console.log(p.sayName());
  console.log(p.sayAge());
  console.log(p.colors)

Vorteile dieser Methode: Der SuperType-Konstruktor der übergeordneten Klasse wird nur einmal aufgerufen und vermeidet daher die Erstellung unnötiger redundanter Attribute auf SubType.prototype. Gleichzeitig kann die Prototypenkette unverändert bleiben und Instanzen von und isPrototypeOf() normal verwendet werden

Die obige Einführung in verschiedene JavaScript-Vererbungsmethoden ist der gesamte vom Herausgeber geteilte Inhalt. Ich hoffe, dass er Ihnen eine Referenz geben kann, und ich hoffe, dass Sie Script Home unterstützen.