Javascriptカプセル化携帯電話クラス関数コード例の詳細説明

ステップ 1: 「携帯電話クラス」を作成します

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

ステップ 2: このクラスと、必要なそれらのクラスのプライベート属性を検討します。ここで定義したいのは、インスタンス化される携帯電話の数です。

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

ステップ 3: コンストラクターを作成します。つまり、インスタンス化時に生成される新しいオブジェクトの初期化 です。この例では、各携帯電話には色、サイズ、 Price 属性。ここのコンストラクターもクロージャであるため、count にアクセスでき、count の値は (参照がある限り) メモリに長期間保存されます

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

ステップ 4:一般的なメソッド:

つまり、このメソッドはインスタンス化されるすべての携帯電話オブジェクトで使用できます。ここで、携帯電話は価格、色、サイズを変更できる必要があり、サイズ、色を表示することもできます。 、そして価格。

ここでの共通メソッドは「プロトタイプ オブジェクト」に配置する必要があります:

1. このコンストラクターによってインスタンス化されたすべてのオブジェクト、つまり作成された携帯電話は、「プロトタイプ オブジェクト」内のメソッドを使用できます。

2. コンストラクターに配置すると、携帯電話オブジェクトがインスタンス化されるたびに、多数の繰り返しメソッドが生成され、メモリを占有します。

3. "constructor":creatphone の説明:

creatphone.prototype = {...} は前のプロトタイプ オブジェクトへの参照を完全に上書きするためです。プロトタイプ オブジェクトをコンストラクターに関連付けるには、属性 "constructor":creatphone が設定されます。

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

ステップ 5: 特権メソッド、つまり、プライベート変数にアクセスできるメソッドが必要です。クラス。インスタンスからどれだけの携帯電話オブジェクトが出てくるか

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

上でカプセル化された携帯電話クラスを使用してテストしてください

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

以上がJavascriptカプセル化携帯電話クラス関数コード例の詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。