1. 程式人生 > 實用技巧 >JS物件建立的幾種方式整理

JS物件建立的幾種方式整理

​ 本文主要介紹了JS物件建立的幾種方式

第一種:Object建構函式建立

var Person = new Object();
Person.name = 'Nike';
Person.age = 29;

這行程式碼建立了Object引用型別的一個新例項,然後把例項儲存在變數Person中。

第二種:使用物件字面量表示法

var Person = {};//相當於var Person = new Object();
var Person = {
 name:'Nike';
 age:29;  
}

物件字面量是物件定義的一種簡寫形式,目的在於簡化建立包含大量屬性的物件的過程。也就是說,第一種和第二種方式建立物件的方法其實都是一樣的,只是寫法上的區別不同

在介紹第三種的建立方法之前,我們應該要明白為什麼還要用別的方法來建立物件,也就是第一種,第二種方法的缺點所在:它們都是用了同一個介面建立很多物件,會產生大量的重複程式碼,就是如果你有100個物件,那你要輸入100次很多相同的程式碼。那我們有什麼方法來避免過多的重複程式碼呢,就是把建立物件的過程封裝在函式體內,通過函式的呼叫直接生成物件。

第三種:使用工廠模式建立物件

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

在使用工廠模式建立物件的時候,我們都可以注意到,在createPerson函式中,返回的是一個物件。那麼我們就無法判斷返回的物件究竟是一個什麼樣的型別。於是就出現了第四種建立物件的模式。

第四種:使用建構函式建立物件

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

對比工廠模式,我們可以發現以下區別:

1.沒有顯示地建立物件

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

同時我們也應該明白,按照慣例,建構函式始終要應該以一個大寫字母開頭,而非建構函式則應該以一個小寫字母開頭。

那麼建構函式確實挺好用的,但是它也有它的缺點:

就是每個方法都要在每個例項上重新建立一遍,方法指的就是我們在物件裡面定義的函式。如果方法的數量很多,就會佔用很多不必要的記憶體。於是出現了第五種建立物件的方法

第五種:原型建立物件模式

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

使用原型建立物件的方式,可以讓所有物件例項共享它所包含的屬性和方法。

如果是使用原型建立物件模式,請看下面程式碼:

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' --來自原型

當為物件例項新增一個屬性時,這個屬性就會遮蔽原型物件中儲存的同名屬性。

這時候我們就可以使用建構函式模式與原型模式結合的方式,建構函式模式用於定義例項屬性,而原型模式用於定義方法和共享的屬性

第六種:組合使用建構函式模式和原型模式

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