快捷導(dǎo)航

Javascript 面向?qū)ο螅ǘ┓庋b代碼

更新時(shí)間：2012年05月23日 17:27:14 作者：

寫(xiě)個(gè)小例子：

第一步:做一個(gè)“手機(jī)的類(lèi)"

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

第二步：考慮這個(gè)類(lèi)，里需要那些類(lèi)的私有屬性，這里我想定義的是實(shí)例出來(lái)手機(jī)的數(shù)量

復(fù)制代碼代碼如下:

 
var MobilePhone = (function(){ 
//私有屬性 
var count = 0; //代表手機(jī)的數(shù)量 
})() 

第三步：創(chuàng)建一個(gè)構(gòu)造函數(shù)，即實(shí)例時(shí)候，對(duì)產(chǎn)生的新象的一個(gè)初始化，例如屬性，方法的初始化;在這個(gè)例子中，每一個(gè)手機(jī)都會(huì)有顏色，大小，價(jià)格屬性.這里的構(gòu)造函數(shù)也是一個(gè)閉包，所以可以訪問(wèn)count，并且count的值會(huì)長(zhǎng)期保存在內(nèi)存中（只要有引用存在）

復(fù)制代碼代碼如下:

 
var MobilePhone = (function(){ 
//私有屬性 
var count = 0; //代表手機(jī)的數(shù)量 
　　　　 
　　　　//構(gòu)造函數(shù) 
　　　　var creatphone = function(color,size,price){ 
　　　　　　　　count++; 
　　　　　　　　this._color = color; //手機(jī)的顏色 
　　　　　　　　this._size = size; //手機(jī)的大小 
　　　　　　　　this._price = price; //手機(jī)的價(jià)格 
　　　　　　　　this.index = count; //手機(jī)索引，是第幾臺(tái)創(chuàng)建的手機(jī)手象 
　　　　　} 
})() 

第四步：共有方法：
即所有實(shí)例出來(lái)的手機(jī)對(duì)象，都能使用的方法，這里手機(jī)應(yīng)該可以改變價(jià)格，顏色，大小，也可以顯示大小，顏色，價(jià)格。
這里的共有方法應(yīng)該放在“原型對(duì)象”中：
1.所有通過(guò)該構(gòu)造函數(shù)實(shí)例的對(duì)象，也就是造出的手機(jī)，都能使用“原型對(duì)象”中的方法。
2.如果放在構(gòu)造函數(shù)中，那么每一次實(shí)例一個(gè)手機(jī)對(duì)象出來(lái)，都會(huì)產(chǎn)生一堆重復(fù)的方法，占用內(nèi)存。
3."constructor":creatphone解釋?zhuān)?
因?yàn)閏reatphone.prototype ={……}相當(dāng)對(duì)把之前的原型對(duì)象的引用，給復(fù)蓋掉了。而為了讓原型對(duì)象和該構(gòu)造函數(shù)關(guān)聯(lián)起來(lái) 設(shè)置了"constructor":creatphone,這個(gè)屬性.

復(fù)制代碼代碼如下:

 
var MobilePhone = (function(){ 
//私有屬性 
var count = 0;//代表手機(jī)的數(shù)量 
　　　　//構(gòu)造函數(shù) 
　　　　 var creatphone = function(color,size,price){ 
　　　　　　　　count++; 
　　　　　　　　this._color = color; //手機(jī)的顏色 
　　　　　　　　this._size = size; //手機(jī)的大小 
　　　　　　　　this._price = price; //手機(jī)的價(jià)格 
　　　　　　　　this.index = count; //手機(jī)索引，是第幾臺(tái)創(chuàng)建的手機(jī)手象 
　 　　　　} 
//公有方法，存放在原型對(duì)象中 
creatphone.prototype = { 
　　　　　　"constructor":creatphone, 
　　　　　　//獲取手機(jī)顏色 
"getColor" : function(){ 
return this._color; 
}, 
　　　　　　//設(shè)置手機(jī)顏色 
"setColor" : function(color){ 
this._color = color; 
}, 
　　　　　　//獲取手機(jī)大小 
"getSize" : function(){ 
return "width:"+this._size.width + " height:" + this._size.height; 
}, 
　　　　　　//設(shè)置手機(jī)大小 
"setSize" : function(size){ 
this._size.width = size.width; 
this._size.height = size.height; 
}, 
　　　　　　//獲取手機(jī)價(jià)格 
"getPrice" : function(){ 
return this._price; 
}, 
　　　　　　//設(shè)置手機(jī)價(jià)格 
"setPrice" : function(price){ 
this._price = price 
} 
} 
})() 

第五步：特權(quán)方法，即需要有一個(gè)方法，能夠去訪問(wèn)類(lèi)的私有變量。就是實(shí)例出來(lái)多少臺(tái)手機(jī)對(duì)象

復(fù)制代碼代碼如下:

 
var MobilePhone = (function(){ 
//私有屬性 
var count = 0;//代表手機(jī)的數(shù)量 
var index = 0;//代表手機(jī)的索引 
　　　　//構(gòu)造函數(shù) 
　　　　var creatphone = function(color,size,price){ 
　　　　　　　　count++; 
　　　　　　　　this._color = color; //手機(jī)的顏色 
　　　　　　　　this._size = size; //手機(jī)的大小 
　　　　　　　　this._price = price; //手機(jī)的價(jià)格 
　　　　　　　　this.index = count; //手機(jī)索引，是第幾臺(tái)創(chuàng)建的手機(jī)手象 
　　　　　　}　　　　　//公有方法，存放在原型對(duì)象中 
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 
} 
} 
//特權(quán)方法 
creatphone.get_count_index = function(){ 
return count 
} 
return creatphone; 
})() 

用上面封裝的一個(gè)手機(jī)類(lèi) 測(cè)試

復(fù)制代碼代碼如下:

 
var anycall = new MobilePhone(); //實(shí)例一個(gè)三星手機(jī)對(duì)象 
var HTC = new MobilePhone(); //實(shí)例一個(gè)HTC手機(jī)對(duì)象 
var Iphone4s = new MobilePhone(); //實(shí)例一個(gè)蘋(píng)果4S手機(jī)對(duì)象 
console.log("三星是第："+anycall.index+"臺(tái)"); //FF的控制臺(tái)輸出三星手機(jī)對(duì)象是第幾臺(tái)創(chuàng)建的，即索引； 
console.log("HTC是第："+HTC.index+"臺(tái)"); //FF的控制臺(tái)輸出HTC手機(jī)對(duì)象是第幾臺(tái)創(chuàng)建的，即索引； 
console.log("Iphone4s是第："+Iphone4s.index+"臺(tái)"); //FF的控制臺(tái)輸出個(gè)蘋(píng)果4S手機(jī)對(duì)象是第幾臺(tái)創(chuàng)建的，即索引； 
console.log("總共造出了"+MobilePhone.get_count_index()+"手機(jī)"); //FF的控制臺(tái)輸出總共創(chuàng)建了幾臺(tái)手機(jī)； 
console.log(anycall.constructor === MobilePhone); //實(shí)例出來(lái)的對(duì)象，的原形象中的constructor，是否還指向MobilePhone 

結(jié)果如下，全完正確：

您可能感興趣的文章:

面向?qū)ο?/a>

封裝

相關(guān)文章

js面向?qū)ο笤O(shè)計(jì)用{}好還是function(){}好(構(gòu)造函數(shù))
js面向?qū)ο笤O(shè)計(jì)用{}好還是function(){}好,大家給予了回復(fù)，感覺(jué)不錯(cuò)，特分享給大家。
2011-10-10
在面向?qū)ο缶幊陶Z(yǔ)言中，對(duì)于this關(guān)鍵字我們是非常熟悉的。比如C++、C#和Java等都提供了這個(gè)關(guān)鍵字
2009-03-03

javascript 寫(xiě)類(lèi)方式之五

用構(gòu)造函數(shù)+原型定義一個(gè)類(lèi)；同一構(gòu)造函數(shù)可以定義出多個(gè)類(lèi)型

2009-07-07

JavaScript 類(lèi)的定義和引用 JavaScript高級(jí)培訓(xùn) 自定義對(duì)象

在Java語(yǔ)言中，我們可以定義自己的類(lèi)，并根據(jù)這些類(lèi)創(chuàng)建對(duì)象來(lái)使用，在Javascript中，我們也可以定義自己的類(lèi)，例如定義User類(lèi)、Hashtable類(lèi)等等。

2010-04-04

JavaScript 類(lèi)型的包裝對(duì)象(Typed Wrappers)

JavaScript 有一套類(lèi)型的包裝對(duì)象,需要的朋友可以參考下。

2011-10-10

JavaScript 繼承使用分析

繼承,通俗地說(shuō),之前你寫(xiě)過(guò)一些類(lèi),這些類(lèi)中有一些是而你現(xiàn)在要寫(xiě)的類(lèi)的功能的子集或者基本相同,那么你不用完全重新寫(xiě)一個(gè)新的類(lèi),你可以把之前寫(xiě)的類(lèi)拿過(guò)來(lái)使用.這樣的一種代碼重用過(guò)程就叫做繼承