在上一篇文章中我們介紹了JavaScript簡單對象的創(chuàng)建方法，簡單js對象的最大問題是由于沒有類的約束，無法實(shí)現(xiàn)對象的重復(fù)利用，并且沒有一種約定，在操作時(shí)會(huì)帶來問題。所以人們從設(shè)計(jì)模式中借用了一種工廠模式來創(chuàng)建JavaScript對象。

使用工廠方法創(chuàng)建JavaScript對象

工廠方法的的思路是在一個(gè)函數(shù)中創(chuàng)建一個(gè)對象，然后為這個(gè)對象設(shè)置相應(yīng)的屬性和方法，最后將這個(gè)對象返回。通過函數(shù)來封裝，以特定的接口創(chuàng)建對象。下面是一個(gè)以工廠方法創(chuàng)建person對象的例子：

function createPerson(name,age){

var o = new Object();

o.name = name;

o.age = age;

o.say = function(){

alert(this.name + "," + this.age);

}

return o;

}

// 實(shí)例化p1和p2對象

var p1 = createPerson("Leon",22);

var p2 = createPerson("Ada",20);

//調(diào)用p1和p2對象的say()方法

p1.say();

p2.say();

使用工廠方法雖然有效的解決了類的問題，但是依然存在另外一個(gè)問題。我們無法檢測對象p1和p2的數(shù)據(jù)類型。我們使用typeof僅僅只能檢測出對象是一個(gè)Object類型：

console.info(typeof p1); // 控制臺(tái)輸出：Object

如果我們想要使用instanceof來判斷對象的類型，那么p1 instanceof ?，instanceof后面要填寫什么類型呢？我們并不知道。

使用構(gòu)造函數(shù)創(chuàng)建JavaScript對象

由于工廠方法不能確定對象的具體類型，所以人們又提出了一種新的創(chuàng)建JavaScript對象的方法——構(gòu)造函數(shù)方法。在JavaScript中構(gòu)造函數(shù)可以用來創(chuàng)建特定類型的對象，例如Object和Array這些js原生構(gòu)造函數(shù)，在運(yùn)行時(shí)會(huì)自動(dòng)出現(xiàn)在執(zhí)行環(huán)境中。我們也可以自定義構(gòu)造函數(shù)，從而定義自定義類型的屬性和方法。

使用構(gòu)造函數(shù)來創(chuàng)建類和基于工廠的方式來創(chuàng)建類的方法相似，最大的區(qū)別是函數(shù)的名稱就是類的名稱。通常按照編程規(guī)范的約定，類的第一個(gè)字母大寫。使用構(gòu)造函數(shù)創(chuàng)建類時(shí)，在函數(shù)內(nèi)部通過this關(guān)鍵字來完成屬性的定義。

// 使用構(gòu)造函數(shù)方式來創(chuàng)建Person類

function Person(name,age){

this.name = name;

this.age = age;

this.say = function(){

console.info(this.name + "," + this.age);

}

}

// 通過new關(guān)鍵字來創(chuàng)建對象

var p1 = new Person("Leon",22);

var p2 = new Person("Ada",20);

// 調(diào)用對象的方法

p1.say();

p1.say();

如上面的代碼所示，在完成類的創(chuàng)建之后，我們可以通過new關(guān)鍵字來實(shí)例化對象。

使用構(gòu)造函數(shù)的方式很好的解決了檢測對象類型的問題，我們可以通過instanceof關(guān)鍵字來判斷對象是不是Person類型：

console.info(p1 instanceof Person); //控制臺(tái)顯示：true

console.info(p2 instanceof Person); //控制臺(tái)顯示：true

另外，我們還可以通過constructor關(guān)鍵字來查看對象的構(gòu)造函數(shù)是否是Person類型：

console.info(p1.constructor == Person); //控制臺(tái)顯示：true

console.info(p2.constructor == Person); //控制臺(tái)顯示：true

或者直接打印出p1和p2的構(gòu)造函數(shù)來進(jìn)行比較：

console.info(p1.constructor);

console.info(p2.constructor);

使用構(gòu)造函數(shù)方法給我們所帶來的問題是每一個(gè)對象中都會(huì)存在一個(gè)方法的拷貝，如果對象的方法很多的話，就會(huì)占用大量的內(nèi)存空間。

在一些高級的編譯型的面向?qū)ο缶幊陶Z言(如Java)中，對象的方法是在運(yùn)行時(shí)動(dòng)態(tài)在棧區(qū)產(chǎn)生的，它們不會(huì)占用內(nèi)存。而在Javascript中，使用構(gòu)造函數(shù)方法創(chuàng)建的對象，對象中的每一個(gè)方法都是類方法的一個(gè)拷貝，如果對象中存在大量的方法，就會(huì)占用大量的內(nèi)存空間。

我們可以將類的方法放到全局變量中來定義，這樣可以讓類中的方法指向同一個(gè)函數(shù)。代碼如下：

// 使用構(gòu)造函數(shù)方式來創(chuàng)建Person類

function Person(name,age){

this.name = name;

this.age = age;

// 此時(shí)的類方法是一個(gè)全局方法的引用

this.say = say;

}

//將方法設(shè)置為全局的方法

function say(){

alert(this.name + "," + this.age);

}

通過將類的方法設(shè)置為全局方法，可以解決對象中的方法占用內(nèi)存空間的問題，此時(shí)，通過構(gòu)造函數(shù)創(chuàng)建的所有對象中的方法都指向同一個(gè)全局函數(shù)。

但是如果將所有的方法都設(shè)置為全局函數(shù)，這些函數(shù)都可以被window調(diào)用，此時(shí)就破壞了對象的封裝性，而且如果某個(gè)對象有大量的方法，就會(huì)導(dǎo)致代碼中有大量的全局函數(shù)，這樣也不利于我們的開發(fā)。

為了解決構(gòu)造函數(shù)方法存在這些缺陷，我們就要使用原型來創(chuàng)建對象，下一篇文章我們將介紹使用原型來創(chuàng)建JavaScript對象。

相關(guān)閱讀

總結(jié)

以上是生活随笔為你收集整理的html5创建对象的方法,JavaScript面向对象-使用工厂方法和构造函数方法创建对象...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。