JS對象創(chuàng)建的幾種方式整理
最近一直在看JS高級程序設計這本書,有空來梳理一下幾種創(chuàng)建對象的方式。話不多說,直接步入正題。
第一種:Object構(gòu)造函數(shù)創(chuàng)建
var Person = new Object(); Person.name = 'Nike'; Person.age = 29;
這行代碼創(chuàng)建了Object引用類型的一個新實例,然后把實例保存在變量Person中。
第二種:使用對象字面量表示法
var Person = {};//相當于var Person = new Object(); var Person = { name:'Nike'; age:29; }
對象字面量是對象定義的一種簡寫形式,目的在于簡化創(chuàng)建包含大量屬性的對象的過程。也就是說,第一種和第二種方式創(chuàng)建對象的方法其實都是一樣的,只是寫法上的區(qū)別不同
在介紹第三種的創(chuàng)建方法之前,我們應該要明白為什么還要用別的方法來創(chuàng)建對象,也就是第一種,第二種方法的缺點所在:它們都是用了同一個接口創(chuàng)建很多對象,會產(chǎn)生大量的重復代碼,就是如果你有100個對象,那你要輸入100次很多相同的代碼。那我們有什么方法來避免過多的重復代碼呢,就是把創(chuàng)建對象的過程封裝在函數(shù)體內(nèi),通過函數(shù)的調(diào)用直接生成對象。
第三種:使用工廠模式創(chuàng)建對象
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)建對象的時候,我們都可以注意到,在createPerson函數(shù)中,返回的是一個對象。那么我們就無法判斷返回的對象究竟是一個什么樣的類型。于是就出現(xiàn)了第四種創(chuàng)建對象的模式。
第四種:使用構(gòu)造函數(shù)創(chuàng)建對象
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');
對比工廠模式,我們可以發(fā)現(xiàn)以下區(qū)別:
1.沒有顯示地創(chuàng)建對象
2.直接將屬性和方法賦給了this對象
3.沒有return語句
4.終于可以識別的對象的類型。對于檢測對象類型,我們應該使用instanceof操作符,我們來進行自主檢測:
alert(person1 instanceof Object);//ture alert(person1 instanceof Person);//ture alert(person2 instanceof Object);//ture alert(person2 instanceof Object);//ture
同時我們也應該明白,按照慣例,構(gòu)造函數(shù)始終要應該以一個大寫字母開頭,而非構(gòu)造函數(shù)則應該以一個小寫字母開頭。
那么構(gòu)造函數(shù)確實挺好用的,但是它也有它的缺點:
就是每個方法都要在每個實例上重新創(chuàng)建一遍,方法指的就是我們在對象里面定義的函數(shù)。如果方法的數(shù)量很多,就會占用很多不必要的內(nèi)存。于是出現(xiàn)了第五種創(chuàng)建對象的方法
第五種:原型創(chuà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(); person1.sayName();
使用原型創(chuàng)建對象的方式,可以讓所有對象實例共享它所包含的屬性和方法。
如果是使用原型創(chuà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' --來自實例 alert(person2.name); //'Nike' --來自原型
當為對象實例添加一個屬性時,這個屬性就會屏蔽原型對象中保存的同名屬性。
這時候我們就可以使用構(gòu)造函數(shù)模式與原型模式結(jié)合的方式,構(gòu)造函數(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');
以上就是本文的全部內(nèi)容,希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助,同時也希望多多支持腳本之家!
相關(guān)文章
url傳遞的參數(shù)值中包含&時,url自動截斷問題的解決方法
下面小編就為大家?guī)硪黄猽rl傳遞的參數(shù)值中包含&時,url自動截斷問題的解決方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-08-08詳解Bootstrap的aria-label和aria-labelledby應用
這篇文章主要介紹了詳解Bootstrap的aria-label和aria-labelledby應用的相關(guān)資料,需要的朋友可以參考下2016-01-01基于jsTree的無限級樹JSON數(shù)據(jù)的轉(zhuǎn)換代碼
基于jsTree的無限級樹JSON數(shù)據(jù)的轉(zhuǎn)換代碼,需要的朋友可以參考下。2010-07-07