Maison > interface Web > js tutoriel > Trois façons d'implémenter l'encapsulation via la simulation JavaScript et comment les écrire

Trois façons d'implémenter l'encapsulation via la simulation JavaScript et comment les écrire

小云云
Libérer: 2018-01-02 10:02:17
original
1309 Les gens l'ont consulté

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 méthodes pour implémenter l'héritage dans JS. JS est un langage orienté objet et ses objets sont simulés à l'aide de l'attribut prototype. 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.

//声明一个父类
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);
Copier après la connexion

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

Par le biais d'une boucle, 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'implémentation de l'héritage de cette manière 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();
Copier après la connexion

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);
Copier après la connexion

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 :

instance de classe de recherche encapsulée php

Exemple détaillé d'explication du processus d'encapsulation de mui pull-up pour charger davantage de données d'actualisation déroulantes

Encapsulation de la fonction fonctionnelle PHP consistant à ajouter des virgules tous les trois chiffres de chiffres

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal