Introduction à plusieurs méthodes d'héritage dans javascript_Basic Knowledge

1. Héritage de la chaîne de prototypes : La relation entre les constructeurs, les prototypes et les instances : Chaque constructeur a un objet prototype, et l'objet prototype contient un pointeur vers le constructeur et des instances. contient un pointeur interne vers l’objet prototype. Utilisez instanceof pour confirmer la relation entre le prototype et l'instance.

Inconvénients de l'héritage de la chaîne de prototypes : le remplacement littéral du prototype rompra la relation, utilisera le prototype du type référence et le sous-type ne pourra pas transmettre de paramètres au supertype

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. Le constructeur implémente l'héritage : Il est également appelé faux objet ou héritage classique.
Inconvénients de l'héritage d'implémentation du constructeur : bien que l'emprunt de constructeurs résolve les deux problèmes d'héritage de la chaîne de prototypes, sans prototype, la réutilisation est impossible, donc la chaîne de prototypes + le modèle de constructeur emprunté sont nécessaires.

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. Héritage combiné : Utilisez la chaîne de prototypes pour hériter des propriétés et des méthodes du prototype, et empruntez des constructeurs pour obtenir l'héritage des propriétés d'instance. De cette manière, la réutilisation des fonctions est réalisée en définissant des méthodes sur le prototype, et chaque implémentation est garantie d'avoir ses propres attributs.

Inconvénients : Dans tous les cas, le constructeur de supertype sera appelé deux fois, une fois lors de la création du prototype de sous-type, une fois lors de la création du prototype de sous-type et une fois à l'intérieur du constructeur de sous-type.

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. Héritage prototypique : À l'aide de prototypes, vous pouvez créer de nouveaux objets basés sur des objets existants sans avoir à créer de types personnalisés. Cela nécessite qu'il y ait un objet qui puisse servir de base à un autre objet.

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 standardise l'héritage prototypique via la nouvelle méthode Object.create(), qui accepte deux paramètres : un objet utilisé comme prototype du nouvel objet et (facultatif) un objet qui définit les propriétés du nouvel objet.

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. Héritage parasite : L'idée est similaire au constructeur parasite et au modèle d'usine, c'est-à-dire créer une fonction qui est uniquement utilisée pour encapsuler le processus d'héritage, et le La fonction est utilisée en interne d'une manière ou d'une autre pour améliorer l'objet, et finalement renvoyer l'objet comme s'il faisait réellement tout le travail.

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() 方法*/

Héritage combiné parasite : quelles que soient les circonstances, le constructeur de supertype sera appelé deux fois, une fois lors de la création du prototype de sous-type, une fois lors de la création du prototype de sous-type et une fois pendant la fonction de construction du sous-type, de sorte que le sous-type finisse. contenant toutes les propriétés d'instance de l'objet supertype, que nous devons remplacer lors de l'appel du constructeur de sous-type. D’où l’émergence d’un héritage combinatoire parasitaire.

6. Héritage combiné parasite : Emprunter des constructeurs pour hériter des propriétés et hériter des méthodes via la forme mixte de la chaîne de prototypes. Idée de base : vous n'avez pas besoin d'appeler le constructeur du supertype pour spécifier le prototype du sous-type. Essentiellement, l'héritage parasitaire est utilisé pour hériter du prototype du supertype, puis attribuer le résultat au prototype du sous-type.

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)

Avantages de cette méthode : Le constructeur de la classe parent SuperType n'est appelé qu'une seule fois, et évite donc de créer des attributs redondants inutiles sur SubType.prototype. Dans le même temps, la chaîne de prototypes peut rester inchangée et instanceof et isPrototypeOf() peuvent être utilisées normalement
 ;

L'introduction ci-dessus à plusieurs méthodes d'héritage JavaScript est tout le contenu partagé par l'éditeur. J'espère qu'il pourra vous donner une référence et j'espère que vous soutiendrez Script Home.