解析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中建立物件的四種方式的詳細內容。更多資訊請關注PHP中文網其他相關文章！