詳解js產(chǎn)生對(duì)象的3種基本方式（工廠模式，構(gòu)造函數(shù)模式，原型模式）

更新時(shí)間：2017年01月09日 09:18:09 作者：三十億少女的夢(mèng)

本篇文章主要介紹了js產(chǎn)生對(duì)象的3種基本方式（工廠模式，構(gòu)造函數(shù)模式，原型模式），具有一定的參考價(jià)值，有興趣的可以了解一下

1.工廠模式

工廠模式是軟件工程領(lǐng)域一種廣為人知的設(shè)計(jì)模式，而由于在ECMAScript中無(wú)法創(chuàng)建類(lèi)，因此用函數(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è)字母大寫(xiě)
 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è)方法寫(xiě)在全局以節(jié)省空間，但這樣寫(xiě)就違背了面向?qū)ο缶幊痰某踔?，下面的原型模式就更好一些?/p>

3.原型模式

我們創(chuàng)建的每個(gè)函數(shù)都有prototype（原型）屬性，這個(gè)屬性是一個(gè)指針，指向一個(gè)對(duì)象，而這個(gè)對(duì)象的用途是包含可以由特定類(lèi)型的所有實(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屬性

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

淺談javascript中的prototype和__proto__的理解
這篇文章主要介紹了淺談javascript中的prototype和__proto__的理解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
uniapp實(shí)現(xiàn)tabs切換(可滑動(dòng))效果實(shí)例
這篇文章主要給大家介紹了關(guān)于uniapp實(shí)現(xiàn)tabs切換(可滑動(dòng))效果的相關(guān)資料,tabs切換無(wú)論是在app端還是小程序或者H5頁(yè)面都是很常見(jiàn)的功能,文中通過(guò)實(shí)例代碼介紹的很詳細(xì),需要的朋友可以參考下
2023-07-07
js實(shí)現(xiàn)無(wú)縫滾動(dòng)雙圖切換效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)無(wú)縫滾動(dòng)雙圖切換效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-07-07
前端實(shí)現(xiàn)json動(dòng)畫(huà)詳細(xì)過(guò)程(附帶示例)
這篇文章主要介紹了如何使用Lottie制作動(dòng)畫(huà),包括創(chuàng)建動(dòng)畫(huà)文件.json、實(shí)現(xiàn)效果、在Git倉(cāng)庫(kù)中保存和共享、運(yùn)行動(dòng)畫(huà)以及在動(dòng)畫(huà)天堂下載和顯示JSON動(dòng)畫(huà),文中通過(guò)代碼及圖文介紹的非常詳細(xì),需要的朋友可以參考下
2025-02-02
淺談JS中json數(shù)據(jù)的處理
下面小編就為大家?guī)?lái)一篇淺談JS中json數(shù)據(jù)的處理。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-06-06
JavaScript框架(iframe)操作總結(jié)
這篇文章主要介紹了JavaScript框架(iframe)操作,介紹了種情況下的操作方法,需要的朋友可以參考下
2014-04-04
如何利用JS判斷整數(shù)x是否是回文數(shù)
回文數(shù)是指正序（從左向右）和倒序（從右向左）讀都是一樣的整數(shù),下面這篇文章主要給大家介紹了關(guān)于如何利用JS判斷整數(shù)x是否是回文數(shù)的相關(guān)資料,需要的朋友可以參考下
2022-01-01
js實(shí)現(xiàn)的點(diǎn)擊超鏈顯示隱藏層
js實(shí)現(xiàn)的點(diǎn)擊超鏈顯示隱藏層...
2007-05-05
JS只能輸入正整數(shù)的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇JS只能輸入正整數(shù)的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-10-10
JS實(shí)現(xiàn)仿雅虎首頁(yè)快捷登錄入口及導(dǎo)航模塊效果
這篇文章主要介紹了JS實(shí)現(xiàn)仿雅虎首頁(yè)快捷登錄入口及導(dǎo)航模塊效果,涉及JavaScript響應(yīng)鼠標(biāo)事件遍歷頁(yè)面元素的實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-09-09