Understand JavaScript encapsulation

Encapsulation can be defined as hiding the internal data representation and implementation details of an object. Information hiding can be enforced through encapsulation.

In JavaScript, there are no explicit keywords for declaring private members. Therefore, if you want to achieve encapsulation/information hiding, you need to start from another idea. We can use the concept of closures to create methods and properties that are only accessible from within the object to achieve encapsulation requirements.

Basic methods

Generally speaking, we learn to use three methods to achieve the purpose of encapsulation.

Use this.XXX to declare a variable, and then declare getXXX, setXXX and other value acquisition and assignment methods.
Use this._XXX to declare a variable, and then declare getXXX, setXXX and other value acquisition and assignment methods.
Use the concept of "function scope" to do this.

1. Open 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;
 }
};

Use this method to achieve Encapsulation, although valuers and assigners are implemented to protect private properties. But in actual use, private properties can still be accessed from the outside, so fundamentally, encapsulation is not implemented.

2. Use naming conventions to differentiate

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;
 }
};

Use this method with the first Similar, except that different naming is used to protect the use of private properties. However, from a practical application perspective, it still does not implement encapsulation.

3. Using function scope

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;
 };
}

is declared in a JavaScript function Variables are scoped, so using this method avoids direct access to private properties from outside. Basically achieve the content required for packaging.

What should be noted here is that we can use this.XXX and var to declare variables inside the function. The difference is that variables declared using this.XXX are accessible externally. Variables declared using var are protected by the function scope and cannot be directly accessed outside the function.

4. Use the transformation of function scope

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

This method returns directly Execution of a constructor. And the constructor here is an inline function.

The advantage of this method is that "there will only be one copy in the memory. Because other static methods are declared outside the constructor, they are not privileged methods."

Judge a method The principle of whether it should be designed as a static method is "whether this method will access private properties." If it's not needed, it would be more efficient to design it as a static method since only one copy of it will be created.

Constant
We can use the "only getter, no assignor" approach to implement constants.

// 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");

Pros and cons

1. Pros

Encapsulation protects the integrity of internal data;
Encapsulation makes it easier to reconstruct objects;
weakens the coupling between modules and improves the reusability of objects;
Yes Helps avoid namespace conflicts;
...
2. Disadvantages

Private methods are difficult to test;
must be associated with complex Dealing with the scope chain makes error scheduling more difficult;
It is easy to cause excessive encapsulation;
JavaScript does not natively support encapsulation, so there are complexity issues in implementing encapsulation in JavaScript;

The above is The entire content of this article is hoped to be helpful to everyone's study.

【Recommended related tutorials】

1. JavaScript video tutorial
2. JavaScript online manual
3. bootstrap tutorial