Javascript object-oriented (2) encapsulation code_js object-oriented

Write a small example:

Step one: Make a "mobile phone class"

Copy the code The code is as follows :

var MobilePhone = (function(){
　　…………
})()

Step 2: Consider this Class, the private attributes of those classes are needed. What I want to define here is the number of mobile phones out of the instance

Copy the code The code is as follows:

var MobilePhone = (function(){
//Private attribute
var count = 0; //Represents the number of mobile phones
})()

Step 3: Create a constructor, which is an initialization of the new object generated when instantiating the instance, such as the initialization of attributes and methods; in this example, each mobile phone will have a color, size, Price attribute. The constructor here is also a closure, so count can be accessed, and the value of count will be stored in memory for a long time (as long as a reference exists)

Copy code The code is as follows:

var MobilePhone = (function(){
//Private attribute
var count = 0; //Represents Number of mobile phones
　
//Constructor function
var creatphone = function(color,size,price){
this._size = size; //The size of the mobile phone
this._price = price; //The price of the mobile phone
this.index = count; //Mobile phone index, which mobile phone icon was created
, size, size, color, price can also be displayed.
The common methods here should be placed in the "prototype object":
1. All objects instantiated by this constructor, that is, the mobile phone created, can use the methods in the "prototype object".
2. If placed in the constructor, then every time a mobile phone object is instantiated, a bunch of repeated methods will be generated, occupying memory.
3. "constructor":creatphone explanation:

Because creatphone.prototype ={...} quite overwrites the reference to the previous prototype object. In order to associate the prototype object with the constructor, the attribute "constructor":creatphone is set.




Copy code


The code is as follows :

var MobilePhone = (function(){ //Private attributevar count = 0;//Represents the number of mobile phones　//Constructor　 var creatphone = function(color,size,price){

count ;

count ;
this._color = color; //The color of the phone
= price; //The price of the mobile phone
　　　this.index = count; //The index of the mobile phone is the number of the mobile phone icon created
　　　}
//Public method, stored in the prototype object
creatphone.prototype = {
"constructor":creatphone,
//Get the phone color
"getColor" : function(){
return this._color;
},
//Set the 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 size of the phone
"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: Privileged method, that is, there needs to be a method that can access the private variables of the class. It is how many mobile phone objects come out of the instance




Copy the code

The code is as follows:

var MobilePhone = (function(){
//Private 속성
var count = 0;//휴대폰 개수를 나타냅니다.
var index = 0;//인덱스를 나타냅니다. 휴대폰의
　　　//생성자 함수
　　var creatphone = function(색상, 크기, 가격){
　　　 count; /휴대폰의 크기
　　　this._price = //The 휴대폰 가격
　　　　this.index = count; //휴대폰의 인덱스는 생성된 휴대폰 아이콘의 개수
　　}　　　///퍼블릭 메소드, 프로토타입 객체
creatphone에 저장됩니다. 프로토타입 = {
"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": 함수(크기){
this._size.width = size.width;
this._size.height = size.height; : function(){
return this._price;
},
"setPrice" : function(price){
this._price = 가격
}
}
/ /특권 메소드
creatphone.get_count_index = function(){
반환 횟수
}
반환 creatphone
})()


휴대폰 수업 사용 위에 캡슐화하여 테스트

코드 복사

코드는 다음과 같습니다. var anycall = new MobilePhone(); //삼성 휴대폰 객체 인스턴스var HTC = new MobilePhone(); //HTC 휴대폰 객체 인스턴스var Iphone4s = new MobilePhone() //Apple 휴대폰 4S 모바일 인스턴스 Phone 객체

console.log("Samsung is:" anycall.index "station"); //FF의 콘솔은 생성된 Samsung 휴대폰 객체의 번호, 즉 index를 출력합니다.

console.log; ("HTC는 번호입니다:" HTC.index "station"); //FF의 콘솔은 생성된 HTC 전화 개체의 번호, 즉 인덱스를 출력합니다.
console.log("Iphone4s는 번호입니다. " Iphone4s.index "station"); //iPhone 4S 휴대폰 객체가 생성된 FF의 콘솔 출력, 즉 인덱스;
console.log("총 "MobilePhone.get_count_index() "휴대폰" ) ; //FF의 콘솔 출력에는 총 몇 개의 휴대폰이 생성되었는지 표시됩니다.
console.log(anycall.constructor === MobilePhone) //인스턴스된 개체의 원본 이미지에 있는 생성자가 여전히 가리키는지 여부; 휴대폰




결과는 다음과 같습니다. 절대적으로 정확합니다.