下面小編就為大家?guī)?lái)一篇JS定義類(lèi)的六種方式詳解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考

在前端開(kāi)發(fā)中，經(jīng)常需要定義JS類(lèi)。那么在JavaScript中，定義類(lèi)的方式有幾種，分別是什么呢？本文就JS定義類(lèi)的六中方式說(shuō)明如下（案例說(shuō)明）：

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中也可以看到。

聯(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à)。

以上這篇JS定義類(lèi)的六種方式詳解就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考