詳細(xì)分析Javascript中創(chuàng)建對象的四種方式
前言
使用Javascript創(chuàng)建對象的方式有很多,現(xiàn)在就來列舉一下其中的四種方式,并且羅列出了每種方式的優(yōu)缺點,可以讓大家進(jìn)行選擇使用,下面來看看。
工廠模式
function createPerson(name, age){ var obj = new Object(); obj.name = name; obj.age = age; return obj; //一定要返回,否則打印undefined:undefined } var person1 = new createPerson('Young',18); console.log(person1.name + ':' + person1.age);
優(yōu)點:工廠模式可以解決創(chuàng)建多個相似對象
缺點:沒有解決對象識別問題(怎樣確定一個對象的類型)
構(gòu)造函數(shù)模式
function Person(name,age){ this.name = name; this.age = age; } var person1 = new Person('Young',18); console.log(person1.name + ':' + person1.age);
在說優(yōu)缺點之前,先來說說她本身的一點小故事吧
將構(gòu)造函數(shù)當(dāng)做函數(shù)使用
function Person(name,age){ this.name=name; this.age=age; this.sayName=function(){ return this.name; } } //當(dāng)做構(gòu)造函數(shù)使用 var person1 = new Person('Young', 18); person1.sayName(); console.log(person1.name + ':' + person1.age); //當(dāng)做普通函數(shù)調(diào)用 Person('Wind', 18); console.log(window.sayName()); //在另一個作用域中調(diào)用 var obj = new Object(); Person.call(obj, 'bird', 100); console.log(obj.sayName());
構(gòu)造函數(shù)優(yōu)缺點
優(yōu)點:可以將它的實例標(biāo)識為一種特定類型
缺點:每個方法都要在每個實例上重新創(chuàng)建一遍。當(dāng)然你也可以這樣改:
function Person(name, age){ this.name = name; this.age = age; this.sayName = sayName; } function sayName(){ return this.name; }
改為調(diào)用全局函數(shù),這樣一來毫無封裝性可言。。。接下來的原型模式可以彌補這個的不足
原型模式
function Person(){ } Person.prototype.name = 'Young'; Person.prototype.age = 18; Person.prototype.sayName = function(){ return this.name; } var person1 = new Person(); console.log(person1.sayName()); var person2 = new Person(); console.log(person1.sayName()); alert(person1.sayName === person2.sayName); //person1和person2訪問的是同一組屬性的同一個sayName()函數(shù)
雖然可以通過對象實例訪問保存在原型中的值,但卻不能通過實例對象重寫原型中的值
function Person(){ } Person.prototype.name='Young'; Person.prototype.age=18; Person.prototype.sayName=function(){ return this.name; } var person1=new Person(); var person2=new Person(); person1.name='Wind'; console.log(person1.sayName());//Wind console.log(person2.sayName());//Young alert(person1.sayName==person2.sayName);//true
在我們調(diào)用person1.sayName
的時候,會先后執(zhí)行兩次搜索,解析器先確定實例person1是否有sayName
的屬性,有則調(diào)用自己的屬性,沒有則搜索原型中的屬性。
function Person(){ } Person.prototype.name='Young'; Person.prototype.age=18; Person.prototype.sayName=function(){ return this.name; } var person1=new Person(); var person2=new Person(); person1.name='Wind'; console.log(person1.sayName());//Wind console.log(person2.sayName());//Young delete person1.name; console.log(person1.sayName());//Young console.log(person2.sayName());//Young
使用hasOwnPropertyType
方法可以檢測一個屬性是存在與原型中還是存在于實例中,該方法是從Object繼承來的,實例中為true,原型中為false。
枚舉對象上的實例屬性用Object.keys()
方法
function Person(){ } Person.prototype.name='Young'; Person.prototype.age=18; Person.prototype.sayName=function(){ return this.name; } var keys=Object.keys(Person.prototype); console.log(keys);//["name", "age", "sayName"]
原型模式優(yōu)缺點
優(yōu)點:不用每個方法都要在每個實例上重申一遍
缺點:很少有人單獨使用原型模式地。。問題詳列
function Person(){ } Person.prototype={ constructor:Person, name:'Young', age:18, friends:['Big','Pig'], sayName:function(){ return this.name; } }; var p1=new Person(); var p2=new Person(); p1.friends.push('Mon'); console.log(p1.friends);//["Big", "Pig", "Mon"] console.log(p2.friends);//["Big", "Pig", "Mon"]
正是因為實例一般都要有自己的屬性,而我們這里將他放在了Person.prototype
中,所以隨著p1的修改,整個實例包括原型都修改了。那么,我們可以組合使用構(gòu)造函數(shù)模式和原型模式。
組合使用構(gòu)造函數(shù)模式和原型模式
function Person(name,age){ this.name=name; this.age=age; this.friends=['Big','Pig']; } Person.prototype={ sayName:function(){ return this.name; } }; var p1=new Person('Young',18); var p2=new Person('Wind',78); p1.friends.push('Raganya'); console.log(p1.friends);//["Big", "Pig", "Raganya"] console.log(p2.friends);//["Big", "Pig"] console.log(p1.friends==p2.friends);//false console.log(p1.sayName==p2.sayName);//true
這種模式是目前使用最廣泛、認(rèn)同度最高的一種創(chuàng)建自定義類型的方法。是用來定義引用類型的一種默認(rèn)模式。
總結(jié)
以上就是關(guān)于分析Javascript中創(chuàng)建對象方式的全部內(nèi)容,通過這篇文章為大家總結(jié)的四種方式和其優(yōu)缺點,希望可以對大家學(xué)習(xí)使用Javascript能有所幫助。
- JavaScript 三種創(chuàng)建對象的方法
- JavaScript 創(chuàng)建對象
- js中創(chuàng)建對象的幾種方式示例介紹
- javascript轉(zhuǎn)換字符串為dom對象(字符串動態(tài)創(chuàng)建dom)
- js創(chuàng)建對象的幾種常用方式小結(jié)(推薦)
- Jquery通過JSON字符串創(chuàng)建JSON對象
- ajax 異步獲取數(shù)據(jù)實現(xiàn)代碼 (js創(chuàng)建ajax對象)
- Javascript創(chuàng)建自定義對象 創(chuàng)建Object實例添加屬性和方法
- js使用對象直接量創(chuàng)建對象的代碼
相關(guān)文章
javascript權(quán)威指南 學(xué)習(xí)筆記之變量作用域分享
最近一直在看《javascript權(quán)威指南 第五版》,變量作用域這一章,看得真的有點累。不過,收獲還是多多。2011-09-09JS中關(guān)于Class類的靜態(tài)屬性和靜態(tài)方法
這篇文章主要介紹了JS中關(guān)于Class類的靜態(tài)屬性和靜態(tài)方法,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-10-10JS基礎(chǔ)之邏輯結(jié)構(gòu)與循環(huán)操作示例
這篇文章主要介紹了JS基礎(chǔ)之邏輯結(jié)構(gòu)與循環(huán)操作,結(jié)合實例形式分析了JavaScript邏輯判斷、流程控制、循環(huán)語句等相關(guān)操作技巧,需要的朋友可以參考下2020-01-01AJAX 網(wǎng)頁保留瀏覽器前進(jìn)后退等功能
AJAX的應(yīng)用較少了頁面的刷新次數(shù),但是也可能會使瀏覽器的前進(jìn)、后退、刷新等功能受到影響。2011-02-02JavaScript設(shè)計模式之工廠模式簡單實例教程
這篇文章主要介紹了JavaScript設(shè)計模式之工廠模式,結(jié)合完整實例形式分析了工廠模式的概念、原理及javascript定義與使用工廠模式的相關(guān)操作技巧,需要的朋友可以參考下2018-07-07JavaScript使用鏈?zhǔn)椒椒ǚ庋bjQuery中CSS()方法示例
這篇文章主要介紹了JavaScript使用鏈?zhǔn)椒椒ǚ庋bjQuery中CSS()方法,結(jié)合具體實例形式分析了JS采用鏈?zhǔn)讲僮鞣椒ǚ庾Query中連綴操作實現(xiàn)css()方法的相關(guān)技巧,需要的朋友可以參考下2017-04-04js利用遞歸與promise 按順序請求數(shù)據(jù)的方法
這篇文章主要介紹了js利用遞歸與promise 按順序請求數(shù)據(jù),需要的朋友可以參考下2019-08-08javascript解決小數(shù)的加減乘除精度丟失的方案
這篇文章主要介紹了javascript解決小數(shù)的加減乘除精度丟失的方案的相關(guān)資料以及JavaScript中關(guān)于丟失數(shù)字精度的問題的探討,非常的詳細(xì),需要的朋友可以參考下2016-05-05