詳細分析Javascript中建立對象的四種方式，javascript四種

詳細分析Javascript中建立對象的四種方式，javascript四種

前言

使用Javascript建立對象的方式有很多，現在就來列舉一下其中的四種方式，並且羅列出了每種方式的優缺點，可以讓大家進行選擇使用，下面來看看。

原廠模式

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

優點：原廠模式可以解決建立多個相似對象

缺點：沒有解決對象識別問題（怎樣確定一個對象的類型）

建構函式模式

 function Person(name,age){ this.name = name; this.age = age; } var person1 = new Person('Young',18); console.log(person1.name + ':' + person1.age);

在說優缺點之前，先來說說她本身的一點小故事吧

將建構函式當做函數使用

 function Person(name,age){ this.name=name; this.age=age; this.sayName=function(){ return this.name; } }  //當做建構函式使用 var person1 = new Person('Young', 18); person1.sayName(); console.log(person1.name + ':' + person1.age);  //當做普通函數調用 Person('Wind', 18); console.log(window.sayName());  //在另一個範圍中調用 var obj = new Object(); Person.call(obj, 'bird', 100); console.log(obj.sayName());

建構函式優缺點

優點：可以將它的執行個體標識為一種特定類型

缺點：每個方法都要在每個執行個體上重新建立一遍。當然你也可以這樣改：

 function Person(name, age){ this.name = name; this.age = age; this.sayName = sayName; } function sayName(){ return this.name; }

改為調用全域函數，這樣一來毫無封裝性可言。。。接下來的原型模式可以彌補這個的不足

原型模式

 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()函數

雖然可以通過對象執行個體訪問儲存在原型中的值，但卻不能通過執行個體對象重寫原型中的值

 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

在我們調用person1.sayName的時候，會先後執行兩次搜尋，解析器先確定執行個體person1是否有sayName的屬性，有則調用自己的屬性，沒有則搜尋原型中的屬性。

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

原型模式優缺點

優點：不用每個方法都要在每個執行個體上重申一遍

缺點：很少有人單獨使用原型模式地。。問題詳列

 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的修改，整個執行個體包括原型都修改了。那麼，我們可以組合使用建構函式模式和原型模式。

組合使用建構函式模式和原型模式

 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

這種模式是目前使用最廣泛、認同度最高的一種建立自訂類型的方法。是用來定義參考型別的一種預設模式。

總結

以上就是關於分析Javascript中建立對象方式的全部內容，通過這篇文章為大家總結的四種方式和其優缺點，希望可以對大家學習使用Javascript能有所協助。