RM新时代网站-首页

0
  • 聊天消息
  • 系統(tǒng)消息
  • 評(píng)論與回復(fù)
登錄后你可以
  • 下載海量資料
  • 學(xué)習(xí)在線課程
  • 觀看技術(shù)視頻
  • 寫文章/發(fā)帖/加入社區(qū)
會(huì)員中心
創(chuàng)作中心

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

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

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

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

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

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

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

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

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

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

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

1、工廠模式

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

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

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

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

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

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

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

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

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

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

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

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

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

3、原型模式

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

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

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

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

讀取某個(gè)對(duì)象的某個(gè)屬性的搜索方法:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    關(guān)注

    1

    文章

    38

    瀏覽量

    17388
  • javascript
    +關(guān)注

    關(guān)注

    0

    文章

    516

    瀏覽量

    53850
收藏 人收藏

    評(píng)論

    相關(guān)推薦

    JavaScript中的Object

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

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

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

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

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

    JavaScript 【2】對(duì)象

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

    JavaScript【8】JSON

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

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

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

    實(shí)例分析Java中創(chuàng)建對(duì)象

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

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

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

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

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

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

    在實(shí)際QML應(yīng)用開發(fā)中,我們可以在JavaScript中動(dòng)態(tài)的創(chuàng)建QML對(duì)象。這樣做可以延遲對(duì)象的實(shí)例化,當(dāng)我們?cè)谛枰?b class='flag-5'>創(chuàng)建
    的頭像 發(fā)表于 09-01 10:42 ?1556次閱讀

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

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

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

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

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

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

    javascript的成熟分類

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

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

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