Javascript對象定義的幾種方式一.工廠方式:先創(chuàng)建對象,再向對象添加方法和屬性,封閉后調用不要使用new操作符創(chuàng)建對象。
使用這種方法有很多弊端,把方法定義在工廠函數(shù)內部的時候,每次調用的時候都會產生新的函數(shù)function factory(name,person,address,time){ var tmp=new Object; tmp.name=name; tmp.person=person; tmp.address=address; tmp.workTime=function(){ alert("we start to work at" + time); } return tmp;}var factory1=factory("drugs",100,"huashan Rd",10);var factory2=factory("TCMdrugs",100,"hongqiao Rd",11);factory1.workTime();factory2.workTime();//Here,factory1 and factory2 have different method對這種問題雖然可以用下面的方式改進,但是缺乏很好的封裝性function factory(name,person,address,time){ var tmp=new Object; tmp.name=name; tmp.person=person; tmp.address=address; tmp.workTime=workTime(); return tmp;}function workTime(){ alert("we start to work at" + this.time);}二,構造函數(shù)方式,在構造函數(shù)內部不創(chuàng)建對象,使用this關鍵字,使用時候用new操作符,存在和工廠方式相同的問題,重復創(chuàng)建函數(shù)。function counstruct(name,person,address,time){ this.name=name; this.person=person; this.address=address; this.workTime=function(){ alert("we start to work at" + this.time); };}三.原型方式:利用prototype屬性來實現(xiàn)屬性和方法,可以通過instanceof 檢查對象類型,解決了重復創(chuàng)建函數(shù)的問題,但不能通過傳遞參數(shù)初始化屬性function Car(){}Car.prototype.color = "red";Car.prototype.doors = 4;Car.prototype.mpg = 23;Car.prototype.showColor = function(){ alert(this.color);};var car1 = new Car();var car2 = new Car();但是如果遇到下面的情況,又出問題了Car.prototype.drivers = new Array("mike", "sue");car1.drivers.push("matt");alert(car1.drivers); //outputs "mike,sue,matt"alert(car2.drivers); //outputs "mike,sue,matt"drivers是指向Array對象的指針,Car的兩個實例都指向同一個數(shù)組。
四.混合的構造函數(shù)/原型方式:針對原型方式的解決方案function Car(sColor, iDoors, iMpg){ this.color = sColor; this.doors = iDoors; this.mpg = iMpg; this.drivers = new Array("mike", "sue");}Car.prototype.showColor = function (){ alert(this.color);};var car1 = new Car("red", 4, 23);var car2 = new Car("blue", 3, 25);car1.drivers.push("matt");alert(car1.drivers);alert(car2.drivers);五.動態(tài)原型方式:這種方式是極力推薦的方式,避免了前面幾種方式所出現(xiàn)的問題,提供了更友好的編碼風格function Car(sColor, iDoors, iMpg){ this.color = sColor; this.doors = iDoors; this.mpg = iMpg; this.drivers = new Array("mike", "sue"); if(typeof Car.initialized == "undefined"){ Car.prototype.showColor = function (){ alert(this.color); }; Car.initialized = true; }}var car1 = new Car("red", 4, 23);var car2 = new Car("blue", 3, 25);car1.drivers.push("matt");alert(car1.drivers);alert(car2.drivers);六.混合工廠方式:和工廠方式有些相似,但采用new關鍵字實例化,具有和工廠方式相同的弊端,不推薦使用。
js中的面向對象面向對象在js里有兩個層次的含義,第一種是會使用面向對象函數(shù);第二種是構造面向對象函數(shù)。
js也是面向對象中的一種寫法,不過相對于java,js是一種弱數(shù)據(jù)類型,并不是嚴格意義上的面向對象。但是jq就是使用面向對象的寫法創(chuàng)作出來的js庫。
面向對象的特點(“抽風機”諧音記憶) 面向對象有四個特點: 1. 抽象:抓住核心問題 2. 封裝:即把能夠實現(xiàn)功能的函數(shù)寫成封裝起來,在面向對象里叫做方法。簡單來說就是把實現(xiàn)功能的函數(shù)寫成方法。
3. 繼承:繼承的意思是,在實現(xiàn)同一種功能的前提下,新對象可以使用就對象的屬性和方法。 4. 多態(tài):一個變量在引用不同類型的情況下的不同狀態(tài)。
多態(tài)開發(fā)在開發(fā)組件和模塊化開發(fā)的時候能節(jié)省很多資源。舉個例子說明面向對象// 這里的函數(shù)名在面向對象里叫做類function Create(n, s){// var obj = new Object();// obj叫做實例,同時也是對象,面向對象寫法中系統(tǒng)會自動創(chuàng)建一個obj空對象// 對象屬性this.name = n; this.sex = s; // this指針,在這里指的就是這個對象// 對象方法this.showName = function(){alert(n);}; this.showSex = function(){alert(s);}; // 返回對象// 同樣,面向對象中系統(tǒng)會自動幫我們返回obj(即this)//return obj;//return this;}原型(prototype)原型可以用來構造函數(shù)的屬性和方法,使這個構造函數(shù)的屬性和方法成為公用的。
使用原型的優(yōu)點:在內存中節(jié)省資源,提高系統(tǒng)性能。下面舉個例子說明原型:Array.prototype.sum = function(){var num = 0; for(var i=0;inum += this[i];}alert(num);};1234567這是一個用原型構造的數(shù)組方法,將求和的sum方法掛在原型上,可以使這個方法被重復使用,當然,重點是節(jié)省內存資源。
使用原型還有一個優(yōu)點,就是優(yōu)先級: 原型的優(yōu)先級類似于CSS中的優(yōu)先級,沒有使用原型的構造函數(shù),就好比CSS中的行內樣式,優(yōu)先級高,而與原型掛鉤的屬性和方法 ,就像是style的內聯(lián)樣式,優(yōu)先級低于行內樣式。所以在調用同一種方法名的時候,系統(tǒng)會優(yōu)先調用掛在原型上的方法。
在JavaScript中定義對象可以采用以下幾種方式: 1.基于已有對象擴充其屬性和方法 2.工廠方式 3.構造函數(shù)方式 4.原型(“prototype”)方式 5.動態(tài)原型方式-- 1.基于已有對象擴充其屬性和方法object.name = "zhangsan";object.sayName = function(name){ this.name = name; alert(this.name);}object.sayName("lisi");-- 2.工廠方式 function createObject() { var object = new Object(); object.username = "zhangsan"; object.password = "123"; object.get = function() { alert(this.username + ", " + this.password); } return object;}var object1 = createObject();var object2 = createObject();object1.get(); -- 采用帶參數(shù)的構造方法:function createObject(username, password){ var object = new Object(); object.username = username; object.password = password; object.get = function() { alert(this.username + ", " + this.password); } return object;}var object1 = createObject("zhangsan", "123");object1.get();。
要解決該問題,開發(fā)者創(chuàng)造了能創(chuàng)建并返回特定類型的對象的工廠函數(shù)(factory function)。
例如,函數(shù) createCar() 可用于封裝前面列出的創(chuàng)建 car 對象的操作:function createCar() { var oTempCar = new Object; oTempCar.color = "blue"; oTempCar.doors = 4; oTempCar.mpg = 25; oTempCar.showColor = function() { alert(this.color); }; return oTempCar;}var oCar1 = createCar();var oCar2 = createCar(); 在這里,第一個例子中的所有代碼都包含在 createCar() 函數(shù)中。此外,還有一行額外的代碼,返回 car 對象(oTempCar)作為函數(shù)值。
調用此函數(shù),將創(chuàng)建新對象,并賦予它所有必要的屬性,復制出一個我們在前面說明過的 car 對象。因此,通過這種方法,我們可以很容易地創(chuàng)建 car 對象的兩個版本(oCar1 和 oCar2),它們的屬性完全一樣。
為函數(shù)傳遞參數(shù)我們還可以修改 createCar() 函數(shù),給它傳遞各個屬性的默認值,而不是簡單地賦予屬性默認值:function createCar(sColor,iDoors,iMpg) { var oTempCar = new Object; oTempCar.color = sColor; oTempCar.doors = iDoors; oTempCar.mpg = iMpg; oTempCar.showColor = function() { alert(this.color); }; return oTempCar;}var oCar1 = createCar("red",4,23);var oCar2 = createCar("blue",3,25);oCar1.showColor(); //輸出 "red"oCar2.showColor(); //輸出 "blue" 給 createCar() 函數(shù)加上參數(shù),即可為要創(chuàng)建的 car 對象的 color、doors 和 mpg 屬性賦值。這使兩個對象具有相同的屬性,卻有不同的屬性值。
在工廠函數(shù)外定義對象的方法雖然 ECMAScript 越來越正式化,但創(chuàng)建對象的方法卻被置之不理,且其規(guī)范化至今還遭人反對。一部分是語義上的原因(它看起來不像使用帶有構造函數(shù) new 運算符那么正規(guī)),一部分是功能上的原因。
功能原因在于用這種方式必須創(chuàng)建對象的方法。前面的例子中,每次調用函數(shù) createCar(),都要創(chuàng)建新函數(shù) showColor(),意味著每個對象都有自己的 showColor() 版本。
而事實上,每個對象都共享同一個函數(shù)。有些開發(fā)者在工廠函數(shù)外定義對象的方法,然后通過屬性指向該方法,從而避免這個問題:function showColor() { alert(this.color);}function createCar(sColor,iDoors,iMpg) { var oTempCar = new Object; oTempCar.color = sColor; oTempCar.doors = iDoors; oTempCar.mpg = iMpg; oTempCar.showColor = showColor; return oTempCar;}var oCar1 = createCar("red",4,23);var oCar2 = createCar("blue",3,25);oCar1.showColor(); //輸出 "red"oCar2.showColor(); //輸出 "blue" 在上面這段重寫的代碼中,在函數(shù) createCar() 之前定義了函數(shù) showColor()。
在 createCar() 內部,賦予對象一個指向已經(jīng)存在的 showColor() 函數(shù)的指針。從功能上講,這樣解決了重復創(chuàng)建函數(shù)對象的問題;但是從語義上講,該函數(shù)不太像是對象的方法。
所有這些問題都引發(fā)了開發(fā)者定義 的構造函數(shù)的出現(xiàn)。構造函數(shù)方式創(chuàng)建構造函數(shù)就像創(chuàng)建工廠函數(shù)一樣容易。
第一步選擇類名,即構造函數(shù)的名字。根據(jù)慣例,這個名字的首字母大寫,以使它與首字母通常是小寫的變量名分開。
除了這點不同,構造函數(shù)看起來很像工廠函數(shù)。請考慮下面的例子:function Car(sColor,iDoors,iMpg) { this.color = sColor; this.doors = iDoors; this.mpg = iMpg; this.showColor = function() { alert(this.color); };}var oCar1 = new Car("red",4,23);var oCar2 = new Car("blue",3,25); 下面為您解釋上面的代碼與工廠方式的差別。
首先在構造函數(shù)內沒有創(chuàng)建對象,而是使用 this 關鍵字。使用 new 運算符構造函數(shù)時,在執(zhí)行第一行代碼前先創(chuàng)建一個對象,只有用 this 才能訪問該對象。
然后可以直接賦予 this 屬性,默認情況下是構造函數(shù)的返回值(不必明確使用 return 運算符)?,F(xiàn)在,用 new 運算符和類名 Car 創(chuàng)建對象,就更像 ECMAScript 中一般對象的創(chuàng)建方式了。
你也許會問,這種方式在管理函數(shù)方面是否存在于前一種方式相同的問題呢?是的。就像工廠函數(shù),構造函數(shù)會重復生成函數(shù),為每個對象都創(chuàng)建獨立的函數(shù)版本。
不過,與工廠函數(shù)相似,也可以用外部函數(shù)重寫構造函數(shù),同樣地,這么做語義上無任何意義。這正是下面要講的原型方式的優(yōu)勢所在。
原型方式該方式利用了對象的 prototype 屬性,可以把它看成創(chuàng)建新對象所依賴的原型。這里,首先用空構造函數(shù)來設置類名。
然后所有的屬性和方法都被直接賦予 prototype 屬性。我們重寫了前面的例子,代碼如下:function Car() {}Car.prototype.color = "blue";Car.prototype.doors = 4;Car.prototype.mpg = 25;Car.prototype.showColor = function() { alert(this.color);};var oCar1 = new Car();var oCar2 = new Car(); 在這段代碼中,首先定義構造函數(shù)(Car),其中無任何代碼。
接下來的幾行代碼,通過給 Car 的 prototype 屬性添加屬性去定義 Car 對象的屬性。調用 new Car() 時,原型的所有屬性都被立即賦予要創(chuàng)建的對象,意味著所有 Car 實例存放的都是指向 showColor() 函數(shù)的指針。
從語義上講,所有屬性看起來都屬于一個對象,因。
JS函數(shù)的定義方式比較靈活,它不同于其他的語言,每個函數(shù)都是作為一個對象被維護和運行的。
先看幾種常用的定義方式:
function func1([參數(shù)]){/*函數(shù)體*/}
var func2=function([參數(shù)]){/*函數(shù)體*/};
var func3=function func4([參數(shù)]){/*函數(shù)體*/};
var func5=new Function();
上述第一種方式是最常用的方式,不用多說。
第二種是將一匿名函數(shù)賦給一個變量,調用方法:func2([函數(shù)]);
第三種是將func4賦給變量func3,調用方法:func3([函數(shù)]);或func4([函數(shù)]);
第四種是聲明func5為一個對象。
再看看它們的區(qū)別:
1234567
function func(){ //函數(shù)體}//等價于var func=function(){ //函數(shù)體}
但同樣是定義函數(shù),在用法上有一定的區(qū)別。
12345678
<script>;//這樣是正確的func(1);function func(a){ alert(a);}</script>
1234567891011121314
<script>;//這樣是錯誤的,會提示func未定義,主要是在調用func之前沒有定義func(1);var func = function(a){ alert(a);}//這樣是正確的,在調用func之前有定義var func = function(a){ alert(a);}func(1);</script>
用同樣的方法可以去理解第三種定義方式。
第四種定義方式也是需要聲明對象后才可以引用。
1.對象字面量。
var clock={ hour:12,minute:10,second:10,showTime:function(){ alert(this.hour+":"+this.minute+":"+this.second); } } clock.showTime();//調用2.創(chuàng)建Object實例 var clock = new Object(); clock.hour=12; clock.minute=10; clock.showHour=function(){alert(clock.hour);}; clock.showHour();//調用 由此可見 屬性是可以動態(tài)添加,修改的 對象創(chuàng)建模式:1.工廠模式:就是一個函數(shù),然后放入?yún)?shù),返回對象,流水線工作 function createClock(hour,minute,second){ var clock = new Object(); clock.hour=hour; clock.minute=minute; clock.second=second; clock.showHour=function(){ alert(this.hour+":"+this.minute+":"+this.second); }; return clock; }; var newClock = createClock(12,12,12);//實例化 newClock.showHour();//調用 優(yōu)點:總算優(yōu)點抽象的概念了。但是不能識別對象的類型呢!2.構造函數(shù)模式 function clock(hour,minute,second){ this.hour = hour; this.minute = minute; this.second = second; this.showTime = function(){ alert(this.hour+":"+this.minute+":"+this.second); } } var newClock =new clock(12,12,12); alert(newClock.hour); 注意:這個new關鍵字是必須,如果不加,clock就不會當成構造函數(shù)調用,而只是一個普通的函數(shù)。
同時,還會意外地給他的外部作用域即window添加屬性,因為此時構造函數(shù)內部的this已經(jīng)映射到了外部作用域了。所以為了安全起見,可以這樣創(chuàng)建 function clock(hour,minute,second){ if(this instanceof clock){ this.hour = hour; this.minute = minute; this.second = second; this.showTime = function(){ alert(this.hour+":"+this.minute+":"+this.second); } } else{ throw new Error("please add 'new' to make a instance"); } } 構造函數(shù)的缺點:由于this指針在對象實例的時候發(fā)生改變指向新的實例。
這時新實例的方法也要重新創(chuàng)建,如果n個實例就要n次重建相同的方法。于是讓來揭開原型模式吧3.原型模式 function clock(hour,minute,second){ } clock.prototype.hour=12; clock.prototype.minute=12; clock.prototype.second=12; clock.prototype.showTime=function(){ alert(this.hour+":"+this.minute+":"+this.second); } var newClock = new clock(); newClock.showTime(); 深度理解原型模型很重要,首先,每個函數(shù)都有一個prototype(原型)屬性,這個指針指向的就是clock.prototype對象。
而這個原型對象在默認的時候有一個屬性constructor,指向clock,這個屬性可讀可寫。而當在實例化一個對象的時候,實例newClock除了具有構造函數(shù)定義的屬性和方法外(注意,只是構造函數(shù)中的),還有一個指向構造函數(shù)的原型的指針,ECMAScript管他叫[[prototype]],這樣實例化對象的時候,原型對象的方法并沒有在某個具體的實例中,因為原型沒有被實例。
(廢話有點多,沒有誤導您吧。別暈) 所以這種模式定義的對象,在調用方法的時候過程:調用newClock.showTime();先看實例中有沒有,有調之,無追蹤到原型,有調之,無出錯,調用失敗。
當然可以這樣寫:function clock(hour,minute,second){ } clock.prototype={ constructor:clock, //必須手動設置這個屬性,不然就斷了與構造函數(shù)的聯(lián)系了。沒有實例共享原型的意義了。
hour:12,minute:12,second:12,showTime:function(){ alert(this.hour+":"+this.minute+":"+this.second) } } var newClock = new clock(); newClock.showTime(); 注意:實例與構造函數(shù)原型的聯(lián)系也是通過指針來聯(lián)系的,故可以動態(tài)添加修改原型的方法。這種純原型的模式問題也很明顯,所有的屬性,方法都是共享的,不能讓對象具體化。
常常想每個對象有自己的屬性。于是,結合前兩種,產生新的模式4.構造-原型組合模式。
function clock(hour,minute,second){ this.hour = hour; this.minute = minute; this.second = second; } clock.prototype.showTime=function(){alert(this.hour+":"+this.minute+":"+this.second);} var newClock = new clock(12,12,12); newClock.showTime(); 這里將屬性放在構造函數(shù)中,更顯得對象的具體性。
可以參考如下內容:第一種模式:工廠方式[javascript] view plain copy print?var lev=function(){ return "啊打"; }; function Parent(){ var Child = new Object(); Child.name="李小龍"; Child.age="30"; Child.lev=lev; return Child; }; var x = Parent(); alert(x.name); alert(x.lev()); 說明:1.在函數(shù)中定義對象,并定義對象的各種屬性,,雖然屬性可以為方法,但是建議將屬性為方法的屬性定義到函數(shù)之外,這樣可以避免重復創(chuàng)建該方法2.引用該對象的時候,這里使用的是 var x = Parent()而不是 var x = new Parent();因為后者會可能出現(xiàn)很多問題(前者也成為工廠經(jīng)典方式,后者稱之為混合工廠方式),不推薦使用new的方式使用該對象3.在函數(shù)的最后返回該對象4.不推薦使用這種方式創(chuàng)建對象,但應該了解第二種模式:構造函數(shù)方式[javascript] view plain copy print?var lev=function(){ return "啊打"; }; function Parent(){ this.name="李小龍"; this.age="30"; this.lev=lev; }; var x =new Parent(); alert(x.name); alert(x.lev()); 說明:1.與工廠方式相比,使用構造函數(shù)方式創(chuàng)建對象,無需再函數(shù)內部重建創(chuàng)建對象,而使用this指代,并而函數(shù)無需明確return2.同工廠模式一樣,雖然屬性的值可以為方法,扔建議將該方法定義在函數(shù)之外3..同樣的,不推薦使用這種方式創(chuàng)建對象,但仍需要了解第3種模式:原型模式[javascript] view plain copy print?var lev=function(){ return "啊打"; }; function Parent(){ }; Parent.prototype.name="李小龍"; Parent.prototype.age="30"; Parent.prototype.lev=lev; var x =new Parent(); alert(x.name); alert(x.lev());。
推薦有一下幾種方式:
1.對象字面量創(chuàng)建對象
var obj = { a:1,b:2 };
注意:對象字面量是一個表達式,這種表達式每次運算都會創(chuàng)建并初始化一個新對象,并計算這個新對象的每個屬性值。所以如果在循環(huán)體內使用對象字面量,每次循環(huán)時都會創(chuàng)建新對象。
2.通過new運算符創(chuàng)建對象
var obj = new Object(); //創(chuàng)建空對象 var ary = new Array(); //創(chuàng)建空的數(shù)組對象
注意:new運算符后面跟的是一個函數(shù)調用,這個函數(shù)被稱為構造函數(shù)。js中原始類型都包含內置的構造函數(shù),也可以自己定義構造函數(shù)。
3.通過立即執(zhí)行函數(shù)創(chuàng)建對象
var obj = (function(){ return {x:1,y:2};}());
注意:在立即執(zhí)行函數(shù)內部一定要有return語句,return出的內容就是待創(chuàng)建的對象。
聲明:本網(wǎng)站尊重并保護知識產權,根據(jù)《信息網(wǎng)絡傳播權保護條例》,如果我們轉載的作品侵犯了您的權利,請在一個月內通知我們,我們會及時刪除。
蜀ICP備2020033479號-4 Copyright ? 2016 學習鳥. 頁面生成時間:3.091秒