摘要:解決了構(gòu)造函數(shù)模式不能共享方法的問(wèn)題。六寄生構(gòu)造模式流程創(chuàng)建一個(gè)構(gòu)造函數(shù),在這個(gè)函數(shù)內(nèi)部創(chuàng)建一個(gè)對(duì)象,用返回對(duì)象。除了使用操作符并把使用的包裝函數(shù)叫做構(gòu)造函數(shù)以外,這個(gè)模式與工程模式其實(shí)是一模一樣的。
JavaScript面向?qū)ο蟾呒?jí)——對(duì)象創(chuàng)建模式 一、工廠(chǎng)模式
流程: 定義一個(gè)函數(shù),函數(shù)返回對(duì)象。
適用場(chǎng)景: 需要?jiǎng)?chuàng)建多個(gè)對(duì)象,都是Object類(lèi)型。
優(yōu)點(diǎn):完成了返回一個(gè)對(duì)象的要求。
缺點(diǎn): 對(duì)象沒(méi)有一個(gè)具體的類(lèi)型,無(wú)法通過(guò)constructor識(shí)別對(duì)象, 都是Object類(lèi)型。多個(gè)實(shí)例的sayName方法都是實(shí)現(xiàn)一樣的效果,但是卻存儲(chǔ)了很多次。
// 1.工廠(chǎng)模式 function createPerson (name, age, job) { // 返回一個(gè)對(duì)象的函數(shù)==》工廠(chǎng)函數(shù) // 顯式的創(chuàng)建對(duì)象 var o = new Object() o.name = name o.age = age o.job = job o.sayName = function () { alert(this.name) } return o // 返回對(duì)象 } var p1 = createPerson("Tom", 12, "student") var p2 = createPerson("Mandy", 22, "teacher") // 或者: function createPerson (name, age, job) { // 返回一個(gè)對(duì)象的函數(shù)==》工廠(chǎng)函數(shù) // 顯式的創(chuàng)建對(duì)象 var o = { name:name, age:age, job:job, sayName: function () { alert(this.name) } } return o // 返回對(duì)象 } var p1 = createPerson("Tom", 12, "student") var p2 = createPerson("Mandy", 22, "teacher"二、.構(gòu)造函數(shù)模式
流程:創(chuàng)建一個(gè)構(gòu)造函數(shù),沒(méi)有顯式地創(chuàng)建對(duì)象,沒(méi)有return語(yǔ)句,通過(guò)new操作符創(chuàng)建對(duì)象。
使用場(chǎng)景:需要?jiǎng)?chuàng)建多個(gè)類(lèi)型確定的對(duì)象。
優(yōu)點(diǎn):可以通過(guò)constructor或者instanceof來(lái)識(shí)別對(duì)象實(shí)例的類(lèi)型。
缺點(diǎn):多個(gè)實(shí)例的sayName方法都是實(shí)現(xiàn)一樣的效果,但是卻存儲(chǔ)了很多次(兩個(gè)對(duì)象實(shí)例的sayName方法是不同的,因?yàn)榇娣诺牡刂凡煌?/p>
function Person (name, age) { this.name = name this.age = age this.sayName = function () { alert(this.name) } } var p1 = new Person("Tony", 14) var p2 = new Person("Bob", 15三、原型模式
流程:創(chuàng)建一個(gè)構(gòu)造函數(shù),給這個(gè)函數(shù)的prototype添加屬性和方法。通過(guò)new操作符創(chuàng)建對(duì)象。
使用場(chǎng)景:起始時(shí)對(duì)象內(nèi)部數(shù)據(jù)是確定的。
優(yōu)點(diǎn):(1)sayName方法是共享的,所有實(shí)例的sayName方法都指向同一個(gè)。(2)可以動(dòng)態(tài)的添加原型對(duì)象的方法和屬性,并直接反映在對(duì)象實(shí)例上。
缺點(diǎn):(1)由于p1和p2的name屬性指向同一塊內(nèi)存區(qū)域,因此改變p1.name會(huì)導(dǎo)致p2.name改變。(2)所有的方法都是共享的,沒(méi)有辦法創(chuàng)建自己的屬性和方法,也沒(méi)有辦法像構(gòu)造函數(shù)哪像傳遞參數(shù)。
function Person () {} Person.prototype.name = "Mandy" Person.prototype.age = 16 Person.prototype.sayName = function () { alert(this.name) } var p1 = new Person() var p2 = new Person() p1.sayName() // "Mandy"四、構(gòu)造函數(shù)+原型組合模式
流程:自定義構(gòu)造函數(shù),屬性在函數(shù)中初始化,方法添加到原型上。
適用場(chǎng)景:需要?jiǎng)?chuàng)建多個(gè)類(lèi)型確定的對(duì)象。
優(yōu)點(diǎn):(1)解決了原型模式對(duì)于對(duì)象引用的問(wèn)題。(2)解決了原型模式?jīng)]有辦法傳遞參數(shù)的問(wèn)題。(3)解決了構(gòu)造函數(shù)模式不能共享方法的問(wèn)題。
function Person (name) { this.name = name } Person.prototype.sayName = function () { console.log(this.name) } var p1 = new Person("Mandy") p1.sayName() // Mandy五、動(dòng)態(tài)原型模式
流程:創(chuàng)建構(gòu)造函數(shù),在構(gòu)造函數(shù)內(nèi)部初始化屬性,在構(gòu)造函數(shù)內(nèi)部在原型上添加方法。通過(guò)new操作符創(chuàng)建對(duì)象。
需要?jiǎng)?chuàng)建多個(gè)類(lèi)型確定的對(duì)象。
優(yōu)點(diǎn):(1)可以在初次調(diào)用構(gòu)造函數(shù)的時(shí)候就完成原型對(duì)象的修改。(2)對(duì)原型對(duì)象的修改能在所有的實(shí)例中反映。
缺點(diǎn):紅寶書(shū)上說(shuō)了這個(gè)方案非常完美。
function Person(name, age) { // 屬性 this.name = name this.age = age // 方法 // 判斷sayName方法不存在的情況下,在原型上添加sayName方法。 if(typeof this.sayName != "function") { Person.prototype.sayName = function () { console.log(this.name) } } } var p1 = new Person("Tom") p1.sayName() // "Tom六、寄生構(gòu)造模式
流程:創(chuàng)建一個(gè)構(gòu)造函數(shù),在這個(gè)函數(shù)內(nèi)部創(chuàng)建一個(gè)對(duì)象,用return返回對(duì)象。通過(guò)new操作符創(chuàng)建。
除了使用new操作符并把使用的包裝函數(shù)叫做構(gòu)造函數(shù)以外,這個(gè)模式與工程模式其實(shí)是一模一樣的。
function Person(name, age) { // 將創(chuàng)建對(duì)象的代碼封裝在函數(shù)中。 // 顯式創(chuàng)建要返回的對(duì)象 var o = new Object() o.name = name o.age = age o.sayName = function () { console.log(this.name) } return o // 返回對(duì)象 } var p1 = new Person("Mandy",18)七、穩(wěn)妥構(gòu)造模式
優(yōu)點(diǎn):安全。除了調(diào)用sayName方法外,沒(méi)有其他辦法可以訪(fǎng)問(wèn)name的值。
function Person (name, age) { // 創(chuàng)建要返回的對(duì)象 var o = new Object() // 添加方法 o.sayName = function () { console.log(this.name) } // 返回對(duì)象 return o } var p1 = new Person("Mandy",20) p1.name // undefined // 除了調(diào)用sayName方法外,沒(méi)有其他辦法可以訪(fǎng)問(wèn)name的值。 p1.sayName() // "Mandy"
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://www.ezyhdfw.cn/yun/105095.html
摘要:個(gè)人前端文章整理從最開(kāi)始萌生寫(xiě)文章的想法,到著手開(kāi)始寫(xiě),再到現(xiàn)在已經(jīng)一年的時(shí)間了,由于工作比較忙,更新緩慢,后面還是會(huì)繼更新,現(xiàn)將已經(jīng)寫(xiě)好的文章整理一個(gè)目錄,方便更多的小伙伴去學(xué)習(xí)。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 個(gè)人前端文章整理 從最開(kāi)始萌生寫(xiě)文章的想法,到著手...
摘要:類(lèi)類(lèi)的概念應(yīng)該是面向?qū)ο笳Z(yǔ)言的一個(gè)特色,但是并不像,等高級(jí)語(yǔ)言那樣擁有正式的類(lèi),而是多數(shù)通過(guò)構(gòu)造器以及原型方式來(lái)仿造實(shí)現(xiàn)。因此,出現(xiàn)了構(gòu)造函數(shù)方式,它的關(guān)鍵在于構(gòu)造器概念的引入。于是,這就產(chǎn)生了構(gòu)造函數(shù)原型法的類(lèi)構(gòu)造方法。 類(lèi) Class 類(lèi)的概念應(yīng)該是面向?qū)ο笳Z(yǔ)言的一個(gè)特色,但是JavaScript并不像Java,C++等高級(jí)語(yǔ)言那樣擁有正式的類(lèi),而是多數(shù)通過(guò)構(gòu)造器以及原型方式...
摘要:由于某些字符類(lèi)非常常用,的正則表達(dá)式中,使用特殊轉(zhuǎn)義字符表示他們。多行搜索代碼示例對(duì)象創(chuàng)建對(duì)象可以通過(guò)引用類(lèi)型創(chuàng)建正則表達(dá)式對(duì)象參數(shù)參數(shù)被稱(chēng)為模式,可以使任何簡(jiǎn)單或復(fù)雜的正則表達(dá)式,包含字符類(lèi)限定符分組向前查找以及反向引用等。 概述 正則表達(dá)式是什么 正則表達(dá)式(RegularExpression):由一些普通字符和特殊字符組成的,用以描述一種特定的字符規(guī)則的表達(dá)式。正則表達(dá)式常用在一...
摘要:請(qǐng)記住,這些書(shū)中的一些可能不是最新的,但概念和基礎(chǔ)仍應(yīng)適用。是最好的老師之一。的秘密由部分組成。在你完成這些書(shū)后,查看書(shū)籍和最好的本土?xí)? 我看過(guò)三本,第1本,第二本,第四本。第一本買(mǎi)的的實(shí)體書(shū),其他兩本看的是電子書(shū)。第一本是大名鼎鼎老道寫(xiě)的,書(shū)很薄,但是非常經(jīng)典。javascirpt忍者秘籍是jquery的作者寫(xiě)的,也是非常經(jīng)典。you dont kown js系列也是非常好??戳?..
閱讀 2935·2021-10-21 09:38
閱讀 2866·2021-10-11 10:59
閱讀 3195·2021-09-27 13:36
閱讀 1739·2021-08-23 09:43
閱讀 885·2019-08-29 14:14
閱讀 3104·2019-08-29 12:13
閱讀 3256·2019-08-29 12:13
閱讀 363·2019-08-26 12:24