Javascript design mode encapsulation and Information Hiding (on)

This article is divided into two parts: basic patterns (upper part): full exposure, underline marking, and closure. Advanced Patterns (lower part ), there are other knowledge points about how to implement static methods and attributes and constants.
Encapsulation is a basic and useful feature of object-oriented language. Although javascript can also be called object-oriented language, its support for encapsulation is not very good, unlike other languages, you only need to use private and protected. But this does not mean that there is no way. Next I will introduce how to implement encapsulation in javascript.
I. basic patterns ),There are three main methods: full exposure, underline markup, and closure. (Closure is a very important and difficult concept. If you are interested, you can go to the Internet to find information and repost others' articles on my blog ).
Here we use the book class as an example. We need to create and initialize the book class.
Copy codeThe Code is as follows:
// Book (isbn, title, author)
Var theHobbit = new Book ('0-395-07122-4 ', 'the hobbit', 'J. R. Tolkien ');
TheHobbit. display (); // Outputs the data by creating and populating an HTML element.

1. Full exposure method:
You can use the most traditional constructor method to create a book class,
Copy codeThe Code is as follows:
Var Book = function (isbn, title, author ){
If (! This. checkIsbn (isbn) throw new Error ('book: Invalid ISBN .');
This. isbn = isbn;
// In the code | the function is to assign 'no title specified 'to this. title if the title has No value. This method is easy to use and can be used in your own code.
This. title = title | 'no title specified ';
This. author = author | 'no author specified ';
}
Book. prototype = {
// Verify the isbn Function
CheckIsbn: function (isbn ){
...
},
// Obtain isbn
GetIsbn: function (){
Return this. isbn;
},
// Set isbn
SetIsbn: function (isbn ){
If (! This. checkIsbn (isbn) throw new Error ('book: Invalid ISBN .');
This. isbn = isbn;
},
// Obtain the title
GetTitle: function (){
Return this. title;
},
// Set the title
SetTitle: function (title ){
This. title = title | 'no title specified ';
},
// Obtain the author
GetAuthor: function (){
Return this. author;
},
// Set the author
SetAuthor: function (author ){
This. author = author | 'no author specified ';
},
// Display function
Display: function (){
...
}
};

There are a lot of code. I will explain it here. The classes created in javascript are different from those created in c #. java packages all methods and attributes in a class file, for example
Copy codeThe Code is as follows:
Public class book ()
{
Private string isbn;
Public string ISBN
{
Set
{
This. isbn = value;
}
Get
{
Return this. isbn;
}
}
...
Private bool CheckIsbn (string isdn)
{
......
}
......
Public void Display ()
{
......
}
}

Javascript can also use this method, but we recommend that you use the class definition function (or constructor) that defines attributes and methods to prototype objects, this method has better performance. For the reason, you can go to google.
The above js Code wants to implement the function of defining a book class, which includes three private variables (or attributes) isbn, title, author, and a private method checkIsbn, several public methods: getIsdn, setIsdn ,... display. The idea is good, but the reality is cruel. In fact, those private attributes or methods are not private at all. For example, theHobbit. isbn = '1970-978 '; you can assign a value to isbn in this way, so that no error is reported and it is absolutely successful. The reason is that javascript has no private method to private specific objects. In addition, this implementation method can cause confusion when used. What attributes and methods do the class creators want to expose? The following describes the first improvement method, the underline mark method.
2. Underline marking:
Copy codeThe Code is as follows:
Var Book = function (isbn, title, author ){
// Constructor code.
This. setIsbn (isbn );
This. setTitle (title );
This. setAuthor (author );
}
Book. prototype = {
// Verify the isbn Function
_ CheckIsbn: function (isbn ){
...
},
// Obtain isbn
GetIsbn: function (){
Return this. _ isbn;
},
// Set isbn
SetIsbn: function (isbn ){
If (! This. _ checkIsbn (isbn) throw new Error ('book: Invalid ISBN .');
This. _ isbn = isbn;
},
...
// Display function
Display: function (){
...
}
};

In fact, all the attributes or methods that you want to implement are underlined _. There are no other operations. This method has not achieved real privatization, theHobbit. _ isbn = '1970-978 '; the operation is still successful. The biggest significance of this method is to tell the class users which objects the author intends to expose and which objects he does not want to expose. However, the author cannot control whether users follow the author's ideas.
Is there a way to achieve real privatization? The answer is yes, that is, using closures.
3. Use closure:
The true encapsulation of javascript is inseparable from its unique function scope, Function Support for internal functions, and closure. You can collect related knowledge online to deepen your understanding.
The following is the function scope. In javascript, if a variable is defined inside a function, there is no way to access the function outside. In fact, the implementation of private attributes or methods in javascript uses this special attribute. Example:
Copy codeThe Code is as follows:
Function foo (){
Var a = 10;
Function bar (){
A * = 2;
}
Bar ();
Return;
}

In the above example, the function foo defines the variables a and the method bar internally, and the and bar cannot be accessed outside foo, but because both a and bar are defined inside foo, but bar can access. Is there any way to access the bar outside of foo? The answer is yes, that is, the closure is used.
Copy codeThe Code is as follows:
Function foo (){
Var a = 10;
Function bar (){
A * = 2;
Return;
}
Return bar;
}
Var baz = foo (); // baz is now a reference to function bar.
Baz (); // returns 20.
Baz (); // returns 40.
Baz (); // returns 80.
Var blat = foo (); // blat is another reference to bar.
Blat (); // returns 20, because a new copy of a is being used.

This is the javascript function mentioned above that supports internal functions. The internal function bar can access the private variable a. The function foo throws the internal function bar to baz, and baz can access the internal variable a, which implements the closure. As you can see, private variables and methods are actually implemented. Return to the previous book example and implement the following:
Copy codeThe Code is as follows:
Var Book = function (newIsbn, newTitle, newAuthor ){
// Implements Publication
// Private attributes.
Var isbn, title, author;
// Private method.
Function checkIsbn (isbn ){
...
}
// Privileged methods.
This. getIsbn = function (){
Return isbn;
};
This. setIsbn = function (newIsbn ){
If (! CheckIsbn (newIsbn) throw new Error ('book: Invalid ISBN .');
Isbn = newIsbn;
};
This. getTitle = function (){
Return title;
};
This. setTitle = function (newTitle ){
Title = newTitle | 'no title specified ';
};
This. getAuthor = function (){
Return author;
};
This. setAuthor = function (newAuthor ){
Author = newAuthor | 'no author specified ';
};
// Constructor code.
This. setIsbn (newIsbn );
This. setTitle (newTitle );
This. setAuthor (newAuthor );
};
// Public, non-privileged methods.
Book. prototype = {
Display: function (){
...
}
};

The code above realizes the privatization of isbn, title, author and checkIsbn, and the external is determined not to be accessed directly. To access isbn, title, and author, you can only use the object-level method getTitle, setTitle .... For example, if you want to assign a value to isbn, you can only use theHobbit. setIsbn = '000000'; if you still use theHobbit. _ isbn = '000000'; sorry, an error is returned.

Well, today's content is here, and I hope it will help you.
Author: Next stop forever