Javascript object-oriented (2) encapsulated code _ js object-oriented

Javascript object-oriented (2) code encapsulation. If you need code, refer to the following example:

Step 1: create a "Mobile Phone type"

The Code is as follows:

Var MobilePhone = (function (){
............
})()

Step 2: Consider the private attributes of these classes. Here I want to define the number of mobile phones that come out of the instance.

The Code is as follows:

Var MobilePhone = (function (){
// Private attributes
Var count = 0; // the number of mobile phones.
})()

Step 3: Create a constructor, that is, to initialize the new image, such as attribute and method initialization. In this example, each mobile phone will have a color, size, price attribute. here the constructor is also a closure, so you can access count and the value of count will be stored in the memory for a long time (as long as there is a reference)

The Code is as follows:

Var MobilePhone = (function (){
// Private attributes
Var count = 0; // the number of mobile phones.
　　　　
// Constructor
Var creatphone = function (color, size, price ){
Count ++;
This. _ color = color; // cell phone color
This. _ size = size; // cell phone size
This. _ price = price; // mobile phone price
This. index = count; // mobile phone index, which is the number of mobile phone images created
}
})()

Step 4: common methods:
That is, all the mobile phone objects from the instance can be used. Here, the mobile phone should be able to change the price, color, size, or display the size, color, and price.
The common methods here should be placed in the "prototype object:
1. All objects created using the constructor instance, that is, mobile phones, can use the methods in the "prototype object.
2. If it is placed in the constructor, a bunch of repeated methods will be generated every time a mobile phone object is displayed on the instance, occupying the memory.
3. "constructor": creatphone explanation:
Because creatphone. prototype = {......} It overwrites the reference of the previous prototype object. To associate the prototype object with the constructor, set "constructor": creatphone.

The Code is as follows:

Var MobilePhone = (function (){
// Private attributes
Var count = 0; // the number of mobile phones.
// Constructor
Var creatphone = function (color, size, price ){
Count ++;
This. _ color = color; // cell phone color
This. _ size = size; // cell phone size
This. _ price = price; // mobile phone price
This. index = count; // mobile phone index, which is the number of mobile phone images created
}
// Public method, which is stored in the prototype object
Creatphone. prototype = {
"Constructor": creatphone,
// Obtain the mobile phone color
"GetColor": function (){
Return this. _ color;
},
// Set the mobile phone color
"SetColor": function (color ){
This. _ color = color;
},
// Get the phone size
"GetSize": function (){
Return "width:" + this. _ size. width + "height:" + this. _ size. height;
},
// Set the phone size
"SetSize": function (size ){
This. _ size. width = size. width;
This. _ size. height = size. height;
},
// Get the mobile phone price
"GetPrice": function (){
Return this. _ price;
},
// Set the mobile phone price
"SetPrice": function (price ){
This. _ price = price
}
}
})()

Step 5: The privileged method requires a method that can be used to remove the private variables of the privileged class. It is the number of mobile phone objects that come out of the instance.

The Code is as follows:

Var MobilePhone = (function (){
// Private attributes
Var count = 0; // the number of mobile phones.
Var index = 0; // indicates the mobile phone index
// Constructor
Var creatphone = function (color, size, price ){
Count ++;
This. _ color = color; // cell phone color
This. _ size = size; // cell phone size
This. _ price = price; // mobile phone price
This. index = count; // mobile phone index, which is the number of mobile phone images created
} // Public method, which is stored in the prototype object
Creatphone. prototype = {
"Constructor": creatphone,
"GetColor": function (){
Return this. _ color;
},
"SetColor": function (color ){
This. _ color = color;
},
"GetSize": function (){
Return "width:" + this. _ size. width + "height:" + this. _ size. height;
},
"SetSize": function (size ){
This. _ size. width = size. width;
This. _ size. height = size. height;
},
"GetPrice": function (){
Return this. _ price;
},
"SetPrice": function (price ){
This. _ price = price
}
}
// Privileged method
Creatphone. get_count_index = function (){
Return count
}
Return creatphone;
})()

Use a mobile phone test encapsulated above

The Code is as follows:

Var anycall = new MobilePhone (); // instance a Samsung mobile phone object
Var HTC = new MobilePhone (); // instance an HTC mobile phone object
Var Iphone4s = new MobilePhone (); // instance an apple 4S mobile phone object
Console. log ("Samsung is the first:" + anycall. index + ""); // FF's console outputs the number of Samsung mobile phone objects created, that is, the index;
Console. log ("HTC is:" + HTC. index + ""); // The number of HTC mobile phone objects created on the FF console, that is, the index;
Console. log ("Iphone4s is the number:" + Iphone4s. index + ""); // The FF console outputs the number of Apple 4S mobile phone objects created, that is, the index;
Console. log ("created in total" + MobilePhone. get_count_index () + "Mobile Phone"); // FF console outputs created in total several mobile phones;
Console. log (anycall. constructor === MobilePhone); // whether the constructor in the original image points to MobilePhone

The results are as follows: