Heim > Web-Frontend > js-Tutorial > Hauptteil

Verstehen Sie die JavaScript-Kapselung

PHPz
Freigeben: 2018-10-13 17:35:00
Original
1515 Leute haben es durchsucht

Kapselung kann als Verbergen der internen Datendarstellung und Implementierungsdetails eines Objekts definiert werden. Das Verbergen von Informationen kann durch Kapselung erzwungen werden.

In JavaScript gibt es keine expliziten Schlüsselwörter zum Deklarieren privater Mitglieder. Wenn Sie also eine Kapselung/Informationsversteckung erreichen möchten, müssen Sie von einer anderen Idee ausgehen. Wir können das Konzept der Abschlüsse verwenden, um Methoden und Eigenschaften zu erstellen, auf die nur innerhalb des Objekts zugegriffen werden kann, um Kapselungsanforderungen zu erfüllen.

Grundlegende Methoden

Im Allgemeinen lernen wir, drei Methoden zu verwenden, um den Zweck der Kapselung zu erreichen.

Verwenden Sie this.XXX, um eine Variable zu deklarieren, und deklarieren Sie dann getXXX, setXXX und andere Methoden zur Werterfassung und -zuweisung.
Verwenden Sie this._XXX, um eine Variable zu deklarieren, und deklarieren Sie dann getXXX, setXXX und andere Methoden zur Werterfassung und -zuweisung.
Verwenden Sie dazu das Konzept des „Funktionsumfangs“.

1. Öffnen Sie das Portal

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;
 }
};
Nach dem Login kopieren

Verwenden Sie diese Methode, um eine Kapselung zu erreichen. obwohl Gutachter und Zessionare eingesetzt werden, um privates Eigentum zu schützen. In der tatsächlichen Nutzung kann jedoch weiterhin von außen auf private Eigenschaften zugegriffen werden, sodass eine Kapselung grundsätzlich nicht implementiert ist.

2. Verwenden Sie Namenskonventionen zur Unterscheidung

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;
 }
};
Nach dem Login kopieren

Verwenden Sie diese Methode mit dem ersten Ähnlichen , mit der Ausnahme, dass eine andere Benennung verwendet wird, um die Nutzung privater Grundstücke zu schützen. Aus Sicht der praktischen Anwendung wird die Kapselung jedoch immer noch nicht implementiert.

3. Die Verwendung des Funktionsbereichs

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;
 };
}
Nach dem Login kopieren

wird in einer JavaScript-Funktion deklariert. Variablen sind bereichsgebunden , sodass durch die Verwendung dieser Methode der direkte Zugriff auf private Eigenschaften von außen vermieden wird. Grundsätzlich den für die Verpackung erforderlichen Inhalt erreichen.

Hier ist zu beachten, dass wir this.XXX und var verwenden können, um Variablen innerhalb der Funktion zu deklarieren. Der Unterschied besteht darin, dass mit this.XXX deklarierte Variablen von außen zugänglich sind. Mit var deklarierte Variablen sind durch den Funktionsumfang geschützt und können außerhalb der Funktion nicht direkt aufgerufen werden.

4. Verwenden Sie die Transformation des Funktionsumfangs

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;
  };
 };
})();
Nach dem Login kopieren

Diese Methode gibt direkt die Ausführung zurück ein Konstrukteur. Und der Konstruktor hier ist eine Inline-Funktion.

Der Vorteil dieser Methode besteht darin, dass „es nur eine Kopie im Speicher gibt. Da andere statische Methoden außerhalb des Konstruktors deklariert werden, handelt es sich nicht um privilegierte Methoden.

Beurteilen Sie eine Methode.“ Das Prinzip, ob es als statische Methode entworfen werden sollte, lautet: „Ob diese Methode auf private Eigenschaften zugreift.“ Wenn es nicht benötigt wird, wäre es effizienter, es als statische Methode zu entwerfen, da nur eine Kopie davon erstellt wird.

Konstante
Wir können den Ansatz „nur Getter, kein Zuweiser“ verwenden, um Konstanten zu implementieren.

// 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");
Nach dem Login kopieren

Vor- und Nachteile

Vorteile

Die Kapselung schützt die Integrität interner Daten.
Die Kapselung erleichtert die Rekonstruktion von Objekten.
Verbessert die Wiederverwendbarkeit von Objekten Namensraumkonflikte;
...

Nachteile

Private Methoden sind schwer zu testen;

Muss mit komplexen Problemen verbunden sein Die Bereichskette erschwert die Fehlerplanung.
Es kann leicht zu einer übermäßigen Kapselung kommen.
JavaScript unterstützt keine Kapselung. Daher gibt es Komplexitätsprobleme bei der Implementierung der Kapselung in JavaScript Der gesamte Inhalt dieses Artikels soll für das Studium aller hilfreich sein.

【Empfohlene verwandte Tutorials】

JavaScript-Video-Tutorial

3 Bootstrap-Tutorial

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage