Explication détaillée des exemples de codes de fonction de classe de téléphone mobile d'encapsulation Javascript-js tutoriel-php.cn

Explication détaillée des exemples de codes de fonction de classe de téléphone mobile d'encapsulation Javascript

伊谢尔伦

Libérer： 2017-07-22 13:15:41

original

1889 Les gens l'ont consulté

Étape 1 : Créer un "cours de téléphonie mobile"

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

Copier après la connexion

Étape 2 : Considérez cette classe, ici Attributs privés de ces classes sont nécessaires. Ce que je veux définir ici, c'est le nombre de téléphones mobiles qui ont des instances

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

Copier après la connexion

Étape 3 : Créer un constructor , c'est-à-dire une initialisation du nouvel objet généré lors de l'instance , comme l'initialisation des attributs et des méthodes ; dans cet exemple, chaque téléphone mobile aura des attributs de couleur, de taille et de prix. une fermeture, Donc count est accessible, et la valeur de count sera stockée en mémoire pendant longtemps (tant qu'il y a une référence)

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

Copier après la connexion

Étape 4 : Méthodes courantes :

Il s'agit d'une méthode qui peut être utilisée par tous les objets de téléphone mobile qui sont instanciés. Ici, le téléphone mobile doit pouvoir modifier le prix, la couleur, taille, et affiche é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
  } 
 }
})()

Copier après la connexion

É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. C'est le nombre d'objets de téléphone 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;
})()

Copier après la connexion

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

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!