JS對(duì)象創(chuàng)建的幾種方式整理
最近一直在看JS高級(jí)程序設(shè)計(jì)這本書(shū),有空來(lái)梳理一下幾種創(chuàng)建對(duì)象的方式。話不多說(shuō),直接步入正題。
第一種:Object構(gòu)造函數(shù)創(chuàng)建
var Person = new Object(); Person.name = 'Nike'; Person.age = 29;
這行代碼創(chuàng)建了Object引用類型的一個(gè)新實(shí)例,然后把實(shí)例保存在變量Person中。
第二種:使用對(duì)象字面量表示法
var Person = {};//相當(dāng)于var Person = new Object(); var Person = { name:'Nike'; age:29; }
對(duì)象字面量是對(duì)象定義的一種簡(jiǎn)寫(xiě)形式,目的在于簡(jiǎn)化創(chuàng)建包含大量屬性的對(duì)象的過(guò)程。也就是說(shuō),第一種和第二種方式創(chuàng)建對(duì)象的方法其實(shí)都是一樣的,只是寫(xiě)法上的區(qū)別不同
在介紹第三種的創(chuàng)建方法之前,我們應(yīng)該要明白為什么還要用別的方法來(lái)創(chuàng)建對(duì)象,也就是第一種,第二種方法的缺點(diǎn)所在:它們都是用了同一個(gè)接口創(chuàng)建很多對(duì)象,會(huì)產(chǎn)生大量的重復(fù)代碼,就是如果你有100個(gè)對(duì)象,那你要輸入100次很多相同的代碼。那我們有什么方法來(lái)避免過(guò)多的重復(fù)代碼呢,就是把創(chuàng)建對(duì)象的過(guò)程封裝在函數(shù)體內(nèi),通過(guò)函數(shù)的調(diào)用直接生成對(duì)象。
第三種:使用工廠模式創(chuàng)建對(duì)象
function createPerson(name,age,job){ var o = new Object(); o.name = name; o.age = age; o.job = job; o.sayName = function(){ alert(this.name); }; return o; } var person1 = createPerson('Nike',29,'teacher'); var person2 = createPerson('Arvin',20,'student');
在使用工廠模式創(chuàng)建對(duì)象的時(shí)候,我們都可以注意到,在createPerson函數(shù)中,返回的是一個(gè)對(duì)象。那么我們就無(wú)法判斷返回的對(duì)象究竟是一個(gè)什么樣的類型。于是就出現(xiàn)了第四種創(chuàng)建對(duì)象的模式。
第四種:使用構(gòu)造函數(shù)創(chuàng)建對(duì)象
function Person(name,age,job){ this.name = name; this.age = age; this.job = job; this.sayName = function(){ alert(this.name); }; } var person1 = new Person('Nike',29,'teacher'); var person2 = new Person('Arvin',20,'student');
對(duì)比工廠模式,我們可以發(fā)現(xiàn)以下區(qū)別:
1.沒(méi)有顯示地創(chuàng)建對(duì)象
2.直接將屬性和方法賦給了this對(duì)象
3.沒(méi)有return語(yǔ)句
4.終于可以識(shí)別的對(duì)象的類型。對(duì)于檢測(cè)對(duì)象類型,我們應(yīng)該使用instanceof操作符,我們來(lái)進(jìn)行自主檢測(cè):
alert(person1 instanceof Object);//ture alert(person1 instanceof Person);//ture alert(person2 instanceof Object);//ture alert(person2 instanceof Object);//ture
同時(shí)我們也應(yīng)該明白,按照慣例,構(gòu)造函數(shù)始終要應(yīng)該以一個(gè)大寫(xiě)字母開(kāi)頭,而非構(gòu)造函數(shù)則應(yīng)該以一個(gè)小寫(xiě)字母開(kāi)頭。
那么構(gòu)造函數(shù)確實(shí)挺好用的,但是它也有它的缺點(diǎn):
就是每個(gè)方法都要在每個(gè)實(shí)例上重新創(chuàng)建一遍,方法指的就是我們?cè)趯?duì)象里面定義的函數(shù)。如果方法的數(shù)量很多,就會(huì)占用很多不必要的內(nèi)存。于是出現(xiàn)了第五種創(chuàng)建對(duì)象的方法
第五種:原型創(chuàng)建對(duì)象模式
function Person(){} Person.prototype.name = 'Nike'; Person.prototype.age = 20; Person.prototype.jbo = 'teacher'; Person.prototype.sayName = function(){ alert(this.name); }; var person1 = new Person(); person1.sayName();
使用原型創(chuàng)建對(duì)象的方式,可以讓所有對(duì)象實(shí)例共享它所包含的屬性和方法。
如果是使用原型創(chuàng)建對(duì)象模式,請(qǐng)看下面代碼:
function Person(){} Person.prototype.name = 'Nike'; Person.prototype.age = 20; Person.prototype.jbo = 'teacher'; Person.prototype.sayName = function(){ alert(this.name); }; var person1 = new Person(); var person2 = new Person(); person1.name ='Greg'; alert(person1.name); //'Greg' --來(lái)自實(shí)例 alert(person2.name); //'Nike' --來(lái)自原型
當(dāng)為對(duì)象實(shí)例添加一個(gè)屬性時(shí),這個(gè)屬性就會(huì)屏蔽原型對(duì)象中保存的同名屬性。
這時(shí)候我們就可以使用構(gòu)造函數(shù)模式與原型模式結(jié)合的方式,構(gòu)造函數(shù)模式用于定義實(shí)例屬性,而原型模式用于定義方法和共享的屬性
第六種:組合使用構(gòu)造函數(shù)模式和原型模式
function Person(name,age,job){ this.name =name; this.age = age; this.job = job; } Person.prototype = { constructor:Person, sayName: function(){ alert(this.name); }; } var person1 = new Person('Nike',20,'teacher');
以上就是本文的全部?jī)?nèi)容,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,同時(shí)也希望多多支持腳本之家!
- JavaScript 三種創(chuàng)建對(duì)象的方法
- JS 創(chuàng)建對(duì)象(常見(jiàn)的幾種方法)
- JavaScript 創(chuàng)建對(duì)象
- js中創(chuàng)建對(duì)象的幾種方式示例介紹
- js創(chuàng)建對(duì)象的幾種常用方式小結(jié)(推薦)
- javascript轉(zhuǎn)換字符串為dom對(duì)象(字符串動(dòng)態(tài)創(chuàng)建dom)
- JavaScript中創(chuàng)建字典對(duì)象(dictionary)實(shí)例
- js創(chuàng)建對(duì)象的方法匯總
- js中常見(jiàn)的4種創(chuàng)建對(duì)象方式與優(yōu)缺點(diǎn)
相關(guān)文章
JS 刪除字符串最后一個(gè)字符的實(shí)現(xiàn)代碼
本篇文章主要是對(duì)JS刪除字符串最后一個(gè)字符的實(shí)現(xiàn)代碼進(jìn)行了介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-02-02JS簡(jiǎn)單去除數(shù)組中重復(fù)項(xiàng)的方法
這篇文章主要介紹了JS簡(jiǎn)單去除數(shù)組中重復(fù)項(xiàng)的方法,涉及javascript針對(duì)數(shù)組的遍歷、判斷與運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下2016-09-09JavaScript設(shè)置body高度為瀏覽器高度的方法
這篇文章主要介紹了JavaScript設(shè)置body高度為瀏覽器高度的方法,實(shí)例分析了body高度的設(shè)置技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02基于JS實(shí)現(xiàn)移動(dòng)端左滑刪除功能
最近做個(gè)項(xiàng)目,需要實(shí)現(xiàn)移動(dòng)端左滑刪除功能,當(dāng)時(shí)js代碼將網(wǎng)上找的進(jìn)行刪減優(yōu)化,下面通過(guò)本文給大家分享基于JS實(shí)現(xiàn)移動(dòng)端左滑刪除功能,感興趣的朋友一起看看2017-07-07JS window對(duì)象簡(jiǎn)單操作完整示例
這篇文章主要介紹了JS window對(duì)象簡(jiǎn)單操作,結(jié)合完整實(shí)例形式分析了JavaScript Window對(duì)象各種常見(jiàn)提示框、彈出窗口及時(shí)間相關(guān)操作技巧,需要的朋友可以參考下2020-01-01url傳遞的參數(shù)值中包含&時(shí),url自動(dòng)截?cái)鄦?wèn)題的解決方法
下面小編就為大家?guī)?lái)一篇url傳遞的參數(shù)值中包含&時(shí),url自動(dòng)截?cái)鄦?wèn)題的解決方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08詳解Bootstrap的aria-label和aria-labelledby應(yīng)用
這篇文章主要介紹了詳解Bootstrap的aria-label和aria-labelledby應(yīng)用的相關(guān)資料,需要的朋友可以參考下2016-01-01基于jsTree的無(wú)限級(jí)樹(shù)JSON數(shù)據(jù)的轉(zhuǎn)換代碼
基于jsTree的無(wú)限級(jí)樹(shù)JSON數(shù)據(jù)的轉(zhuǎn)換代碼,需要的朋友可以參考下。2010-07-07JS實(shí)現(xiàn)多重選項(xiàng)卡切換輪播圖
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)多重選項(xiàng)卡切換輪播圖制作,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09