javascript 對象的定義方法

來源:互聯網
上載者:User

JS中定義類的方式有很多種:
1、工廠方式

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

調用此函數時將建立新對象,並賦予它所有的屬性和方法。使用此函數可以建立2個屬性完全相同的對象。當然我妹可以通過給它傳遞參數來改版這種方式。

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"

現在可以通過給函數傳遞不同的參數來得到具有不同值的對象。

在前面的例子中,每次調用函數Car(),都要建立showcolor(),意味著每個對象都有一個自己的showcolor()方法。
但是事實上,每個對象鬥共用了同一個函數。

雖然可以在函數外定義方法,然後通過將函數的屬性指向該方法。

function showColor(){
alert(this.color);
}

function Car(){
var ocar = new Object();
ocar.color = color;
ocar.doors = door;
ocar.showColor = showColor;
return ocar;
}

但是這樣看起來不像是函數的方法。

2、建構函式方式

建構函式方式同工廠方式一樣簡單,如下所示:

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

可以看到建構函式方式在函數內部沒有建立對象,是用this關鍵字。因為在調用建構函式時已經建立了對象,而在函數內部只能用this來訪問對象屬性。

現在用new來建立對象,看起來像那麼回事了!但是它同工廠方式一樣。每次調用都會為對象建立自己的方法。

3、原型方式

該方式利用了對象的prototype屬性。首先用空函數建立類名,然後所有的屬性和方法都被賦予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();

在這段代碼中,首先定義了一個空函數,然後通過prototype屬性來定義對象的屬性。調用該函數時,原型的所有屬性都會立即賦予要建立的對象,所有該函數的對象存放的都是指向showColor()的指標,文法上看起來都屬於同一個對象。

但是這個函數沒有參數,不能通過傳遞參數來初始化屬性,必須要在對象建立後才能改變屬性的預設值。

原型方式有個很嚴重的問題就是當屬性指向的是對象時,如數組。

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

這裡由於數組的引用值,Car的兩個對象指向的都是同一個數組,所以當在car1添加值後,在car2中也可以看到。

4、混合的建構函式/原型方式

聯合是用建構函式/原型方式就可以像其他程式設計語言一樣建立對象,是用建構函式定義對象的非函數屬性,用原型方式定義對象的方法。

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、動態原型方式

動態原型的方式同混合的建構函式/原型方式原理相似。唯一的區別就是賦予對象方法的位置。

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

動態原型方式是使用一個標誌來判斷是否已經給原型賦予了方法。這樣可以保證該方法只建立一次

6、混合工廠方式

它的目的師建立假建構函式,只返回另一種對象的新執行個體。

function Car(){
var ocar = new Object();
ocar.color = "red";
ocar.doors = 4;
ocar.showColor = function(){
alert(this.color)
};
return ocar;
}

與工廠方式所不同的是,這種方式使用new運算子。

以上就是全部的建立對象方法。目前使用最廣泛的就是混合建構函式/原型方式,此外,動態原型方式也很流行。在功能上與建構函式/原型方式等價。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.