Introduction à trois méthodes de simulation JavaScript pour réaliser l'encapsulation et leurs différences

Avant-propos

L'héritage consiste à utiliser une sous-classe pour hériter d'une autre classe parent, la sous-classe peut alors automatiquement avoir tous les attributs et méthodes, ce processus s'appelle l'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.

1. Ajoutez 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);

Ci-dessus Le principe de mise en œuvre de l'héritage :

Grâce au bouclage, tous les attributs et méthodes de l'objet classe parent sont attribués à l'objet classe enfant. 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

Parlons de cette méthode avant de la présenter Deux. concepts : objet prototype et prototype

1. prototype : objet prototype de 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 un proto, et tous les objets doivent avoir un proto

②le proto est également un objet, il a donc également son propre proto. L'ordre de recherche le long de cette ligne est Prototype. chaîne.

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

Le principe d'utilisation de l'héritage prototypique :

Attribuez l'objet de classe parent au prototype de la sous-classe, puis les attributs et méthodes de l'objet de 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 propriétés de prototype.

② 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érent dans les paramètres de passage.

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,...);

appliquer la méthode d'écriture : func.apply(obj pointé par ceci de func, [paramètre func 1, paramètre func 2,...]) ;

Méthode d'écriture de liaison : func.bind (obj pointé par ceci de func) (paramètre func 1, paramètre func 2,...);

Résumé

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!