JavaScript 創(chuàng)建對象的方式有很多，通過 Object 構(gòu)造函數(shù)或?qū)ο笞置媪康姆绞揭部梢詣?chuàng)建單個對象，顯然這兩種方式會產(chǎn)生大量的重復(fù)代碼，并不適合量產(chǎn)。

接下來介紹七種非常經(jīng)典的創(chuàng)建對象的方式，他們也各有優(yōu)缺點(diǎn)。

1、工廠模式

可以無數(shù)次調(diào)用這個工廠函數(shù)，每次都會返回一個包含兩個屬性和一個方法的對象。

工廠模式雖然解決了創(chuàng)建多個相似對象的問題，但是沒有解決對象識別問題，即不能知道一個對象的類型。

function createPerson(name, job) { 
 var o = new Object();
 o.name = name;
 o.job = job;
 o.sayName = function() { 
  console.log(this.name); 
 } 
 return o;
} 

var person1 = createPerson('Mike', 'student');
var person2 = createPerson('X', 'engineer');

2、構(gòu)造函數(shù)模式

function Person(name, job) { 
 this.name = name;
 this.job = job;
 this.sayName = function() { 
  console.log(this.name);
 } 
}

var person1 = new Person('Mike', 'student');
var person2 = new Person('X', 'engineer');

沒有顯示的創(chuàng)建對象，使用new來調(diào)用這個構(gòu)造函數(shù)，使用new后會自動執(zhí)行如下操作：

①創(chuàng)建一個新對象；

②將構(gòu)造函數(shù)的作用域賦給新對象（因此this就指向了這個新對象）；

③執(zhí)行構(gòu)造函數(shù)中的代碼（為這個新對象添加屬性）；

④返回新對象。

缺點(diǎn)：每個方法都要在每個實(shí)例上重新創(chuàng)建一遍。

創(chuàng)建兩個完成同樣任務(wù)的的 Function 實(shí)例的確沒有必要。況且有 this 對象在，根本不用在執(zhí)行代碼前就把函數(shù)綁定到特定的對象上，可以通過這樣的形式定義：

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

function sayName(){
    alert( this.name );
}

如此一來，就可以將 sayName() 函數(shù)的定義轉(zhuǎn)移到構(gòu)造函數(shù)外部。而在構(gòu)造函數(shù)內(nèi)部，我們將 sayName 屬性設(shè)置成全局的 sayName() 函數(shù)。這樣的話，由于 sayName() 包含的是一個指向函數(shù)的指針，因此 person1 和 person2 對象就可以共享在全局作用域中定義的同一個 sayName() 函數(shù)。

這樣做解決了兩個函數(shù)做同一件事的問題，但是新的問題又來了：在全局作用域中定義的函數(shù)實(shí)際上只能被某個對象調(diào)用，這讓全局作用域有點(diǎn)名不副實(shí)。而更重要的是：如果對象需要定義很多方法，那么就需要定義很多個全局函數(shù)，這樣一來，我們自定義的這個引用類型就毫無封裝性可言了。

這些問題可以通過使用原型模式來解決。

3、原型模式

將信息直接添加到原型對象上。

使用原型的好處是可以讓所有的實(shí)例對象共享它所包含的屬性和方法，不必在構(gòu)造函數(shù)中定義對象實(shí)例信息，而是可以將這些信息直接添加到原型對象中。

function Person() { }
Person.prototype.name = 'Mike';
Person.prototype.job = 'student';

Person.prototype.sayName = function() { 
 console.log(this.name) 
} 

var person1 = new Person();

Ⅰ 理解原型

無論什么時候,只要創(chuàng)建了一個新函數(shù),就會根據(jù)一組特定的規(guī)則為該函數(shù)創(chuàng)建一個 prototype 屬性。

在默認(rèn)情況下，所有 prototype 屬性都會自動獲得一個 constructor（構(gòu)造函數(shù)） 屬性，這個屬性包含一個指向 prototype 屬性所在函數(shù)的指針。

每當(dāng)代碼讀取某個對象的某個屬性時,都會執(zhí)行一搜索，目標(biāo)是具有給定名字的屬性。搜索首先從對象實(shí)例本身開始。如果在實(shí)例中找到了具有給定名字的屬性，則返回該屬性的值；如果沒有找到，則繼續(xù)搜索指針指向的原型對象，在原型對象中查找具有給定名字的屬性。如果在原型對象中找到了這個屬性，則返回該屬性的值。

雖然可以通過對象實(shí)例訪問保存在原型中的值，但卻不能通過對象實(shí)例重寫原型中的值。

如果我們在實(shí)例中添加了一個屬性，而該屬性與實(shí)例中的一個屬性同名，那么就會在實(shí)例中創(chuàng)建該屬性，該屬性將會屏蔽原型中的那個屬性。

即使是將屬性設(shè)置為 null，也只是在實(shí)例中的屬性值為 null。

不過，使用delete操作符可以完全刪除實(shí)例屬性，從而能夠重新訪問原型中的屬性。

使用 hasOwnProperty() 方法可以檢測一個屬性是存在于實(shí)例中，還是存在與原型中。這個方法只在給定屬性存在于對象實(shí)例中時，才會返回 true。

Ⅱ 原型與 in 操作符

in操作符會在通過對象能夠訪問給定屬性時返回true，無論該屬性是存在于實(shí)例中還是原型中。

Ⅲ 更簡單的原型語法

function Person(){ }
Person.prototype = {
    name : "Mike",
    age : 29,
    job : "engineer",    
    syaName : function(){
        alert( this.name );
    }
};

在上面的代碼中，將 Person.prototype 設(shè)置為等于一個以對象字面量形式創(chuàng)建的新對象。最終結(jié)果相同，但有一個例外：constructor 屬性不再指向 Person。

4、組合使用構(gòu)造函數(shù)模式和原型模式

組合使用構(gòu)造函數(shù)模式和原型模式是使用最為廣泛、認(rèn)同度最高的一種創(chuàng)建自定義類型的方法。

它可以解決上面那些模式的缺點(diǎn)，使用此模式可以讓每個實(shí)例都會有自己的一份實(shí)例屬性副本，但同時又共享著對方法的引用，這樣的話，即使實(shí)例屬性修改引用類型的值，也不會影響其他實(shí)例的屬性值了。還支持向構(gòu)造函數(shù)傳遞參數(shù)，可謂是集兩種模式的優(yōu)點(diǎn)。

function Person(name) { 
 this.name = name; 
 this.friends = ['Jack', 'Merry']; 
} 

Person.prototype.sayName = function() { 
 console.log(this.name); 
}

var person1 = new Person(); 
var person2 = new Person(); 

person1.friends.push('Van'); 
console.log(person1.friends); //["Jack", "Merry", "Van"] 
console.log(person2.friends); // ["Jack", "Merry"] 
console.log(person1.friends === person2.friends); //false

5、動態(tài)原型模式

動態(tài)原型模式將所有信息都封裝在了構(gòu)造函數(shù)中，初始化的時候，可以通過檢測某個應(yīng)該存在的方法是否有效，來決定是否需要初始化原型。

function Person(name, job) {

  // 屬性 
 this.name = name;
 this.job = job;

 // 方法 
 if(typeof this.sayName !== 'function') { 
  Person.prototype.sayName = function() { 
    console.log(this.name) 
  } 
 }

} 

var person1 = new Person('Mike', 'Student');
person1.sayName();

只有在 sayName() 方法不存在的時候，才會將它添加到原型中。這段代碼只會初次調(diào)用構(gòu)造函數(shù)的時候才會執(zhí)行。此后原型已經(jīng)完成初始化，不需要在做什么修改了,這里對原型所做的修改，能夠立即在所有實(shí)例中得到反映。

其次，if 語句檢查的可以是初始化之后應(yīng)該存在的任何屬性或方法，所以不必用一大堆的 if 語句檢查每一個屬性和方法，只要檢查一個就行。

6、寄生構(gòu)造函數(shù)模式

這種模式的基本思想就是創(chuàng)建一個函數(shù)，該函數(shù)的作用僅僅是封裝創(chuàng)建對象的代碼，然后再返回新建的對象。

function Person(name, job) { 
  var o = new Object();
  o.name = name;
  o.job = job;
  o.sayName = function() { 
   console.log(this.name) 
 } 
 return o;
}

var person1 = new Person('Mike', 'student');
person1.sayName();

這個模式，除了使用 new 操作符并把使用的包裝函數(shù)叫做構(gòu)造函數(shù)之外，和工廠模式幾乎一樣。

構(gòu)造函數(shù)如果不返回對象，默認(rèn)也會返回一個新的對象，通過在構(gòu)造函數(shù)的末尾添加一個 return 語句，可以重寫調(diào)用構(gòu)造函數(shù)時返回的值。

7、穩(wěn)妥構(gòu)造函數(shù)模式

首先明白穩(wěn)妥對象指的是沒有公共屬性，而且其方法也不引用 this。穩(wěn)妥對象最適合在一些安全環(huán)境中(這些環(huán)境會禁止使用 this 和 new)，或防止數(shù)據(jù)被其他應(yīng)用程序改動時使用。

穩(wěn)妥構(gòu)造函數(shù)模式和寄生模式類似，有兩點(diǎn)不同：

1.是創(chuàng)建對象的實(shí)例方法不引用this；

2.不使用 new 操作符調(diào)用構(gòu)造函數(shù)。

function Person(name, job) { 
 var o = new Object();
 o.name = name;
 o.job = job;
 o.sayName = function() { 
  console.log(name) //注意這里沒有了"this"；
 } 
 return o;
}

var person1 = Person('Mike', 'student');
person1.sayName();

和寄生構(gòu)造函數(shù)模式一樣，這樣創(chuàng)建出來的對象與構(gòu)造函數(shù)之間沒有什么關(guān)系， instanceof 操作符對他們沒有意義。

以上就是JavaScript創(chuàng)建對象的七種經(jīng)典方式分享的詳細(xì)內(nèi)容，更多關(guān)于JavaScript創(chuàng)建對象的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論