快捷導(dǎo)航

詳細(xì)分析Javascript中創(chuàng)建對(duì)象的四種方式

更新時(shí)間：2016年08月17日 09:30:12 投稿：daisy

這篇文章詳細(xì)介紹了Javascript中創(chuàng)建對(duì)象的幾種方式與每種方式的優(yōu)缺點(diǎn)，其中包括工廠模式、構(gòu)造函數(shù)模式、原型模式和組合使用構(gòu)造函數(shù)模式和原型模式，有需要的小伙伴們一起來(lái)學(xué)習(xí)學(xué)習(xí)吧。

前言

使用Javascript創(chuàng)建對(duì)象的方式有很多，現(xiàn)在就來(lái)列舉一下其中的四種方式，并且羅列出了每種方式的優(yōu)缺點(diǎn)，可以讓大家進(jìn)行選擇使用，下面來(lái)看看。

工廠模式

 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)點(diǎn)：工廠模式可以解決創(chuàng)建多個(gè)相似對(duì)象

缺點(diǎn)：沒(méi)有解決對(duì)象識(shí)別問(wèn)題（怎樣確定一個(gè)對(duì)象的類型）

構(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);

在說(shuō)優(yōu)缺點(diǎn)之前，先來(lái)說(shuō)說(shuō)她本身的一點(diǎn)小故事吧

將構(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());
 
 //在另一個(gè)作用域中調(diào)用
 var obj = new Object();
 Person.call(obj, 'bird', 100);
 console.log(obj.sayName());

構(gòu)造函數(shù)優(yōu)缺點(diǎn)

優(yōu)點(diǎn)：可以將它的實(shí)例標(biāo)識(shí)為一種特定類型

缺點(diǎn)：每個(gè)方法都要在每個(gè)實(shí)例上重新創(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ù)，這樣一來(lái)毫無(wú)封裝性可言。。。接下來(lái)的原型模式可以彌補(bǔ)這個(gè)的不足

原型模式

 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訪問(wèn)的是同一組屬性的同一個(gè)sayName()函數(shù)

雖然可以通過(guò)對(duì)象實(shí)例訪問(wèn)保存在原型中的值，但卻不能通過(guò)實(shí)例對(duì)象重寫(xiě)原型中的值

 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的時(shí)候，會(huì)先后執(zhí)行兩次搜索，解析器先確定實(shí)例person1是否有sayName的屬性，有則調(diào)用自己的屬性，沒(méi)有則搜索原型中的屬性。

 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方法可以檢測(cè)一個(gè)屬性是存在與原型中還是存在于實(shí)例中，該方法是從Object繼承來(lái)的，實(shí)例中為true，原型中為false。

枚舉對(duì)象上的實(shí)例屬性用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)缺點(diǎn)

優(yōu)點(diǎn)：不用每個(gè)方法都要在每個(gè)實(shí)例上重申一遍

缺點(diǎn)：很少有人單獨(dú)使用原型模式地。。問(wèn)題詳列

 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"]

正是因?yàn)閷?shí)例一般都要有自己的屬性，而我們這里將他放在了Person.prototype中，所以隨著p1的修改，整個(gè)實(shí)例包括原型都修改了。那么，我們可以組合使用構(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)建自定義類型的方法。是用來(lái)定義引用類型的一種默認(rèn)模式。

總結(jié)

以上就是關(guān)于分析Javascript中創(chuàng)建對(duì)象方式的全部?jī)?nèi)容，通過(guò)這篇文章為大家總結(jié)的四種方式和其優(yōu)缺點(diǎn)，希望可以對(duì)大家學(xué)習(xí)使用Javascript能有所幫助。

您可能感興趣的文章: