Javascript中的對(duì)象和原型(二)
在上篇文章中JavaScript中的對(duì)象和原型(一)提到了JavaScript中對(duì)象的創(chuàng)建的一些基本操作,接下來(lái)討論下繼續(xù)討論。
一 工廠模式
我們知道,要?jiǎng)?chuàng)建一個(gè)對(duì)象我們可以用如下代碼:
var user = new Object(); //使用new運(yùn)算符創(chuàng)建一個(gè)對(duì)象 user.name = '念在三角湖畔'; //給對(duì)象添加屬性 user.age = 22; user.address = '湖北武漢'; alert(user.name + " " +user.age);//返回 '念在三角湖畔 湖北武漢'
用這樣的方法創(chuàng)建對(duì)象比較簡(jiǎn)單直觀,也是JavaScript種創(chuàng)建對(duì)象最基本的方法。但是這樣就有一個(gè)問(wèn)題,如果我們需要?jiǎng)?chuàng)建多個(gè)對(duì)象,那么我就得寫(xiě)很多重復(fù)的代碼。比如我們想創(chuàng)建另一個(gè)對(duì)象user1,我們就得重新將上面的代碼重新寫(xiě)一遍,這在實(shí)際開(kāi)發(fā)過(guò)程中是不合適的,這樣如果對(duì)象過(guò)多,代碼量將大大增加。
為了解決這樣的問(wèn)題,我們可以使用一種叫做工廠模式的方法,這種方法 就是為了解決實(shí)例化對(duì)象產(chǎn)生大量重復(fù)代碼的問(wèn)題。
function create(name, age) {
var obj = new Object();
obj.name = name;
obj.age = age;
obj.run = function () {
return this.name +' '+ this.age;
};
return obj;
}
var obj1= create('ZXC', 10); //第一個(gè)實(shí)例
var obj2= create('CXZ', 20); //第二個(gè)實(shí)例
alert(obj1.run());
alert(obj1.run());
從上面的代碼我們可以看出,工廠模式解決了實(shí)例化時(shí)代碼大量重復(fù)的問(wèn)題,但又出現(xiàn)了一個(gè)問(wèn)題,那就是識(shí)別問(wèn)題,我們根本無(wú)法弄清楚他們到底是哪個(gè)對(duì)象的實(shí)例。比如
alert(typeof obj1); //Object alert(obj1 instanceof Object); //true
以上代碼標(biāo)明box1是Object對(duì)象,但是我們無(wú)法知道具體是哪一個(gè)對(duì)象創(chuàng)建的。
二 構(gòu)造函數(shù)(構(gòu)造方法)
為了解決上面的問(wèn)題,我們可以用構(gòu)造方法去創(chuàng)建對(duì)象。構(gòu)造函數(shù)和普通函數(shù)的唯一區(qū)別,就是調(diào)用的方式不同。但是,構(gòu)造函數(shù)同樣是函 數(shù)。
function User(name, age) { //構(gòu)造函數(shù)模式
this.name = name;
this.age = age;
this.run = function () {
return this.name + ' '+this.age; };
}
創(chuàng)建對(duì)象的時(shí)候用new運(yùn)算符就可以了:
var user1= new User('ZXC', 25);
var user2= new User('CXZ', 22);
現(xiàn)在我們就可以檢測(cè)user1或者user2是不是屬于User。
alert(user1 instanceof User);//true
可見(jiàn),使用構(gòu)造函數(shù)的方法,即解決了重復(fù)實(shí)例化的問(wèn)題,又解決了對(duì)象識(shí)別的問(wèn)題。
使用構(gòu)造函數(shù)時(shí)執(zhí)行的過(guò)程如下:
1.執(zhí)行 new 構(gòu)造函數(shù)()時(shí),后臺(tái)執(zhí)行了 new Object();
2.將構(gòu)造函數(shù)的作用域給新對(duì)象。
3.執(zhí)行構(gòu)造函數(shù)內(nèi)的代碼;
4.后臺(tái)直接返回新對(duì)象。
接下來(lái)我們看看構(gòu)造函數(shù)內(nèi)部的函數(shù)問(wèn)題。如果我們執(zhí)行以下語(yǔ)句:
alert(user1.run==user2.run);//結(jié)果返回的是false
結(jié)果返回的是false,這就說(shuō)明方法其實(shí)也是一種引用地址。如果我們同樣重復(fù)創(chuàng)建了多個(gè)對(duì)象,那么每個(gè)對(duì)象中的方法都會(huì)在內(nèi)存中開(kāi)辟新的空間,這樣浪費(fèi)的空間就比較多。要解決這個(gè)問(wèn)題,我們就需要用到實(shí)例屬性或者方法的共享,下一篇文章中將繼續(xù)探討解決這個(gè)問(wèn)題。
以上所述是小編給大家介紹的Javascript中的對(duì)象和原型(二),希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
javascript 哈希表(hashtable)的簡(jiǎn)單實(shí)現(xiàn)
javascript中沒(méi)有像c#,java那樣的哈希表(hashtable)的實(shí)現(xiàn)。在js中,object屬性的實(shí)現(xiàn)就是hash表,因此只要在object上封裝點(diǎn)方法,簡(jiǎn)單的使用obejct管理屬性的方法就可以實(shí)現(xiàn)簡(jiǎn)單高效的hashtable。2010-01-01
如何利用javascript接收json信息并進(jìn)行處理
這篇文章主要介紹了如何利用javascript接收json信息并進(jìn)行處理,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
from 表單提交返回值用post或者是get方法實(shí)現(xiàn)
from 表單提交的返回值可以用jquery的post或者是get方法去實(shí)現(xiàn),具體如下,感興趣的朋友可以參考下,希望對(duì)大家有所幫助2013-08-08
利用JS實(shí)現(xiàn)AI自動(dòng)玩貪吃蛇
這篇文章主要為大家詳細(xì)介紹了如何利用JS實(shí)現(xiàn)AI版自動(dòng)玩貪吃蛇小游戲,文中的示例代碼講解詳細(xì),對(duì)我們學(xué)習(xí)JS游戲開(kāi)發(fā)有一定幫助,需要的可以參考一下2022-06-06
向大師們學(xué)習(xí)Javascript(視頻與PPT)
在開(kāi)始之前,先與大家一起認(rèn)識(shí)下這篇文章的主角,世界級(jí)的javascript大牛們:Douglas Crockford、John Resig、Peter-Paul Koch、Nicolas C. Zakas??疵忠苍S挺陌生,但是如果你對(duì)javascript還算熟悉,一定不會(huì)對(duì)他們的作品陌生。2009-12-12
微信小程序頁(yè)面間傳值的實(shí)現(xiàn)方法示例
這篇文章主要給大家介紹了關(guān)于微信小程序頁(yè)面間傳值的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
Javascript下的urlencode編碼解碼方法附decodeURIComponent
而本文,就大概說(shuō)說(shuō)如何在js中通過(guò)系統(tǒng)自帶的函數(shù)去解決這個(gè)問(wèn)題。2010-04-04
獲取HTML DOM節(jié)點(diǎn)元素的方法的總結(jié)
在Web應(yīng)用程序特別是Web2.0程序開(kāi)發(fā)中,經(jīng)常要獲取頁(yè)面中某個(gè)元素,然后更新該元素的樣式、內(nèi)容等。如何獲取要更新的元素,是首先要解決的問(wèn)題。2009-08-08
JS字符串累加Array不一定比字符串累加快(根據(jù)電腦配置)
言歸正傳:性能差異較大的機(jī)器運(yùn)行結(jié)果會(huì)RT 出現(xiàn)大的差異,為了保險(xiǎn)起見(jiàn)。還是推薦使用Array 來(lái)進(jìn)行字符串拼接操作2012-05-05
在微信小程序中獲取用戶(hù)位置的詳細(xì)過(guò)程
小程序需要用戶(hù)授權(quán)獲取用戶(hù)位置,獲取到經(jīng)緯度請(qǐng)求數(shù)據(jù)列表并解析為城市地址,用戶(hù)選擇城市時(shí)把城市解析為經(jīng)緯度,下面這篇文章主要給大家介紹了關(guān)于如何在微信小程序中獲取用戶(hù)位置的相關(guān)資料,需要的朋友可以參考下2022-08-08

