Notes d'étude sur l'héritage JavaScript [à lire absolument pour les débutants]_compétences javascript

En tant que langage orienté objet (JS est basé sur des objets), JavaScript est indispensable pour réaliser l'héritage. Cependant, comme il n'a pas la notion de classes, il ne réalisera pas l'héritage via des classes comme une véritable programmation orientée objet. langue. Mais l’héritage peut être obtenu par d’autres moyens. Il existe de nombreuses façons de mettre en œuvre l’héritage, en voici quelques-unes.

1. Héritage de la chaîne prototype

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

La clé pour implémenter l'héritage ci-dessus est : Worker.prototype=new Person(); Transformez le prototype de Worker en une instance de Person et héritez via la chaîne de prototypes.

Remarque : lorsque vous utilisez la chaîne de prototypes pour implémenter l'héritage, vous ne pouvez pas utiliser de littéraux d'objet pour créer des méthodes prototypes, car cela romprait la relation et réécrirait la chaîne de prototypes.

Problème d'héritage de chaîne de prototype :

1. Il y a un problème de partage de références. Ils partagent toujours le même espace, et la sous-classe affectera la classe parent

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. Lors de la création d'une instance d'un sous-type, les paramètres ne peuvent pas être transmis dans le constructeur du supertype.

Alors comment résoudre les deux problèmes de la chaîne prototype ? Continuez ensuite à regarder les méthodes d'héritage ci-dessous~

2. Emprunter l'héritage du constructeur (également appelé emprunt d'identité d'objet, faux objet ou héritage classique)

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());

Une brève analyse du principe ci-dessus d'utilisation de constructeurs empruntés : Person.call(this,name,age); Ce code appelle le constructeur parent, hérite des propriétés parent et utilise la méthode d'appel pour appeler le constructeur Person à modifier. le temps d'exécution de la fonction. Ceci, ici ceci-> un objet Worker de la nouvelle méthode de déguisement Constructor : passez le Worker à la personne ci-dessus.

Lorsque le type référence est placé dans le constructeur, il ne sera pas partagé, donc p2 n'est pas affecté.

La méthode d'héritage du constructeur est utilisée ici pour résoudre le problème selon lequel la chaîne de prototypes ne peut pas transmettre de paramètres et les types de référence sont partagés.

Conseils : les méthodes call() et apply() peuvent modifier la portée de l'exécution de la fonction. En bref, elles modifient le contenu pointé par this dans la fonction.

call() et apply() acceptent deux paramètres : le premier est la portée dans laquelle la fonction est exécutée et l'autre est le paramètre transmis.

La différence entre appeler et appliquer est la différence de paramètres.
Les paramètres en appel doivent être énumérés un par un.
Les paramètres dans apply doivent être un objet tableau ou arguments

Alors la question est : pourquoi le résultat de p1.showName() est-il faux ? ----Parce que la méthode d'héritage du constructeur emprunté ne peut hériter que des propriétés et des méthodes du constructeur. Un problème avec les constructeurs emprunteurs est également découvert ici.

Remarque : Puisque les méthodes sont placées dans le constructeur, à chaque fois que nous l'instancions, de l'espace mémoire lui sera alloué, provoquant un gaspillage de ressources. Par conséquent, nous mettons généralement les méthodes dans le prototype et les attributs dans le constructeur. .

Problème d'héritage du constructeur d'emprunt :

Étant donné que le constructeur emprunté ne peut hériter que des propriétés et des méthodes du constructeur, les méthodes définies dans le prototype du super type sont invisibles pour la sous-classe, cela équivaut donc à ne pas avoir de prototype. Par conséquent, toutes les méthodes ne peuvent être définies que dans le constructeur, il n’y a donc pas de réutilisation des fonctions.

Alors comment résoudre les problèmes causés par les constructeurs qui empruntent ? Ensuite, nous devons regarder la méthode d'héritage suivante

3. Héritage combiné (héritage pseudo-classique)

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();

Héritage combiné : combinez la chaîne de prototypes avec des constructeurs empruntés.

Idée : réaliser l'héritage des attributs et des méthodes sur le prototype en utilisant la chaîne de prototypes, et utiliser le constructeur pour réaliser l'héritage des attributs d'instance

L'exemple ci-dessus Person.call(this,name,age); emprunte le constructeur pour hériter des propriétés

Worker.prototype=new Person(); La chaîne de prototypes hérite de la méthode, évitant les défauts des deux, intégrant leurs avantages et devenant le modèle d'héritage le plus couramment utilisé.

Problèmes d'héritage combiné :

Le constructeur du supertype est appelé deux fois, une fois lors de la création du prototype du sous-type et une fois à l'intérieur du constructeur du sous-type.

Pour résoudre ce problème, nous devons utiliser l'héritage combiné parasite.

4. Héritage prototype

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]}

Une brève analyse : l'objet fonction (proto) est une fonction de transit temporaire. Le paramètre proto à l'intérieur représente un objet à transmettre. Le constructeur F() est un objet temporairement nouvellement créé utilisé pour stocker l'objet transmis. prototype = proto ; attribue l'instance d'objet à l'objet prototype du constructeur F, et renvoie enfin l'instance d'objet de l'objet passé. L'héritage prototype partage toujours les propriétés des types référence.

5. Héritage parasitaire

//临时中转函数  
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. Héritage combiné parasite

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();

이 방법은 현재 상속 방법 중 가장 완벽하고 이상적이기도 합니다.

위 JavaScript 상속 학습 노트 [초보자가 꼭 읽어야 할 내용]은 모두 편집자가 공유한 내용이므로 참고가 되셨으면 좋겠습니다. Script Home을 지원해 주시길 바랍니다.