Code d'encapsulation Javascript orienté objet (2)

Écrivez un petit exemple :

Étape 1 : Créez un « cours de téléphonie mobile »

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

Étape 2 : Considérez cette classe et quels attributs privés y sont nécessaires. que je veux définir ici est le nombre de téléphones mobiles qui sortent de l'instance

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

Étape 3 : Créer un constructeur, c'est-à-dire initialiser le nouvel objet généré lors de l'instanciation de l'instance, comme l'initialisation d'attributs et de méthodes ; dans cet exemple, chaque téléphone mobile aura des attributs de couleur, de taille et de prix. Le constructeur ici est également une fermeture, donc le nombre est accessible et la valeur du nombre sera stockée en mémoire pendant une longue période. time (tant que la référence existe)

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; //手机索引，是第几台创建的手机手象 
　　　　　} 
})()

Étape 4 : Méthodes courantes :
C'est-à-dire une méthode qui peut être utilisée par tous les objets téléphone mobile de l'instance Ici, le téléphone mobile. devrait pouvoir modifier le prix, la couleur, la taille, et également afficher la taille, la couleur et le prix.
Les méthodes courantes ici doivent être placées dans « l'objet prototype » :
1. Tous les objets instanciés par ce constructeur, c'est-à-dire le téléphone mobile créé, peuvent utiliser les méthodes dans « l'objet prototype ».
2. S'il est placé dans le constructeur, chaque fois qu'un objet téléphone mobile est instancié, un tas de méthodes répétées seront générées, occupant de la mémoire.
3. "constructor":creatphone explication :
Parce que creatphone.prototype ={...} écrase complètement la référence à l'objet prototype précédent. Afin d'associer l'objet prototype au constructeur, l'attribut "constructor":creatphone est défini

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

Étape 5 : Méthode privilégiée, c'est-à-dire qu'il doit y avoir une méthode pouvant accéder au privé. propriétés de la variable de classe. C'est le nombre d'objets de téléphonie mobile qui sortent de l'instance

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

Utilisez une classe de téléphone mobile encapsulée ci-dessus pour tester

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

Les résultats sont les suivants, tout à fait corrects :