詳解js產(chǎn)生對象的3種基本方式(工廠模式,構(gòu)造函數(shù)模式,原型模式)
1.工廠模式
工廠模式是軟件工程領(lǐng)域一種廣為人知的設(shè)計(jì)模式,而由于在ECMAScript中無法創(chuàng)建類,因此用函數(shù)封裝以特定接口創(chuàng)建對象。其實(shí)現(xiàn)方法非常簡單,也就是在函數(shù)內(nèi)創(chuàng)建一個對象,給對象賦予屬性及方法再將對象返回即可。
function a(name){ var b = new object(); b.name = name; b.say = function(){ alert(this.name); } return b }
函數(shù)內(nèi)部產(chǎn)生b對象并返回。
2.構(gòu)造函數(shù)模式
function Person(name, url) { //注意構(gòu)造函數(shù)名第一個字母大寫 this.name = name; this.url = url; this.alertUrl = alertUrl; } function alertUrl() { alert(this.url); }
因?yàn)槊繕?gòu)造一個對象就會生成一個alertUrl方法,這樣太浪費(fèi)資源空間,所以把a(bǔ)lertUrl這個方法寫在全局以節(jié)省空間,但這樣寫就違背了面向?qū)ο缶幊痰某踔?,下面的原型模式就更好一些?/p>
3.原型模式
我們創(chuàng)建的每個函數(shù)都有prototype(原型)屬性,這個屬性是一個指針,指向一個對象,而這個對象的用途是包含可以由特定類型的所有實(shí)例共享的屬性和方法。使用原型對象的好處就是可以讓所有對象實(shí)例共享它所包含的屬性及方法。
function Person(){ } Person.prototype.name = "bill"; Person.prototype.address = "GuangZhou"; Person.sayName = function (){ alert(this.name); } var person1 = new Person(); var person2 = new Person(); //測試代碼 alert(person1.name); // bill alert(person2.name); // bill person1.sayName(); //bill person2.sayName(); //bill person1.name = "666"; alert(person1.name); // 666 alert(person2.name); // bill person1.sayName(); //666 person2.sayName(); //bill
我們創(chuàng)建的每個函數(shù)都有prototype(原型)屬性,這個屬性其實(shí)是一個指針,指向一個對象。
當(dāng)構(gòu)造一個person對象例如person1之后,它的默認(rèn)name屬性就是bill。如果要改name值的話就要對person1.name操作。這只是改了這個對象的name屬性。alert(person1.prototype.name)依然是彈出bill,即原型上的name屬性
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- JS中創(chuàng)建自定義類型的常用模式總結(jié)【工廠模式,構(gòu)造函數(shù)模式,原型模式,動態(tài)原型模式等】
- JavaScript創(chuàng)建對象方式總結(jié)【工廠模式、構(gòu)造函數(shù)模式、原型模式等】
- js面向?qū)ο笾R妱?chuàng)建對象的幾種方式(工廠模式、構(gòu)造函數(shù)模式、原型模式)
- JS面向?qū)ο蠡A(chǔ)講解(工廠模式、構(gòu)造函數(shù)模式、原型模式、混合模式、動態(tài)原型模式)
- JS創(chuàng)建對象常用設(shè)計(jì)模式工廠構(gòu)造函數(shù)及原型
相關(guān)文章
JS實(shí)現(xiàn)點(diǎn)擊上移下移LI行數(shù)據(jù)的方法
這篇文章主要介紹了JS實(shí)現(xiàn)點(diǎn)擊上移下移LI行數(shù)據(jù)的方法,涉及javascript針對LI列表動態(tài)排序的相關(guān)實(shí)現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08JavaScript三種方法解決約瑟夫環(huán)問題的方法
約瑟夫環(huán)問題又稱約瑟夫問題或丟手絹問題,是一道經(jīng)典的算法問題,本篇將以循環(huán)鏈表、有序數(shù)組、數(shù)學(xué)遞歸三種方式來解決約瑟夫環(huán)問題。感興趣的可以了解一下2021-09-09javascript游戲開發(fā)之《三國志曹操傳》零部件開發(fā)(三)情景對話中仿打字機(jī)輸出文字
前兩講我告訴了大家如何使人物移動,那么今天我們就來看看如何實(shí)現(xiàn)仿《三國志曹操傳》人物情景對話,感興趣的朋友可以了解下,希望本文對你有所幫助2013-01-01基于javascript、ajax、memcache和PHP實(shí)現(xiàn)的簡易在線聊天室
這篇文章主要介紹了基于javascript、ajax、memcache和PHP實(shí)現(xiàn)的簡易在線聊天室,需要的朋友可以參考下2015-02-02JS代碼實(shí)現(xiàn)百度地圖 畫圓 刪除標(biāo)注
這篇文章主要介紹了JS代碼實(shí)現(xiàn)百度地圖 畫圓 刪除標(biāo)注的相關(guān)資料,實(shí)現(xiàn)此功能的設(shè)計(jì)思路非常明確,代碼簡單易懂,非常不錯,具有參考借鑒價值,感興趣的朋友參考下吧2016-10-10利用js查找數(shù)組中指定元素并返回該元素的所有索引示例
在js數(shù)組中查找特定的元素相信對大家來說再熟悉不過了,但越簡單的東西越可能出錯,小編最近就犯了這樣的錯誤,所以想著干脆將實(shí)現(xiàn)的代碼整理下來,方便自己以后需要的時候,或者有需要的朋友們參考學(xué)習(xí),下面來一起看看吧。2017-03-03AjaxFileUpload.js實(shí)現(xiàn)異步上傳文件功能
這篇文章主要為大家詳細(xì)介紹了AjaxFileUpload.js實(shí)現(xiàn)異步上傳文件功能,具有一定的參考價值,感興趣的小伙伴們可以參考一下2019-04-04