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