Partager les différences entre trois méthodes d'encapsulation d'implémentation de simulation JavaScript et leurs méthodes d'écriture

L'héritage consiste à utiliser une sous-classe pour hériter d'une autre classe parent, la sous-classe peut alors automatiquement avoir toutes les propriétés et méthodes de la classe parent. Ce processus est appelé héritage ! Il existe de nombreuses façons d'implémenter l'héritage dans JS. Aujourd'hui, je vais vous en présenter trois. Utilisons cet article pour en savoir plus sur les trois méthodes d'encapsulation via la simulation js. Les amis qui en ont besoin peuvent s'y référer. J'espère que cela pourra aider tout le monde.

1. Ajouter une méthode d'extension à la classe Object

//声明一个父类
function Person(name){
 this.name=name;
 this.age=age;
 this.say=function(){
   alert("我叫"+this.name);
 }
}
//声明一个子类 
function Student(){
 this.no=no;
 this.study=function(){
  alert("我在学习！");
 }
}
// 通过循坏，将父类对象的所有属性和方法，全部赋给子类对象
Object.prototype.extend=function(parent){
 for(var i in parent){
   this[i].parent[i];
 }
}
var p=new Person("张三",12);
var s=new Student("1234567");
//子类对象调用这个扩展方法
s.extend()
console.log(s);

Le principe d'héritage mentionné ci-dessus :

Par bouclage, toutes les propriétés et méthodes de la classe parent object , tous affectés à des objets de sous-classe. Le point clé est la boucle for-in Même sans étendre Object, l'opération peut être implémentée via une simple boucle.

Cependant, l'utilisation de cette méthode pour implémenter l'héritage présente certains inconvénients :

① Vous ne pouvez pas obtenir directement l'objet de sous-classe complet via une seule instanciation. Vous devez d'abord obtenir l'objet de classe parent et l'objet de sous-classe, puis les fusionner manuellement

②La méthode d'héritage d'extension d'Object sera également conservée sur l'objet de la sous-classe.

Jetons un coup d'œil à la deuxième méthode d'implémentation de l'héritage~

2 Utiliser l'héritage prototypique

Avant d'introduire cette méthode, parlons de deux concepts : objets prototypes Avec prototype.

1. prototype : objet prototype de la fonction

①Seules les fonctions ont un prototype, et toutes les fonctions doivent avoir un prototype

②le prototype lui-même est aussi un objet !

③prototype pointe vers l'adresse de référence de la fonction actuelle !

2. __proto__ : le prototype de l'objet !

①Seuls les objets ont __proto__, et tous les objets doivent avoir __proto__

②__proto__ est aussi un objet, donc il a aussi son propre __proto__ Suivez cette ligne dans l'ordre ascendant, c'est la chaîne de prototypes. .

③ Les fonctions et les tableaux sont des objets et ont leur propre __proto__

//声明父类
function Person(name,age){
   this.name=name;
   this.age=age;
   this.say=function(){
    alert("我叫"+this.name);
   }
}
//声明子类   
function Student(no){
   this.no=no;
   this.study=function(){
    alert("我在学习！我叫"+this.name+"今年"+this.age");
   }
}
//将父类对象赋给子类的prototype  
Student.prototype=new Person("张三",14);
//拿到子类对象时，就会将父类对象的所有属性和方法，添加到__proto__
var s=new Student(); 
s.study();

Utilisez le principe de l'héritage prototypique :

Attribuez l'objet de la classe parent au prototype de la sous-classe, puis les attributs et méthodes de l'objet classe parent apparaîtront dans le prototype de la sous-classe. Ensuite, lors de l'instanciation d'une sous-classe, le prototype de la sous-classe sera dans le __proto__ de l'objet sous-classe. Enfin, les attributs et méthodes de l'objet classe parent apparaîtront dans le __proto__ de l'objet sous-classe.

Caractéristiques de ce type d'héritage :

①Tous les attributs de la sous-classe elle-même sont des attributs membres, et les attributs hérités de la classe parent sont des attributs prototypes.

② Impossible d'obtenir l'objet de sous-classe terminé via une instanciation en une étape.

La troisième façon d'implémenter l'héritage :

call(), apply() et bind(), ces trois méthodes sont très similaires, seulement différentes dans le passage des paramètres.

function Person(name,age){
  this.name=name;
  this.age=age;
  this.say=function(){
    alert("我叫"+this.name);
    }
}
function Student(no,name,age){
  this.no=no;
  this.study=function(){
    alert("我在学习！");
  }
//将父类函数的this,指向为子类函数的this
Person.call(this,name,age);
}
var s=new Student(12,"张三",24);
console.log(s);

La seule différence entre les trois fonctions est la façon dont elles acceptent la liste des paramètres de func. A part ça, il n'y a aucune différence de fonctionnalité !

Comment écrire les trois fonctions (différence) :

Comment écrire call : func.call(obj pointé par ceci de func, paramètre func 1, paramètre func 2,... );

Comment écrire apply : func.apply(obj pointé par ceci de func, [paramètre func 1, paramètre func 2,...]);

Écriture de liaison : func. bind(ce pointé par func obj)(paramètre func 1, paramètre func 2,...);

Recommandations associées :

Explication détaillée d'un plug-in Vue à partir de l'emballage à libérer

La fonction d'encapsulation dans jquery transmet l'élément actuel

jquery et ajax réalisent l'encapsulation de liaison à trois niveaux et la non-encapsulation des provinces et communes

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!