javascript 對(duì)象的定義方法
更新時(shí)間:2007年01月10日 00:00:00 作者:
JS中定義類(lèi)的方式有很多種:
1、工廠(chǎng)方式
function Car(){
var ocar = new Object;
ocar.color = "blue";
ocar.doors = 4;
ocar.showColor = function(){
document.write(this.color)
};
return ocar;
}
var car1 = Car();
var car2 = Car();
調(diào)用此函數(shù)時(shí)將創(chuàng)建新對(duì)象,并賦予它所有的屬性和方法。使用此函數(shù)可以創(chuàng)建2個(gè)屬性完全相同的對(duì)象。當(dāng)然我妹可以通過(guò)給它傳遞參數(shù)來(lái)改版這種方式。
function Car(color,door){
var ocar = new Object;
ocar.color = color;
ocar.doors = door;
ocar.showColor = function(){
document.write(this.color)
};
return ocar;
}
var car1 = Car("red",4);
var car2 = Car("blue",4);
car1.showColor() //output:"red"
car2.showColor() //output:"blue"
現(xiàn)在可以通過(guò)給函數(shù)傳遞不同的參數(shù)來(lái)得到具有不同值的對(duì)象。
在前面的例子中,每次調(diào)用函數(shù)Car(),都要?jiǎng)?chuàng)建showcolor(),意味著每個(gè)對(duì)象都有一個(gè)自己的showcolor()方法。
但是事實(shí)上,每個(gè)對(duì)象斗共享了同一個(gè)函數(shù)。
雖然可以在函數(shù)外定義方法,然后通過(guò)將函數(shù)的屬性指向該方法。
function showColor(){
alert(this.color);
}
function Car(){
var ocar = new Object();
ocar.color = color;
ocar.doors = door;
ocar.showColor = showColor;
return ocar;
}
但是這樣看起來(lái)不像是函數(shù)的方法。
2、構(gòu)造函數(shù)方式
構(gòu)造函數(shù)方式同工廠(chǎng)方式一樣簡(jiǎn)單,如下所示:
function Car(color,door){
this.color = color;
this.doors = door;
this.showColor = function(){
alert(this.color)
};
}
var car1 = new Car("red",4);
var car2 = new Car("blue",4);
可以看到構(gòu)造函數(shù)方式在函數(shù)內(nèi)部沒(méi)有創(chuàng)建對(duì)象,是用this關(guān)鍵字。因?yàn)樵谡{(diào)用構(gòu)造函數(shù)時(shí)已經(jīng)創(chuàng)建了對(duì)象,而在函數(shù)內(nèi)部只能用this來(lái)訪(fǎng)問(wèn)對(duì)象屬性。
現(xiàn)在用new來(lái)創(chuàng)建對(duì)象,看起來(lái)像那么回事了!但是它同工廠(chǎng)方式一樣。每次調(diào)用都會(huì)為對(duì)象創(chuàng)建自己的方法。
3、原型方式
該方式利用了對(duì)象的prototype屬性。首先用空函數(shù)創(chuàng)建類(lèi)名,然后所有的屬性和方法都被賦予prototype屬性。
function Car(){
}
Car.prototype.color = "red";
Car.prototype.doors = 4;
Car.prototype.showColor = function(){
alert(this.color);
}
var car1 = new Car();
var car2 = new Car();
在這段代碼中,首先定義了一個(gè)空函數(shù),然后通過(guò)prototype屬性來(lái)定義對(duì)象的屬性。調(diào)用該函數(shù)時(shí),原型的所有屬性都會(huì)立即賦予要?jiǎng)?chuàng)建的對(duì)象,所有該函數(shù)的對(duì)象存放的都是指向showColor()的指針,語(yǔ)法上看起來(lái)都屬于同一個(gè)對(duì)象。
但是這個(gè)函數(shù)沒(méi)有參數(shù),不能通過(guò)傳遞參數(shù)來(lái)初始化屬性,必須要在對(duì)象創(chuàng)建后才能改變屬性的默認(rèn)值。
原型方式有個(gè)很?chē)?yán)重的問(wèn)題就是當(dāng)屬性指向的是對(duì)象時(shí),如數(shù)組。
function Car(){
}
Car.prototype.color = "red";
Car.prototype.doors = 4;
Car.prototype.arr = new Array("a","b");
Car.prototype.showColor = function(){
alert(this.color);
}
var car1 = new Car();
var car2 = new Car();
car1.arr.push("cc");
alert(car1.arr); //output:aa,bb,cc
alert(car2.arr); //output:aa,bb,cc
這里由于數(shù)組的引用值,Car的兩個(gè)對(duì)象指向的都是同一個(gè)數(shù)組,所以當(dāng)在car1添加值后,在car2中也可以看到。
4、混合的構(gòu)造函數(shù)/原型方式
聯(lián)合是用構(gòu)造函數(shù)/原型方式就可以像其他程序設(shè)計(jì)語(yǔ)言一樣創(chuàng)建對(duì)象,是用構(gòu)造函數(shù)定義對(duì)象的非函數(shù)屬性,用原型方式定義對(duì)象的方法。
function Car(color,door){
this.color = color;
this.doors = door;
this.arr = new Array("aa","bb");
}
Car.prototype.showColor(){
alert(this.color);
}
var car1 = new Car("red",4);
var car2 = new Car("blue",4);
car1.arr.push("cc");
alert(car1.arr); //output:aa,bb,cc
alert(car2.arr); //output:aa,bb
5、動(dòng)態(tài)原型方式
動(dòng)態(tài)原型的方式同混合的構(gòu)造函數(shù)/原型方式原理相似。唯一的區(qū)別就是賦予對(duì)象方法的位置。
function Car(color,door){
this.color = color;
this.doors = door;
this.arr = new Array("aa","bb");
if(typeof Car._initialized == "undefined"){
Car.prototype.showColor = function(){
alert(this.color);
};
Car._initialized = true;
}
}
動(dòng)態(tài)原型方式是使用一個(gè)標(biāo)志來(lái)判斷是否已經(jīng)給原型賦予了方法。這樣可以保證該方法只創(chuàng)建一次
6、混合工廠(chǎng)方式
它的目的師創(chuàng)建假構(gòu)造函數(shù),只返回另一種對(duì)象的新實(shí)例。
function Car(){
var ocar = new Object();
ocar.color = "red";
ocar.doors = 4;
ocar.showColor = function(){
alert(this.color)
};
return ocar;
}
與工廠(chǎng)方式所不同的是,這種方式使用new運(yùn)算符。
以上就是全部的創(chuàng)建對(duì)象方法。目前使用最廣泛的就是混合構(gòu)造函數(shù)/原型方式,此外,動(dòng)態(tài)原型方式也很流行。在功能上與構(gòu)造函數(shù)/原型方式等價(jià)。
1、工廠(chǎng)方式
function Car(){
var ocar = new Object;
ocar.color = "blue";
ocar.doors = 4;
ocar.showColor = function(){
document.write(this.color)
};
return ocar;
}
var car1 = Car();
var car2 = Car();
調(diào)用此函數(shù)時(shí)將創(chuàng)建新對(duì)象,并賦予它所有的屬性和方法。使用此函數(shù)可以創(chuàng)建2個(gè)屬性完全相同的對(duì)象。當(dāng)然我妹可以通過(guò)給它傳遞參數(shù)來(lái)改版這種方式。
function Car(color,door){
var ocar = new Object;
ocar.color = color;
ocar.doors = door;
ocar.showColor = function(){
document.write(this.color)
};
return ocar;
}
var car1 = Car("red",4);
var car2 = Car("blue",4);
car1.showColor() //output:"red"
car2.showColor() //output:"blue"
現(xiàn)在可以通過(guò)給函數(shù)傳遞不同的參數(shù)來(lái)得到具有不同值的對(duì)象。
在前面的例子中,每次調(diào)用函數(shù)Car(),都要?jiǎng)?chuàng)建showcolor(),意味著每個(gè)對(duì)象都有一個(gè)自己的showcolor()方法。
但是事實(shí)上,每個(gè)對(duì)象斗共享了同一個(gè)函數(shù)。
雖然可以在函數(shù)外定義方法,然后通過(guò)將函數(shù)的屬性指向該方法。
function showColor(){
alert(this.color);
}
function Car(){
var ocar = new Object();
ocar.color = color;
ocar.doors = door;
ocar.showColor = showColor;
return ocar;
}
但是這樣看起來(lái)不像是函數(shù)的方法。
2、構(gòu)造函數(shù)方式
構(gòu)造函數(shù)方式同工廠(chǎng)方式一樣簡(jiǎn)單,如下所示:
function Car(color,door){
this.color = color;
this.doors = door;
this.showColor = function(){
alert(this.color)
};
}
var car1 = new Car("red",4);
var car2 = new Car("blue",4);
可以看到構(gòu)造函數(shù)方式在函數(shù)內(nèi)部沒(méi)有創(chuàng)建對(duì)象,是用this關(guān)鍵字。因?yàn)樵谡{(diào)用構(gòu)造函數(shù)時(shí)已經(jīng)創(chuàng)建了對(duì)象,而在函數(shù)內(nèi)部只能用this來(lái)訪(fǎng)問(wèn)對(duì)象屬性。
現(xiàn)在用new來(lái)創(chuàng)建對(duì)象,看起來(lái)像那么回事了!但是它同工廠(chǎng)方式一樣。每次調(diào)用都會(huì)為對(duì)象創(chuàng)建自己的方法。
3、原型方式
該方式利用了對(duì)象的prototype屬性。首先用空函數(shù)創(chuàng)建類(lèi)名,然后所有的屬性和方法都被賦予prototype屬性。
function Car(){
}
Car.prototype.color = "red";
Car.prototype.doors = 4;
Car.prototype.showColor = function(){
alert(this.color);
}
var car1 = new Car();
var car2 = new Car();
在這段代碼中,首先定義了一個(gè)空函數(shù),然后通過(guò)prototype屬性來(lái)定義對(duì)象的屬性。調(diào)用該函數(shù)時(shí),原型的所有屬性都會(huì)立即賦予要?jiǎng)?chuàng)建的對(duì)象,所有該函數(shù)的對(duì)象存放的都是指向showColor()的指針,語(yǔ)法上看起來(lái)都屬于同一個(gè)對(duì)象。
但是這個(gè)函數(shù)沒(méi)有參數(shù),不能通過(guò)傳遞參數(shù)來(lái)初始化屬性,必須要在對(duì)象創(chuàng)建后才能改變屬性的默認(rèn)值。
原型方式有個(gè)很?chē)?yán)重的問(wèn)題就是當(dāng)屬性指向的是對(duì)象時(shí),如數(shù)組。
function Car(){
}
Car.prototype.color = "red";
Car.prototype.doors = 4;
Car.prototype.arr = new Array("a","b");
Car.prototype.showColor = function(){
alert(this.color);
}
var car1 = new Car();
var car2 = new Car();
car1.arr.push("cc");
alert(car1.arr); //output:aa,bb,cc
alert(car2.arr); //output:aa,bb,cc
這里由于數(shù)組的引用值,Car的兩個(gè)對(duì)象指向的都是同一個(gè)數(shù)組,所以當(dāng)在car1添加值后,在car2中也可以看到。
4、混合的構(gòu)造函數(shù)/原型方式
聯(lián)合是用構(gòu)造函數(shù)/原型方式就可以像其他程序設(shè)計(jì)語(yǔ)言一樣創(chuàng)建對(duì)象,是用構(gòu)造函數(shù)定義對(duì)象的非函數(shù)屬性,用原型方式定義對(duì)象的方法。
function Car(color,door){
this.color = color;
this.doors = door;
this.arr = new Array("aa","bb");
}
Car.prototype.showColor(){
alert(this.color);
}
var car1 = new Car("red",4);
var car2 = new Car("blue",4);
car1.arr.push("cc");
alert(car1.arr); //output:aa,bb,cc
alert(car2.arr); //output:aa,bb
5、動(dòng)態(tài)原型方式
動(dòng)態(tài)原型的方式同混合的構(gòu)造函數(shù)/原型方式原理相似。唯一的區(qū)別就是賦予對(duì)象方法的位置。
function Car(color,door){
this.color = color;
this.doors = door;
this.arr = new Array("aa","bb");
if(typeof Car._initialized == "undefined"){
Car.prototype.showColor = function(){
alert(this.color);
};
Car._initialized = true;
}
}
動(dòng)態(tài)原型方式是使用一個(gè)標(biāo)志來(lái)判斷是否已經(jīng)給原型賦予了方法。這樣可以保證該方法只創(chuàng)建一次
6、混合工廠(chǎng)方式
它的目的師創(chuàng)建假構(gòu)造函數(shù),只返回另一種對(duì)象的新實(shí)例。
function Car(){
var ocar = new Object();
ocar.color = "red";
ocar.doors = 4;
ocar.showColor = function(){
alert(this.color)
};
return ocar;
}
與工廠(chǎng)方式所不同的是,這種方式使用new運(yùn)算符。
以上就是全部的創(chuàng)建對(duì)象方法。目前使用最廣泛的就是混合構(gòu)造函數(shù)/原型方式,此外,動(dòng)態(tài)原型方式也很流行。在功能上與構(gòu)造函數(shù)/原型方式等價(jià)。
您可能感興趣的文章:
- Nodejs學(xué)習(xí)筆記之Global Objects全局對(duì)象
- JavaScript中的全局對(duì)象介紹
- javascript中全局對(duì)象的isNaN()方法使用介紹
- javascript中全局對(duì)象的parseInt()方法使用介紹
- 淺析JavaScript中兩種類(lèi)型的全局對(duì)象/函數(shù)
- Javascript 陷阱 window全局對(duì)象
- js 多種變量定義(對(duì)象直接量,數(shù)組直接量和函數(shù)直接量)
- JS中類(lèi)或?qū)ο蟮亩x說(shuō)明
- Javascript創(chuàng)建自定義對(duì)象 創(chuàng)建Object實(shí)例添加屬性和方法
- javascript 對(duì)象定義方法 簡(jiǎn)單易學(xué)
- Javascript 中創(chuàng)建自定義對(duì)象的方法匯總
- JavaScript定義全局對(duì)象的方法示例
相關(guān)文章
js 兩數(shù)組去除重復(fù)數(shù)值的實(shí)例
下面小編就為大家分享一篇js 兩數(shù)組去除重復(fù)數(shù)值的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-12-12淺談JavaScript find 方法不支持IE的問(wèn)題
下面小編就為大家?guī)?lái)一篇淺談JavaScript find 方法不支持IE的問(wèn)題。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09微信小程序項(xiàng)目總結(jié)之記賬小程序功能的實(shí)現(xiàn)(包括后端)
這篇文章主要介紹了微信小程序項(xiàng)目總結(jié)之記賬小程序功能的實(shí)現(xiàn)方法(包括后端),需要的朋友可以參考下2019-08-08JavaScript實(shí)現(xiàn)獲取select下拉框中第一個(gè)值的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)獲取select下拉框中第一個(gè)值的方法,涉及javascript針對(duì)頁(yè)面元素屬性的相關(guān)獲取操作技巧,需要的朋友可以參考下2018-02-02uniapp使用H5調(diào)試時(shí)跨域問(wèn)題解決
本文主要介紹了uniapp使用H5調(diào)試時(shí)跨域問(wèn)題解決,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07發(fā)布一個(gè)高效的JavaScript分析、壓縮工具 JavaScript Analyser
發(fā)布一個(gè)高效的JavaScript分析、壓縮工具 JavaScript Analyser...2007-11-11