Héritage d'implémentation JavaScript orienté objet basé sur la contrefaçon de fonctions

En raison de certaines lacunes dans la manière d'implémenter l'héritage basé sur la chaîne de prototypes, les gens ont adopté une autre façon d'implémenter l'héritage implémentant l'héritage basé sur la falsification de fonctions. L'idée de cette technique est d'appeler le constructeur de la classe parent à l'intérieur du constructeur de la classe enfant.

Implémentation de l'héritage basé sur la falsification de fonctions

Car en JavaScript, une fonction est un objet qui exécute du code dans un environnement spécifique, on peut donc utiliser la méthode call() ou apply() Pour exécutez le constructeur de l'objet de classe parent sur l'objet de classe enfant. Regardons l'exemple suivant :

/* 创建父类 */
function Parent(){
  this.color = ["red","blue"];
}
 
/* 创建子类 */
function Child(){
  // 继承父类的属性
  Parent.call(this);
}

Dans le code ci-dessus, nous créons d'abord une classe parent Parent, puis créons une sous-classe Child et utilisons Parent.call(this) à l'intérieur de la sous-classe ; héritage.

Dans l'article Propriétés des fonctions, nous avons introduit les méthodes call() et apply(). La fonction de ces deux méthodes est d'appeler des fonctions dans une portée spécifique, ce qui signifie que ces deux méthodes peuvent appeler un. fonction par son nom. Ici, nous utilisons Parent.call(this); à l'intérieur de Child pour terminer l'héritage. Cette phrase signifie appeler le constructeur de la classe parent dans la classe enfant. Cela fait actuellement référence à l'objet Child (dans Child, cela devrait être l'objet qui s'exécute. Child), cela équivaut donc à avoir this.color = ["red", "blue"]; dans Child, ce qui équivaut à avoir l'attribut this.color dans Child, qui est également une forme déguisée.

Nous pouvons le vérifier grâce à la méthode suivante :

var c1 = new Child();     //创建子类对象c1
c1.color.push("Green");   //为c1添加新的颜色
console.info(c1.color);   //控制台输出：red,blue,Green
 
var c2 = new Child();     //创建子类对象c2
console.info(c2.color);   //控制台输出：red,blue

Dans le code ci-dessus, nous avons créé l'objet de sous-classe c1 et y avons ajouté une nouvelle couleur "Vert", ce sera donc sortie dans la console : "rouge, bleu, vert". Ensuite, nous avons créé l'objet c2. Comme aucune nouvelle couleur n'y a été ajoutée, il affichera uniquement la couleur héritée de la classe parent dans la console : "rouge, bleu".

Chaque fois qu'un nouveau Child est appelé, cela équivaut à effectuer un réglage d'attribut d'objet. À ce stade, chaque objet a un attribut de couleur dans l'espace, mais n'existe pas dans le prototype, donc la couleur ne le sera pas. partagé. Cela résout le problème des variables de type référence dans l'héritage de chaîne de prototypes.

Constructeur de sous-classe

Un autre inconvénient de l'héritage de chaîne de prototypes est que le constructeur de la classe parent ne peut pas être appelé depuis la sous-classe, il n'y a donc aucun moyen d'attribuer des attributs de la sous-classe à la classe parent . milieu. Ce problème peut être bien résolu grâce à la falsification de fonctions. Regardez l'exemple suivant :

// 创建父类
function Parent(name){
  this.name = name;
}
 
//创建子类
function Student(name,age){
  //使用伪造的方式就可以把子类的构造函数参数传递到父类中
  Parent.call(this,name); //调用父类的属性
  this.age = age;
}
 
var s1 = new Student("Leon",22);
var s2 = new Student("Ada",25);
 
console.info(s1.name + "," + s1.age);  // 控制台输出：Leon,22
console.info(s2.name + "," + s2.age);  // 控制台输出：Ada,25

Dans le code ci-dessus, la sous-classe Student appelle l'attribut name de la classe parent via une falsification de fonction, ce qui ajoute en fait un attribut name à la sous-classe. Ici, la méthode call() transmet le nom du paramètre de la classe Student à la classe parent, et l'opération terminée est équivalente à this.name = name;. Et cet attribut de nom est l'attribut de nom de la sous-classe, pas l'attribut de nom de la classe parent.

Problèmes d'héritage basés sur la falsification de fonctions

Dans la discussion ci-dessus, nous n'avons parlé que des sous-classes héritant des attributs de la classe parent. Alors, comment la sous-classe hérite-t-elle des méthodes de la classe parent ? Comme nous l'avons dit précédemment, nous définissons généralement la méthode dans le prototype. Par exemple, il existe une méthode say() dans la classe parent. Le code est le suivant :

// 创建父类
function Parent(name){
  this.name = name;
}
 
// 父类的say()方法
Parent.prototype.say = function(){
  console.info(this.name);
}
 
//创建子类
function Student(name,age){
  Parent.call(this,name); 
  this.age = age;
}

En raison de la méthode d'utilisation. falsification de fonction, la sous-classe ne sera pas terminée. Le prototype de Student pointe vers la classe parent Parent, donc une fois que la sous-classe a hérité de la classe parent, la méthode say() n'existe pas. La façon de résoudre ce problème est de placer la méthode say() dans le parent et d'utiliser le mot-clé this pour la créer.

// 创建父类
function Parent(name){
  this.name = name;
  // 父类的say()方法
  this.say = function(){
    console.info(this.name);
  }
}
 
//创建子类
function Student(name,age){
  Parent.call(this,name); 
  this.age = age;
}

Bien que cela permette à la sous-classe d'hériter de la méthode say() de la classe parent, cela crée un autre problème : chaque fois qu'un objet de sous-classe est créé, une méthode say() sera générée. beaucoup d'espace mémoire.

Comme il existe également des défauts dans l'implémentation de l'héritage basé sur la falsification de fonctions, nous n'utiliserons pas cette méthode seule pour compléter l'héritage, mais utiliserons une méthode basée sur une combinaison pour implémenter l'héritage. Nous en discuterons dans le prochain article. Présentez cette méthode d’héritage.

Ce qui précède est le contenu de JavaScript orienté objet - héritage basé sur la falsification de fonctions. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (m.sbmmt.com) !