Javascript orienté objet - encapsulation

Étape 1 : Créez une "classe de téléphonie mobile"

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

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

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

Une initialisation d'un objet, comme l'initialisation des attributs et des méthodes dans cet exemple, chaque téléphone mobile aura ; attributs color, size et price. Le constructeur ici est également une fermeture, donc count est accessible et la valeur de count sera enregistrée pendant une longue période (tant qu'il y a une référence)

<. 🎜>

Étape 4 : Méthodes courantes :

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

C'est-à-dire une méthode qui peut être utilisée par tous les objets du téléphone mobile qui sont instanciés, ici le téléphone mobile devrait pouvoir le faire. modifiez le prix, la couleur et la taille, et affichez également 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 « l'objet prototype » méthode dans.

2. S'il est placé dans le constructeur, alors 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 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. , il doit y avoir une méthode pouvant accéder aux variables privées de la classe. Combien d'objets de téléphone mobile 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

Plus d'aspects de Javascript Pour les articles liés à l'encapsulation d'objets, veuillez prêter attention au site Web PHP chinois !

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