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