javaScript中定義類或對象的五種方式總結
第一種方式: 工廠方法
能創(chuàng)建并返回特定類型的對象的工廠函數(factory function)。
function createCar(sColor){ var oTempCar = new Object; oTempCar.color = sColor; oTempCar.showColor = function (){ alert(this.color); }; return oTempCar; } var oCar1 = createCar(); var oCar2 = createCar();
調用此函數時,將創(chuàng)建新對象,并賦予它所有必要的屬性。使用此方法將創(chuàng)建car對象的兩個版本(oCar1和oCar2),他們的屬性完全一樣。
使用此方法存在的問題:
1語義上看起來不像使用帶有構造函數的new運算符那么正規(guī)。
2使用這種方式必須創(chuàng)建對象的方法。每次調用createCar(),都要創(chuàng)建showColor(),意味著每個對象都有自己的showColor()版本,事實上,每個對象都共享了同一個函數。
有些開發(fā)者在工廠函數外定義對象的方法,然后通過屬性指向該方法。從而避免這個問題:
function createCar(sColor){ var oTempCar = new Object; oTempCar.color = sColor; oTempCar.showColor = showColor; return oTempCar; } function showColor(){ alert(this.color); }
在這段重寫的代碼中,在函數createCar()前定義了函數showColor().在createCar()內部,賦予對象一個已經指向已經存在的showColor()函數的指針。從功能上來講,這樣解決了重復創(chuàng)建對象的問題,但該函數看起來不像對象的方法。
所有這些問題引發(fā)了開發(fā)者定義的構造函數的出現。
第二種方式:構造函數方式
function Car(sColor){ this.color = sColor; this.showColor = function (){ alert(this.color); }; } var oCar1 = new Car("red"); var oCar2 = new Car("blue");
這種方式在管理函數方面與工廠方法一樣都存在相同的問題。
第三種方式:原型方式
function Car(){ } Car.prototype.color = "blue"; var oCar1 = new Car(); var oCar2 = new Car();
調用new Car()時,原型的所有屬性都被立即賦予要創(chuàng)建的對象,意味著所有的Car實例存放的都是指向showColor()函數的指針。從語義上看起來都屬于一個對象,因此解決了前面兩種方式存在的兩個問題。此外使用該方法,還能用instanceof運算符檢查給定變量指向的對象類型。因此,下面的代碼將輸出true:
alert(oCar instanceof Car); //outputs "true"
這個方式看起來很不錯,遺憾的是,它并不盡如人意。
1首先這個構造函數沒有參數。使用原型方式時,不能給構造函數傳遞參數初始化屬性的值,因為car1和car2的屬性都等于“red”。
2真正的問題出現在屬性指向的是對象,而不是函數時。函數共享不會造成任何問題,但是對象卻很少被多個實例共享的。
第四種方式:混合的構造函數/原型方式(推薦)
聯合使用構造函數和原型方式,就可像用其他程序設計語言一樣創(chuàng)建對象。這種概念非常簡單,即用構造函數定義對象的所有非函數屬性,用原型方式定義對象的函數屬性(方法)。
function Car(sColor){ this.color =sColor; this.drivers =new Array("Mike","Sue"); } Car.prototype.showColor = function(){ alert(this.color); } var oCar1 =new Car("red"); var oCar2 =new Car("blue"); oCar1.drivers.push("Matt"); alert(oCar1.drivers); //outputs "Mike,Sue,Matt" alert(oCar1.drivers); //outputs "Mike,Sue"
第五種方式:動態(tài)原型方式(推薦)
對于習慣使用其他語言的開發(fā)者來說,使用混合的構造函數/原型方式感覺不那么和諧。批評混合的構造函數/原型方式的人認為,在構造函數內找屬性,在外部找方法的做法很不合理。所以他們設計了動態(tài)原型方式,以提供更友好的編碼風格。
動態(tài)原型方法的基本想法與混合的構造函數/原型方式相同,即在構造函數內定義非函數屬性,而函數屬性則利用原型屬性定義。唯一的區(qū)別是賦予對象方法的位置。下面是使用動態(tài)原型方法重寫的Car類:
function Car(sColor){ this.color =sColor; this.drivers =new Array("Mike","Sue"); if(typeof Car._initialized == "undefined"){ Car.prototype.showColor = function(){ alert(this.color); } } Car._initialized = true; }
以上這篇javaScript中定義類或對象的五種方式總結就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
通過seajs實現JavaScript的模塊開發(fā)及按模塊加載
seajs實現了JavaScript 的 模塊開發(fā)及按模塊加載。用來解決繁瑣的js命名沖突,文件依賴等問題,其主要目的是令JavaScript開發(fā)模塊化并可以輕松愉悅進行加載。下面我們來一起深入學習下吧2019-06-06