Comprendre l'encapsulation JavaScript

L'encapsulation peut être définie comme le masquage de la représentation interne des données et des détails d'implémentation d'un objet. Le masquage des informations peut être renforcé par l'encapsulation.

En JavaScript, il n'y a pas de mots-clés explicites pour déclarer des membres privés. Par conséquent, si vous souhaitez réaliser l’encapsulation/masquage d’informations, vous devez partir d’une autre idée. Nous pouvons utiliser le concept de fermetures pour créer des méthodes et des propriétés accessibles uniquement depuis l'intérieur de l'objet afin de répondre aux exigences d'encapsulation.

Méthodes de base

De manière générale, nous apprenons à utiliser trois méthodes pour atteindre l'objectif de l'encapsulation.

Utilisez this.XXX pour déclarer une variable, puis déclarez getXXX, setXXX et d'autres méthodes d'acquisition et d'affectation de valeurs.
Utilisez this._XXX pour déclarer une variable, puis déclarez getXXX, setXXX et d'autres méthodes d'acquisition et d'affectation de valeurs.
Utilisez le concept de « portée de fonction » pour ce faire.

1. Ouvrez le portail

var Book = function(isbn,title,author){
 this.setIsbn(isbn);
 this.setTitle(title);
 this.setAuthor(author);
};

Book.prototype = {
 setIsbn: function(isbn){
  this.isbn = isbn;
 },
 getIsbn: function(){
  return this.isbn;
 },
 setTitle: function(title){
  this.title = title;
 },
 getTitle: function(){
  return this.title;
 },
 setAuthor: function(author){
  this.author = author;
 },
 getAuthor: function(){
  return this.author;
 }
};

Utilisez cette méthode pour réaliser l'encapsulation, bien que des évaluateurs et des cédants soient mis en place pour protéger les propriétés privées. Mais dans la réalité, les propriétés privées sont toujours accessibles de l’extérieur, donc fondamentalement, l’encapsulation n’est pas implémentée.

2. Utilisez les conventions de dénomination pour différencier

var Book = function(isbn,title,author){
 this.setIsbn(isbn);
 this.setTitle(title);
 this.setAuthor(author);
};

Book.prototype = {
 setIsbn: function(isbn){
  this._isbn = isbn;
 },
 getIsbn: function(){
  return this._isbn;
 },
 setTitle: function(title){
  this._title = title;
 },
 getTitle: function(){
  return this._title;
 },
 setAuthor: function(author){
  this._author = author;
 },
 getAuthor: function(){
  return this._author;
 }
};

Utilisez cette méthode avec le premier similaire. , sauf qu'une dénomination différente est utilisée pour protéger l'utilisation des propriétés privées. Cependant, du point de vue de l’application pratique, il n’implémente toujours pas l’encapsulation.

3. Utilisation de la portée de la fonction

var Book = function(newIsbn,newTitle,newAuthor){
 var isbn,title,author;

 this.setIsbn=function(newIsbn){
  isbn = newIsbn;
 };
 this.getIsbn=function(){
  return isbn;
 };
 this.setTitle=function(newTitle){
  title = newTitle;
 };
 this.getTitle=function(){
  return title;
 };
 this.setIsbn=function(newAuthor){
  author = newAuthor;
 };
 this.getIsbn=function(){
  return author;
 };
}

est déclarée dans une fonction JavaScript. Les variables sont étendues. , donc l'utilisation de cette méthode évite l'accès direct aux propriétés privées de l'extérieur. En gros, obtenez le contenu requis pour l’emballage.

Ce qu'il convient de noter ici, c'est que nous pouvons utiliser this.XXX et var pour déclarer des variables à l'intérieur de la fonction. La différence est que les variables déclarées à l'aide de this.XXX sont accessibles en externe. Les variables déclarées à l'aide de var sont protégées par la portée de la fonction et ne sont pas directement accessibles en dehors de la fonction.

4. Utiliser la transformation de la portée de la fonction

var Book = (function(){
 // ...其他静态方法

 return function(newIsbn,newTitle,newAuthor){
  var isbn,title,author;

  this.setIsbn=function(newIsbn){
   isbn = newIsbn;
  };
  this.getIsbn=function(){
   return isbn;
  };
  this.setTitle=function(newTitle){
   title = newTitle;
  };
  this.getTitle=function(){
   return title;
  };
  this.setIsbn=function(newAuthor){
   author = newAuthor;
  };
  this.getIsbn=function(){
   return author;
  };
 };
})();

Cette méthode renvoie directement l'exécution de un constructeur. Et le constructeur ici est une fonction en ligne.

L'avantage de cette méthode est qu'"il n'y aura qu'une seule copie en mémoire. Parce que les autres méthodes statiques sont déclarées en dehors du constructeur, ce ne sont pas des méthodes privilégiées."

Juger une méthode. Le principe de savoir si elle doit être conçue comme une méthode statique est de savoir « si cette méthode accédera aux propriétés privées ». Si ce n’est pas nécessaire, il serait plus efficace de la concevoir comme une méthode statique puisqu’une seule copie sera créée.

Constante
Nous pouvons utiliser l'approche "uniquement getter, pas d'assignateur" pour implémenter des constantes.

// 1.
var Book = function(){
 var constants = ["key1": "1","key2": "2","key3": "3"];

 this.getConstant = function(key){
  return constants[key];
 };
};

Book.getConstant("key1");

// 2.
var Book = (function(){
 var constants = ["key1": "1","key2": "2","key3": "3"];

 var con = function(){};
 con.getConstant = function(name){
  return constants[name];
 };

 return con;
})();

Book.getConstant("key1");

Avantages et inconvénients

1. >

L'encapsulation protège l'intégrité des données internes ;

L'encapsulation facilite la reconstruction des objets
affaiblit le couplage entre les modules et améliore la réutilisabilité des objets ;
Oui Permet d'éviter ; conflits d'espace de noms ;
...

2. Inconvénients

Les méthodes privées sont difficiles à tester

doivent être associées à une gestion complexe ; la chaîne de portée rend la planification des erreurs plus difficile ;
Il est facile de provoquer une encapsulation excessive ;
JavaScript ne prend pas en charge l'encapsulation de manière native, il existe donc des problèmes de complexité dans l'implémentation de l'encapsulation en JavaScript ; Nous espérons que l’ensemble du contenu de cet article sera utile à l’étude de chacun.

【Tutoriels associés recommandés】

1.

Tutoriel vidéo JavaScript

2. tutoriel bootstrap