Objektorientierter Javascript-Kapselungscode (2).

Schreiben Sie ein kleines Beispiel:

Schritt 1: Erstellen Sie eine „Handyklasse“

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

Schritt 2: Überlegen Sie, welche privaten Attribute darin benötigt werden Ich möchte hier die Anzahl der Mobiltelefone definieren, die aus der Instanz stammen

var MobilePhone = (function(){ 
//私有属性 
var count = 0; //代表手机的数量 
})()

Schritt 3: Erstellen Sie einen Konstruktor, dh initialisieren Sie das neue Objekt, das beim Instanziieren der Instanz generiert wird, z. B. die Initialisierung von Attributen und Methoden; in diesem Beispiel verfügt jedes Mobiltelefon über Farb-, Größen- und Preisattribute. Der Konstruktor ist hier auch ein Abschluss, sodass auf count zugegriffen werden kann und der Wert von count für eine lange Zeit im Speicher gespeichert wird Zeit (solange die Referenz vorhanden ist)

var MobilePhone = (function(){ 
//私有属性 
var count = 0; //代表手机的数量 
　　　　 
　　　　//构造函数 
　　　　var creatphone = function(color,size,price){ 
　　　　　　　　count++; 
　　　　　　　　this._color = color; //手机的颜色 
　　　　　　　　this._size = size; //手机的大小 
　　　　　　　　this._price = price; //手机的价格 
　　　　　　　　this.index = count; //手机索引，是第几台创建的手机手象 
　　　　　} 
})()

Schritt 4: Gemeinsame Methoden:
Das heißt, eine Methode, die von allen Mobiltelefonobjekten aus der Instanz Hier, dem Mobiltelefon, verwendet werden kann sollte in der Lage sein, Preis, Farbe und Größe zu ändern und auch Größe, Farbe und Preis anzuzeigen.
Die hier üblichen Methoden sollten im „Prototypobjekt“ platziert werden:
1 Alle von diesem Konstruktor instanziierten Objekte, also das erstellte Mobiltelefon, können die Methoden im „Prototypobjekt“ verwenden.
2. Wenn es im Konstruktor platziert wird, wird jedes Mal, wenn ein Mobiltelefonobjekt instanziiert wird, eine Reihe wiederholter Methoden generiert, die Speicher belegen.
3. „constructor“:creatphone Erklärung:
Weil creatphone.prototype ={...} den Verweis auf das vorherige Prototypobjekt ziemlich überschreibt. Um das Prototypobjekt mit dem Konstruktor zu verknüpfen, wird das Attribut „constructor“:creatphone gesetzt

var MobilePhone = (function(){ 
//私有属性 
var count = 0;//代表手机的数量 
　　　　//构造函数 
　　　　 var creatphone = function(color,size,price){ 
　　　　　　　　count++; 
　　　　　　　　this._color = color; //手机的颜色 
　　　　　　　　this._size = size; //手机的大小 
　　　　　　　　this._price = price; //手机的价格 
　　　　　　　　this.index = count; //手机索引，是第几台创建的手机手象 
　 　　　　} 
//公有方法，存放在原型对象中 
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 
} 
} 
})()

Schritt 5: Privilegierte Methode, das heißt, es muss eine Methode vorhanden sein, die auf das Private zugreifen kann Eigenschaften der Klassenvariablen. Es geht darum, wie viele Mobiltelefonobjekte aus der Instanz hervorgehen

var MobilePhone = (function(){ 
//私有属性 
var count = 0;//代表手机的数量 
var index = 0;//代表手机的索引 
　　　　//构造函数 
　　　　var creatphone = function(color,size,price){ 
　　　　　　　　count++; 
　　　　　　　　this._color = color; //手机的颜色 
　　　　　　　　this._size = size; //手机的大小 
　　　　　　　　this._price = price; //手机的价格 
　　　　　　　　this.index = count; //手机索引，是第几台创建的手机手象 
　　　　　　}　　　　　//公有方法，存放在原型对象中 
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 
} 
} 
//特权方法 
creatphone.get_count_index = function(){ 
return count 
} 
return creatphone; 
})()

Verwenden Sie zum Testen die oben gekapselte Mobiltelefonklasse

var anycall = new MobilePhone(); //实例一个三星手机对象 
var HTC = new MobilePhone(); //实例一个HTC手机对象 
var Iphone4s = new MobilePhone(); //实例一个苹果4S手机对象 
console.log("三星是第："+anycall.index+"台"); //FF的控制台输出三星手机对象是第几台创建的，即索引； 
console.log("HTC是第："+HTC.index+"台"); //FF的控制台输出HTC手机对象是第几台创建的，即索引； 
console.log("Iphone4s是第："+Iphone4s.index+"台"); //FF的控制台输出个苹果4S手机对象是第几台创建的，即索引； 
console.log("总共造出了"+MobilePhone.get_count_index()+"手机"); //FF的控制台输出总共创建了几台手机； 
console.log(anycall.constructor === MobilePhone); //实例出来的对象，的原形象中的constructor，是否还指向MobilePhone

Die Ergebnisse sind wie folgt, völlig korrekt: