ホームページ  >  記事  >  ウェブフロントエンド  >  Javascriptオブジェクト指向(2)のカプセル化コード

Javascriptオブジェクト指向(2)のカプセル化コード

高洛峰
高洛峰オリジナル
2017-01-04 09:22:261072ブラウズ

小さな例を書いてみましょう:

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

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

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

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

ステップ 3: コンストラクターを作成します。これは、インスタンス中に生成される新しいオブジェクトの初期化です。この例では、各携帯電話には色、サイズ、価格の属性があります。コンストラクターもクロージャであるため、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 面向对象(二)封装代码

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。