當前位置:
首頁 >
前端技术
> javascript
>内容正文
javascript
JavaScript中对象的构造方法
生活随笔
收集整理的這篇文章主要介紹了
JavaScript中对象的构造方法
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
第一種方式: 工廠方法?
能創建并返回特定類型的對象的工廠函數(factory function)。?
Javascript代碼?function?createCar(sColor){?? ??var?oTempCar?=?new?Object;?? ??oTempCar.color?=?sColor;?? ??oTempCar.showColor?=?function?(){?? ????alert(this.color);?? ??};?? ??return?oTempCar;?? }?? var?oCar1?=?createCar();?? var?oCar2?=?createCar();??
調用此函數時,將創建新對象,并賦予它所有必要的屬性。使用此方法將創建car對象的兩個版本(oCar1和oCar2),他們的屬性完全一樣。?
使用此方法存在的問題:?
1語義上看起來不像使用帶有構造函數的new運算符那么正規。?
2使用這種方式必須創建對象的方法。每次調用createCar(),都要創建showColor(),意味著每個對象都有自己的showColor()版本,事實上,每個對象都共享了同一個函數。?
有些開發者在工廠函數外定義對象的方法,然后通過屬性指向該方法。從而避免這個問題:?
Js代碼?function?createCar(sColor){?? ??var?oTempCar?=?new?Object;?? ??oTempCar.color?=?sColor;?? ??oTempCar.showColor?=?showColor;?? ??return?oTempCar;?? }?? function?showColor(){?? ???alert(this.color);?? }??
在這段重寫的代碼中,在函數createCar()前定義了函數showColor().在createCar()內部,賦予對象一個已經指向已經存在的showColor()函數的指針。從功能上來講,這樣解決了重復創建對象的問題,但該函數看起來不像對象的方法。?
所有這些問題引發了開發者定義的構造函數的出現。?
第二種方式:構造函數方式?
Js代碼?function?Car(sColor){?? ??this.color?=?sColor;?? ??this.showColor?=?function?(){?? ????alert(this.color);?? ??};?? }?? var?oCar1?=?new?Car("red");?? var?oCar2?=?new?Car("blue");??
你可能已經注意到第一個差別了,在構造函數內部無創建對象,而是使用this關鍵字。使用new運算符調用構造函數時,在執行第一行代碼前先創建一個對象,只有用this才能訪問該對象。然后可以直接賦予this屬性,默認情況下是構造函數的返回值(不必明確使用return運算符)。?
這種方式在管理函數方面與工廠方法一樣都存在相同的問題。?
第三種方式:原型方式?
Js代碼?function?Car(){?? ??? }?? Car.prototype.color?=?"blue";?? var?oCar1?=?new?Car();?? var?oCar2?=?new?Car();??
調用new Car()時,原型的所有屬性都被立即賦予要創建的對象,意味著所有的Car實例存放的都是指向showColor()函數的指針。從語義上看起來都屬于一個對象,因此解決了前面兩種方式存在的兩個問題。此外使用該方法,還能用instanceof運算符檢查給定變量指向的對象類型。因此,下面的代碼將輸出true:?
alert(oCar instanceof Car); //outputs "true"?
這個方式看起來很不錯,遺憾的是,它并不盡如人意。?
1首先這個構造函數沒有參數。使用原型方式時,不能給構造函數傳遞參數初始化屬性的值,因為car1和car2的屬性都等于“red”。?
2真正的問題出現在屬性指向的是對象,而不是函數時。函數共享不會造成任何問題,但是對象卻很少被多個實例共享的。?
第四種方式:混合的構造函數/原型方式(推薦)?
聯合使用構造函數和原型方式,就可像用其他程序設計語言一樣創建對象。這種概念非常簡單,即用構造函數定義對象的所有非函數屬性,用原型方式定義對象的函數屬性(方法)。?
Js代碼?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"??
第五種方式:動態原型方式(推薦)?
對于習慣使用其他語言的開發者來說,使用混合的構造函數/原型方式感覺不那么和諧。批評混合的構造函數/原型方式的人認為,在構造函數內找屬性,在外部找方法的做法很不合理。所以他們設計了動態原型方式,以提供更友好的編碼風格。?
動態原型方法的基本想法與混合的構造函數/原型方式相同,即在構造函數內定義非函數屬性,而函數屬性則利用原型屬性定義。唯一的區別是賦予對象方法的位置。下面是使用動態原型方法重寫的Car類:?
Js代碼?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;?? } ?
能創建并返回特定類型的對象的工廠函數(factory function)。?
Javascript代碼?
調用此函數時,將創建新對象,并賦予它所有必要的屬性。使用此方法將創建car對象的兩個版本(oCar1和oCar2),他們的屬性完全一樣。?
使用此方法存在的問題:?
1語義上看起來不像使用帶有構造函數的new運算符那么正規。?
2使用這種方式必須創建對象的方法。每次調用createCar(),都要創建showColor(),意味著每個對象都有自己的showColor()版本,事實上,每個對象都共享了同一個函數。?
有些開發者在工廠函數外定義對象的方法,然后通過屬性指向該方法。從而避免這個問題:?
Js代碼?
在這段重寫的代碼中,在函數createCar()前定義了函數showColor().在createCar()內部,賦予對象一個已經指向已經存在的showColor()函數的指針。從功能上來講,這樣解決了重復創建對象的問題,但該函數看起來不像對象的方法。?
所有這些問題引發了開發者定義的構造函數的出現。?
第二種方式:構造函數方式?
Js代碼?
你可能已經注意到第一個差別了,在構造函數內部無創建對象,而是使用this關鍵字。使用new運算符調用構造函數時,在執行第一行代碼前先創建一個對象,只有用this才能訪問該對象。然后可以直接賦予this屬性,默認情況下是構造函數的返回值(不必明確使用return運算符)。?
這種方式在管理函數方面與工廠方法一樣都存在相同的問題。?
第三種方式:原型方式?
Js代碼?
調用new Car()時,原型的所有屬性都被立即賦予要創建的對象,意味著所有的Car實例存放的都是指向showColor()函數的指針。從語義上看起來都屬于一個對象,因此解決了前面兩種方式存在的兩個問題。此外使用該方法,還能用instanceof運算符檢查給定變量指向的對象類型。因此,下面的代碼將輸出true:?
alert(oCar instanceof Car); //outputs "true"?
這個方式看起來很不錯,遺憾的是,它并不盡如人意。?
1首先這個構造函數沒有參數。使用原型方式時,不能給構造函數傳遞參數初始化屬性的值,因為car1和car2的屬性都等于“red”。?
2真正的問題出現在屬性指向的是對象,而不是函數時。函數共享不會造成任何問題,但是對象卻很少被多個實例共享的。?
第四種方式:混合的構造函數/原型方式(推薦)?
聯合使用構造函數和原型方式,就可像用其他程序設計語言一樣創建對象。這種概念非常簡單,即用構造函數定義對象的所有非函數屬性,用原型方式定義對象的函數屬性(方法)。?
Js代碼?
第五種方式:動態原型方式(推薦)?
對于習慣使用其他語言的開發者來說,使用混合的構造函數/原型方式感覺不那么和諧。批評混合的構造函數/原型方式的人認為,在構造函數內找屬性,在外部找方法的做法很不合理。所以他們設計了動態原型方式,以提供更友好的編碼風格。?
動態原型方法的基本想法與混合的構造函數/原型方式相同,即在構造函數內定義非函數屬性,而函數屬性則利用原型屬性定義。唯一的區別是賦予對象方法的位置。下面是使用動態原型方法重寫的Car類:?
Js代碼?
轉載于:https://www.cnblogs.com/liweiqing/archive/2009/04/20/1440042.html
總結
以上是生活随笔為你收集整理的JavaScript中对象的构造方法的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 使用XMLSerializerNames
- 下一篇: 电脑开机进入桌面很慢的解决办法