Comment Javascript utilise la chaîne de prototypes pour implémenter le résumé de la méthode d'héritage

Javascript en lui-même n'est pas un langage orienté objet, mais un langage basé sur les objets. Pour les personnes habituées aux autres langages OO, ils sont un peu mal à l'aise au début car il n'y a pas de notion de « classe » ici. , ou " Il n'y a pas de distinction entre "classe" et "instance", encore moins "classe parent" et "sous-classe". Alors, comment ces objets en JavaScript sont-ils si connectés ?

Heureusement, JavaScript a prévu l'implémentation de « l'héritage » dès le début de sa conception. Avant de comprendre « l'héritage », comprenons d'abord le concept de chaîne de prototypes.

Chaîne prototype

Le code spécifique est le suivant :

  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!

Utiliser le prototype chaîne pour implémenter l'héritage

Il ressort du code ci-dessus que SubClass hérite des propriétés et des méthodes de SuperClass. Cet héritage est réalisé en attribuant l'instance de SuperClass à l'objet prototype de SubClass, de sorte que. l'objet prototype de SubClass est Une instance de SuperClass est écrasée, possède toutes ses propriétés et méthodes, et possède également un pointeur vers l'objet prototype SuperClass.

Il y a certaines choses auxquelles nous devons prêter attention lors de l'utilisation de la chaîne de prototypes pour implémenter l'héritage :

Faites attention aux changements dans le constructeur après l'héritage. Le constructeur de sub pointe ici vers SuperClass, car le prototype de SubClass pointe vers le prototype de SuperClass. Lorsque vous comprenez la chaîne de prototypes, n'ignorez pas l'objet Object par défaut à la fin. C'est pourquoi nous pouvons utiliser des méthodes intégrées telles que toString dans tous les objets.

Lors de l'implémentation de l'héritage via la chaîne de prototypes, vous ne pouvez pas utiliser de littéraux pour définir des méthodes de prototype, car cela remplacerait l'objet prototype :

  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

Problème de partage d'instance. Lors de l'explication précédente des prototypes et des constructeurs, nous avons introduit que les prototypes contenant des attributs de type référence seront partagés par toutes les instances. De même, les prototypes dont nous héritons partageront également les attributs de type référence dans le prototype de « classe parent ». attribut de type de la "classe parent" via l'héritage prototypique, toutes les autres instances héritées du prototype seront affectées. Ce n'est pas seulement un gaspillage de ressources, mais aussi un phénomène que nous ne voulons pas voir :

<.>

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

Remarque : lorsqu'un élément est ajouté au tableau ici, toutes les instances héritées de SuperClass seront affectées, mais si l'attribut name est modifié, cela n'affectera pas les autres instances. En effet, le tableau est un type référence et le nom est un type de base.

Comment résoudre le problème du partage d'instance ? Regardons en bas...

Héritage classique (vol de constructeur)

Comme nous l'avons introduit, les prototypes sont rarement utilisés seuls pour définir des objets, dans le développement réel, nous Le prototype La chaîne est rarement utilisée seule. Afin de résoudre le problème du partage des types de référence, les développeurs JavaScript ont introduit le modèle d'héritage classique (également appelé héritage de constructeur emprunté). Son implémentation est très simple : appeler le super dans le constructeur de sous-type. Nous devons utiliser la fonction call() ou apply() fournie par javascript. Jetons un coup d'œil à l'exemple :

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); La signification de cette phrase Le travail d'initialisation du constructeur SuperClass est appelé dans l'environnement (contexte) de l'instance SubClass, de sorte que chaque instance aura sa propre copie de l'attribut bra, sans s'affecter mutuellement.

Cependant, cette implémentation n'est toujours pas parfaite. Depuis l'introduction du constructeur, nous sommes également confrontés au problème du constructeur évoqué dans l'article précédent : s'il y a une définition de méthode dans le constructeur, alors pour chaque instance a un Référence de fonction séparée. Notre objectif est de partager cette méthode, et les méthodes que nous définissons dans le prototype de supertype ne peuvent pas être appelées dans les instances de sous-type :

  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

Combiné. héritage

L'héritage combiné est une combinaison des avantages de la chaîne de prototypes et du constructeur, exprimant leurs forces respectives et les combinant pour obtenir l'héritage. Cette façon, en termes simples, consiste à utiliser la chaîne de prototypes. pour hériter des propriétés et des méthodes, et utiliser le constructeur emprunté pour réaliser l'héritage des propriétés d'instance. Cela résout non seulement le problème du partage des propriétés d'instance, mais permet également d'hériter des propriétés et des méthodes de super-type :

<.>

La méthode d'héritage combinée est également la méthode la plus couramment utilisée pour implémenter l'héritage dans le développement réel. Cela peut déjà répondre à vos besoins de développement réels, mais la recherche de la perfection par les gens est infinie, alors certains. les gens seront forcément « pointilleux » à propos de ce modèle : votre modèle appelle deux fois le constructeur de supertype ! Deux fois. . . Pensez-vous qu'il s'agit d'une perte de performances s'il est agrandi cent fois ?

  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

La réfutation la plus puissante est de trouver une solution. Heureusement, les développeurs ont trouvé la meilleure solution à ce problème :

Héritage combiné parasite

Avant d'introduire cette méthode d'héritage, comprenons d'abord le concept de constructeur parasite. Le constructeur parasite est similaire au modèle de fabrique mentionné précédemment. Son idée est de définir une fonction publique, qui est spécialement utilisée pour gérer la création d'objets et l'achèvement de la création. . Après avoir renvoyé cet objet, cette fonction est très similaire à un constructeur, mais le constructeur n'a pas de valeur de retour :

.

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上不必要的属性，同时还保持了原型链。

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!