0
  • 聊天消息
  • 系統(tǒng)消息
  • 評論與回復(fù)
登錄后你可以
  • 下載海量資料
  • 學(xué)習(xí)在線課程
  • 觀看技術(shù)視頻
  • 寫文章/發(fā)帖/加入社區(qū)
會員中心
电子发烧友
开通电子发烧友VIP会员 尊享10大特权
海量资料免费下载
精品直播免费看
优质内容免费畅学
课程9折专享价
創(chuàng)作中心

完善資料讓更多小伙伴認(rèn)識你,還能領(lǐng)取20積分哦,立即完善>

3天內(nèi)不再提示

JavaScript創(chuàng)建對象的方式

西西 ? 2018-02-22 09:32 ? 次閱讀

JavaScript中有幾種創(chuàng)建對象的方式,本文將一一介紹,工廠模式、構(gòu)造函數(shù)模式、原型模式、動態(tài)原型模式、組合使用構(gòu)造函數(shù)模式和原型模式。

傳統(tǒng)的創(chuàng)建對象的方式:

1、創(chuàng)建Object的實例

JavaScript創(chuàng)建對象的方式

2、對象字面量形式創(chuàng)建單個對象

JavaScript創(chuàng)建對象的方式

創(chuàng)建對象的五種設(shè)計模式

1、工廠模式

雖然Object構(gòu)造函數(shù)和對象字面量都可以用來創(chuàng)建單個對象,但這個方式有個明顯的缺點:使用同一個接口創(chuàng)建很多對象,會產(chǎn)生大量重復(fù)的代碼。為了解決這個問題,開始使用工廠模式。

JavaScript創(chuàng)建對象的方式

2、構(gòu)造函數(shù)模式

工廠模式雖然解決了創(chuàng)建多個相似對象的問題,但卻沒有解決對象識別的問題(即不知道對象的類型),于是,又出現(xiàn)了構(gòu)造函數(shù)模式,自定義的構(gòu)造函數(shù)意味著將來可以把它的實例識別為一種特定的類型。這是構(gòu)造函數(shù)模式勝過工廠模式的地方。

JavaScript創(chuàng)建對象的方式

構(gòu)造函數(shù)模式與工廠模式的不同之處在于:1)沒有顯式地創(chuàng)建對象;2)直接將屬性和方法賦給了this對象;3)沒有return語句。

構(gòu)造函數(shù)的問題:每個方法都要在每個實例上重新創(chuàng)建一遍。由于JavaScript中的函數(shù)是對象,每定義一個函數(shù),就是實例化了一個Funtion對象,因此,使用構(gòu)造函數(shù)創(chuàng)建的每個實例都有一個名為showName()的方法,但這些方法不是同一個Function的實例。不同實例上的同名函數(shù)是不相等的,因此person1.showName == person2.showName返回false。

可以通過把函數(shù)定義轉(zhuǎn)移到構(gòu)造函數(shù)外部來解決這個問題,如下:

JavaScript創(chuàng)建對象的方式

這樣雖然解決了方法多次創(chuàng)建問題,但又出現(xiàn)了新的問題:

(1)在全局作用域中定義的函數(shù)實際上只能被某個對象調(diào)用,這讓全局作用域名不副實。

(2)如果對象需要定義很多方法,那么就需要定義很多個全局函數(shù),那么就毫無封裝性可言了。

這些問題可以通過使用原型模式來解決。

3、原型模式

每個函數(shù)都以一個原型prototype屬性,是一個指針,指向一個對象。

使用原型對象的好處是可以讓所有對象實例共享它所包含的屬性和方法。也就是說,不必在構(gòu)造函數(shù)中定義對象實例的信息,而是可以直接將這些信息添加到原型對象中。

JavaScript創(chuàng)建對象的方式

使用原型模式創(chuàng)建的新對象具有相同的屬性和方法。與構(gòu)造函數(shù)模式不同的是,新對象的這些屬性和方法是由所有對象所共享的。這會導(dǎo)致所有實例默認(rèn)有一樣的屬性值,因此person1.showName == person2.showName返回true。

讀取某個對象的某個屬性的搜索方法:

1)首先在實例中搜索,若找到指定屬性,則返回該屬性的值。

2)否則繼續(xù)搜索指針指向的原型對象。

使用delete 實例名。屬性名可以刪除實例的某一屬性。

使用hasOwnProperty()方法可以判斷屬性是存在于實例中,還是存在于原型中。只有給定屬性存在于實例中,才會返回true。

in操作符會在通過對象能夠訪問給定屬性時返回true,無論該屬性存在于實例中還是原型中。

同時使用hasOwnProperty()方法和in操作符,能夠確定屬性到底是存在于對象中,還是存在于原型中。

JavaScript創(chuàng)建對象的方式

原型模式更簡單的語法:以一個包含所有屬性和方法的對象字面量來創(chuàng)建原型對象。

JavaScript創(chuàng)建對象的方式

用對象字面量來創(chuàng)建原型對象的結(jié)果相同,只是constructor屬性不再指向Person。這是由于這樣已經(jīng)完全重寫了默認(rèn)的prototype對象,因此constructor屬性也就變成了新對象的constructor屬性,指向Object構(gòu)造函數(shù)但不指向Person函數(shù)。此時,instanceof操作符還能返回正確的結(jié)果但通過constructor已經(jīng)無法確定對象的類型了。

JavaScript創(chuàng)建對象的方式

如果constuctor的值很重要,可以特意將其設(shè)置回適當(dāng)?shù)闹怠?/p>

JavaScript創(chuàng)建對象的方式

重寫原型對象切斷了現(xiàn)有原型與任何之前已經(jīng)存在的對象實例之間的聯(lián)系,對象實例引用的仍然是最初的原型。

JavaScript創(chuàng)建對象的方式

4、組合使用構(gòu)造函數(shù)模式和原型模式

原型對象的問題:最大問題是由于共享屬性導(dǎo)致的。原型中所有屬性是被實例共享的,這對于函數(shù)很合適,對那些包含基本值的屬性也還說得過去,因為可以通過在實例上添加同名屬性,隱藏原型中的對應(yīng)屬性。然而,對于包含引用值的屬性來說,問題就比較突出了,修改某個實例的引用類型的屬性也會通過原型影響到其它實例的該屬性。

創(chuàng)建自定義類型的最常見方法是組合使用構(gòu)造函數(shù)模式和原型模式,構(gòu)造函數(shù)模式用于定義實例屬性,原型模式用于定義方法和共享的屬性。

JavaScript創(chuàng)建對象的方式

5、動態(tài)原型模式

動態(tài)原型模式把所有信息都封裝在了構(gòu)造函數(shù)中,而通過在構(gòu)造函數(shù)中初始化原型,又保持了同時使用構(gòu)造函數(shù)和原型的優(yōu)點。

可以通過檢查某個應(yīng)該存在的方法是否有效,來決定是否需要初始化原型。

如:只在showName()方法不存在的情況下,才會將它添加到原型中,這段代碼只會在初次調(diào)用構(gòu)造函數(shù)時才會執(zhí)行。

JavaScript創(chuàng)建對象的方式

聲明:本文內(nèi)容及配圖由入駐作者撰寫或者入駐合作網(wǎng)站授權(quán)轉(zhuǎn)載。文章觀點僅代表作者本人,不代表電子發(fā)燒友網(wǎng)立場。文章及其配圖僅供工程師學(xué)習(xí)之用,如有內(nèi)容侵權(quán)或者其他違規(guī)問題,請聯(lián)系本站處理。 舉報投訴
  • 對象
    +關(guān)注

    關(guān)注

    1

    文章

    38

    瀏覽量

    17466
  • javascript
    +關(guān)注

    關(guān)注

    0

    文章

    525

    瀏覽量

    54228
收藏 0人收藏

    評論

    相關(guān)推薦

    JavaScript中的Object

    1. 對象的定義?向對象的語?都有一個標(biāo)志,即類。定義:對象JavaScript 的一個基本數(shù)據(jù)類型,是?種復(fù)合值,它將很多值(原始值或者其他
    發(fā)表于 09-18 09:05

    請問如何通過創(chuàng)建窗口對象方式實現(xiàn)界面切換?

    如何通過創(chuàng)建窗口對象方式實現(xiàn)界面切換?
    發(fā)表于 04-19 07:48

    JavaScript 【1】 基礎(chǔ)數(shù)據(jù)類型

    Boolean;var cars=new Array;var person= new Object; JavaScript 變量均為對象。當(dāng)您聲明一個變量時,就創(chuàng)建了一個新的對象。
    發(fā)表于 07-17 10:32

    JavaScript 【2】對象

    (), 它會返回函數(shù)的定義:實例objectName.methodName有多種方式可以創(chuàng)建,使用和修改 JavaScript 對象。同樣也有多種
    發(fā)表于 07-17 10:33

    JavaScript【8】JSON

    ;www.taobao.com"} ]} JSON 格式化后為 JavaScript 對象JSON 格式在語法上與創(chuàng)建 JavaScript 對象
    發(fā)表于 07-17 10:45

    java如何創(chuàng)建對象的分析

    作為Java開發(fā)者,我們每天創(chuàng)建很多對象,但我們通常使用依賴管理系統(tǒng),比如Spring去創(chuàng)建對象。然而這里有很多創(chuàng)建
    發(fā)表于 09-27 14:36 ?0次下載

    實例分析Java中創(chuàng)建對象

    Java中有5種創(chuàng)建對象方式,下面給出它們的例子還有它們的字節(jié)碼 Paste_Image.png 如果你運(yùn)行了末尾的的程序,你會發(fā)現(xiàn)方法1,2,3用構(gòu)造函數(shù)創(chuàng)建
    發(fā)表于 09-28 13:29 ?0次下載

    javascript原型是什么_javascript常用框架介紹

    JavaScript 是面向對象的腳本語言,長期以來用作 Web 瀏覽器應(yīng)用程序的客戶端腳本接口。JavaScript 讓 Web 開發(fā)人員能以編程方式處理 Web 頁面上的
    發(fā)表于 12-04 17:07 ?3016次閱讀
    <b class='flag-5'>javascript</b>原型是什么_<b class='flag-5'>javascript</b>常用框架介紹

    使用JavaScript創(chuàng)建對象的方法和案例

    Javascript中的一切幾乎都是對象,無論是數(shù)組還是函數(shù)。本文將教你使用JavaScript創(chuàng)建對象的三種方法。
    的頭像 發(fā)表于 07-06 09:41 ?3018次閱讀

    JavaScript中動態(tài)的創(chuàng)建QML對象

    在實際QML應(yīng)用開發(fā)中,我們可以在JavaScript中動態(tài)的創(chuàng)建QML對象。這樣做可以延遲對象的實例化,當(dāng)我們在需要創(chuàng)建
    的頭像 發(fā)表于 09-01 10:42 ?1702次閱讀

    Java中創(chuàng)建對象有哪些方式

    1 問題 作為Java開發(fā)者,經(jīng)常創(chuàng)建很多對象,你是否知道Java中創(chuàng)建對象有哪些方式呢?
    的頭像 發(fā)表于 02-24 10:29 ?1158次閱讀

    Java反射技術(shù)實現(xiàn)對象創(chuàng)建

    創(chuàng)建對象,什么時候我們改用反射創(chuàng)建對象呢? 兩者創(chuàng)建對象的效率又是如何呢? ? //new?
    的頭像 發(fā)表于 05-22 14:25 ?2425次閱讀
    Java反射技術(shù)實現(xiàn)<b class='flag-5'>對象</b>的<b class='flag-5'>創(chuàng)建</b>

    python創(chuàng)建文件對象

    2.1. 創(chuàng)建文件對象 **open() 函數(shù)用于創(chuàng)建文件對象,基本語法格式如下:** open(文件名[,打開方式]) 注意: 如果只是文
    的頭像 發(fā)表于 06-21 17:19 ?1736次閱讀
    python<b class='flag-5'>創(chuàng)建</b>文件<b class='flag-5'>對象</b>

    javascript的成熟分類

    JavaScript的成熟分類可以從多個角度進(jìn)行劃分,以下是幾種常見的分類方式: 語言成熟度: 解釋型語言:JavaScript是一種解釋型語言,這意味著它不需要在編譯期間進(jìn)行預(yù)處理或編譯。 動態(tài)
    的頭像 發(fā)表于 11-16 10:30 ?32.6w次閱讀

    javascript的內(nèi)置對象有哪些

    你全面了解JavaScript的能力和應(yīng)用場景。 一、基本數(shù)據(jù)類型對象: String(字符串對象):用于處理和操作文本數(shù)據(jù)。 Number(數(shù)字對象):用于處理和操作數(shù)字?jǐn)?shù)據(jù)。 Bo
    的頭像 發(fā)表于 12-03 11:39 ?1510次閱讀

    電子發(fā)燒友

    中國電子工程師最喜歡的網(wǎng)站

    • 2931785位工程師會員交流學(xué)習(xí)
    • 獲取您個性化的科技前沿技術(shù)信息
    • 參加活動獲取豐厚的禮品