javascript 對象定義方法 簡單易學(xué)
更新時間:2009年03月22日 01:59:31 作者:
工廠模式 初級開發(fā)者可能會這樣定義對象
工廠模式:
初級開發(fā)者可能會這樣定義對象:
var obj = new Object();
obj.name = "hero";
obj.showName=function (){alert(this.name);}
這里存在一個問題就是如果我們要在多個地方用obj對象,可能在程序中類似的代碼要寫好多遍,于是產(chǎn)生了工廠方法
function createObj()
{
var obj = new Object();
obj.name="hero";
obj.showName=function (){alert(this.name);}
return obj;
}
var obj1 = createObj();
var obj2 = createObj();
和另外一種方法 構(gòu)造函數(shù)法
function obj (name)
{
this.name=name;
this.showName= function (){alert(this.name);}
}
把生成對象的代碼封裝起來,避免出現(xiàn)重復(fù)new的代碼,當(dāng)然也可以進(jìn)一步改進(jìn),就是createObj傳遞一些參數(shù),而不是給obj賦默認(rèn)固定值:
function createObj(name)
{
var obj = new Object();
obj.name=name;
obj.showName=function (){alert(this.name);}
return obj;
}
var obj1 = createObj("hero");
var o'b'j2=createObj("dby");
但是存在一個問題,就是我們每次調(diào)用createObj函數(shù)都會創(chuàng)建新的函數(shù) showName.意味著每個對象都有自己版本的showName,所以要改進(jìn)避開這個問題.
function showName()
{
alert(this.name)
}
function createObj(name)
{
var obj = new Object();
obj.name=name;
obj.showName=showName;
return obj;
}
這樣就解決了 重復(fù)創(chuàng)建函數(shù)的問題, 哈哈哈,大功告成 .
原型方式:
主要是利用對象的prototype屬性.
function obj()
{}
obj.prototype.name="hero";
obj.prototype.showName=function()
{
alert(this.name);
}
看起來似乎比剛才的工廠還完美,但是 有一個問題,該函數(shù)沒有構(gòu)造函數(shù),屬性是通過prototype指定的,這一點在實際應(yīng)用中很讓人頭疼,所有的實例的屬性都一樣實在是不能讓人接受.尤其還存在一個安全隱患,那就是當(dāng)對象中有引用時,例如 加上這樣一段
obj.prototype.nameArray = new Array("hero","dby");
然后
obj1 = new obj();
obj2 = new obj();
obj1.nameArray.push("lxw");
在obj2的nameArray中將也會看到這個屬性,因為兩個對象的nameArray指向的是同一個引用.
所以這種方式并不是理想方法.
需要 改進(jìn)
結(jié)合構(gòu)造函數(shù),在構(gòu)造函數(shù)定義屬性,用原型定義方法
例如
fuction obj(name)
{
this.name = name
this.nameArray = new Array("hero","dby");
}
obj.prototype.showName = function(){alert(this.name)}
所有的非函數(shù)屬性都在構(gòu)造函數(shù)里創(chuàng)建,函數(shù)屬性用prototype方式創(chuàng)建,obj1 中改變nameArray的值,不會影響到obj2對象的nameArray的值, 而且只有一個showName函數(shù),所以沒有內(nèi)存浪費.
基本上完美了,剩下的基本都是一下其他的修飾了.有興趣的可以自己改著玩玩.
筆者在這里加上一個單例 玩了一下:
function obj (name)
{
this.name = name;
this.nameArray=new Array("hero","dby");
if(typeof obj._initialized=='undefined')
{
obj.prototype.showName=function(){alert(this.name);}
obj._initialized="true";
}
}
其實不算是單例, 只不過是在構(gòu)造對象的時候,先判斷一個屬性是否被定義,如果沒有定義,那么用原型方法繼續(xù)定義對象,如果已經(jīng)定義了屬性,那么就不在重復(fù)定義函數(shù)了. 該prototype方法只被創(chuàng)建一次,病賦值一次.
又差不多完美了,大功告成 .
這是個人的理解,,希望對大家有幫助,不完善的地方請qq聯(lián)系,及時改正。
這是一個完整的實例:
function Rectangle(name,color,width,heigth){
this.name=name;
this.color=color;
this.width=width;
this.heigth=heigth;
}
Rectangle.prototype.area=function(){
return this.width*this.heigth
}
Rectangle.prototype.show=function(){
document.write(this.name+" "+this.color+" "+this.width+" "+this.heigth+"<br/>");
document.write(this.area());
}
var obj1= new Rectangle("Rectangle","red",15,20);
obj1.show();
初級開發(fā)者可能會這樣定義對象:
var obj = new Object();
obj.name = "hero";
obj.showName=function (){alert(this.name);}
這里存在一個問題就是如果我們要在多個地方用obj對象,可能在程序中類似的代碼要寫好多遍,于是產(chǎn)生了工廠方法
function createObj()
{
var obj = new Object();
obj.name="hero";
obj.showName=function (){alert(this.name);}
return obj;
}
var obj1 = createObj();
var obj2 = createObj();
和另外一種方法 構(gòu)造函數(shù)法
function obj (name)
{
this.name=name;
this.showName= function (){alert(this.name);}
}
把生成對象的代碼封裝起來,避免出現(xiàn)重復(fù)new的代碼,當(dāng)然也可以進(jìn)一步改進(jìn),就是createObj傳遞一些參數(shù),而不是給obj賦默認(rèn)固定值:
function createObj(name)
{
var obj = new Object();
obj.name=name;
obj.showName=function (){alert(this.name);}
return obj;
}
var obj1 = createObj("hero");
var o'b'j2=createObj("dby");
但是存在一個問題,就是我們每次調(diào)用createObj函數(shù)都會創(chuàng)建新的函數(shù) showName.意味著每個對象都有自己版本的showName,所以要改進(jìn)避開這個問題.
function showName()
{
alert(this.name)
}
function createObj(name)
{
var obj = new Object();
obj.name=name;
obj.showName=showName;
return obj;
}
這樣就解決了 重復(fù)創(chuàng)建函數(shù)的問題, 哈哈哈,大功告成 .
原型方式:
主要是利用對象的prototype屬性.
function obj()
{}
obj.prototype.name="hero";
obj.prototype.showName=function()
{
alert(this.name);
}
看起來似乎比剛才的工廠還完美,但是 有一個問題,該函數(shù)沒有構(gòu)造函數(shù),屬性是通過prototype指定的,這一點在實際應(yīng)用中很讓人頭疼,所有的實例的屬性都一樣實在是不能讓人接受.尤其還存在一個安全隱患,那就是當(dāng)對象中有引用時,例如 加上這樣一段
obj.prototype.nameArray = new Array("hero","dby");
然后
obj1 = new obj();
obj2 = new obj();
obj1.nameArray.push("lxw");
在obj2的nameArray中將也會看到這個屬性,因為兩個對象的nameArray指向的是同一個引用.
所以這種方式并不是理想方法.
需要 改進(jìn)
結(jié)合構(gòu)造函數(shù),在構(gòu)造函數(shù)定義屬性,用原型定義方法
例如
fuction obj(name)
{
this.name = name
this.nameArray = new Array("hero","dby");
}
obj.prototype.showName = function(){alert(this.name)}
所有的非函數(shù)屬性都在構(gòu)造函數(shù)里創(chuàng)建,函數(shù)屬性用prototype方式創(chuàng)建,obj1 中改變nameArray的值,不會影響到obj2對象的nameArray的值, 而且只有一個showName函數(shù),所以沒有內(nèi)存浪費.
基本上完美了,剩下的基本都是一下其他的修飾了.有興趣的可以自己改著玩玩.
筆者在這里加上一個單例 玩了一下:
function obj (name)
{
this.name = name;
this.nameArray=new Array("hero","dby");
if(typeof obj._initialized=='undefined')
{
obj.prototype.showName=function(){alert(this.name);}
obj._initialized="true";
}
}
其實不算是單例, 只不過是在構(gòu)造對象的時候,先判斷一個屬性是否被定義,如果沒有定義,那么用原型方法繼續(xù)定義對象,如果已經(jīng)定義了屬性,那么就不在重復(fù)定義函數(shù)了. 該prototype方法只被創(chuàng)建一次,病賦值一次.
又差不多完美了,大功告成 .
這是個人的理解,,希望對大家有幫助,不完善的地方請qq聯(lián)系,及時改正。
這是一個完整的實例:
function Rectangle(name,color,width,heigth){
this.name=name;
this.color=color;
this.width=width;
this.heigth=heigth;
}
Rectangle.prototype.area=function(){
return this.width*this.heigth
}
Rectangle.prototype.show=function(){
document.write(this.name+" "+this.color+" "+this.width+" "+this.heigth+"<br/>");
document.write(this.area());
}
var obj1= new Rectangle("Rectangle","red",15,20);
obj1.show();
您可能感興趣的文章:
- Nodejs學(xué)習(xí)筆記之Global Objects全局對象
- JavaScript中的全局對象介紹
- javascript中全局對象的isNaN()方法使用介紹
- javascript中全局對象的parseInt()方法使用介紹
- 淺析JavaScript中兩種類型的全局對象/函數(shù)
- Javascript 陷阱 window全局對象
- js 多種變量定義(對象直接量,數(shù)組直接量和函數(shù)直接量)
- JS中類或?qū)ο蟮亩x說明
- javascript 對象的定義方法
- Javascript創(chuàng)建自定義對象 創(chuàng)建Object實例添加屬性和方法
- Javascript 中創(chuàng)建自定義對象的方法匯總
- JavaScript定義全局對象的方法示例
相關(guān)文章
javascript最常用與實用的創(chuàng)建類的代碼
組合構(gòu)造函數(shù)模式和原型模式2010-08-08JavaScript 繼承機制的實現(xiàn)(待續(xù))
JavaScript繼承機制的實現(xiàn),后期會有一些補充。2010-05-05改變javascript函數(shù)內(nèi)部this指針指向的三種方法
javascript 的this 值,真的是非常的莫名奇妙。我一直被搞的很頭暈,也許正是這個this,讓大多數(shù)人感覺js 非常的莫名其妙。2010-04-04學(xué)習(xí)面向?qū)ο笾嫦驅(qū)ο蟮男g(shù)語
學(xué)習(xí)面向?qū)ο笾嫦驅(qū)ο蟮男g(shù)語,學(xué)習(xí)面向?qū)ο笤O(shè)計的朋友可以參考下。2010-11-11