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關鍵字。因為在調用構造函數時已經創建了對象,而在函數內部只能用this來訪問對象屬性。
現在用new來創建對象,看起來像那麼回事了!但是它同工廠方式一樣。每次調用都會為對象創建自己的方法。
3、原型方式
該方式利用了對象的prototype屬性。首先用空函數創建類名,然後所有的屬性和方法都被賦予prototype屬性。
復制代碼 代碼如下:
function 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中也可以看到。
聯合是用構造函數/原型方式就可以像其他程序設計語言一樣創建對象,是用構造函數定義對象的非函數屬性,用原型方式定義對象的方法。
復制代碼 代碼如下:
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
4、動態原型方式
動態原型的方式同混合的構造函數/原型方式原理相似。唯一的區別就是賦予對象方法的位置。
復制代碼 代碼如下:
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運算符。
PS(個人理解):
1) 類通過prototype定義的成員(方法或屬性),是每個類對象共有的,一般不用來定義成員屬性,一個對象修改了屬性值,所有對象均被修改;
2) 類擁有prototype屬性,類對象沒有;
3) 每次new類對象或直接調用類(以下工廠方法形式),都會把定義類(function)的語句執行一次(單例模式可以避免這個情況);
4) 類是function類型,類對象是object類型,只有function類型才prototype屬性;
5) prototype定義的方法訪問不到類的私有變量(類定義的局部變量),但可以通過this訪問類的成員屬性和成員方法(this定義的變量和方法);
6) 定義類的方式:
a.工廠方式(Object)
b.繼承方式(prototype)
c.構造函數方式(this)
d.混合方式
7) [問題]為什麼通過prototype定義的屬性可以通過任意對象來改變?而構造函數方式定義的屬性只屬於對象,不會影響其它對象的屬性值?
以上就是全部的創建對象方法。目前使用最廣泛的就是混合構造函數/原型方式,此外,動態原型方式也很流行。在功能上與構造函數/原型方式等價。