深入理解JavaScript系列（26）：設計模式之構造函數(shù)模式詳解

來源：易賢網(wǎng) 閱讀：755 次日期：2015-03-06 10:51:22

溫馨提示：易賢網(wǎng)小編為您整理了“深入理解JavaScript系列（26）：設計模式之構造函數(shù)模式詳解”,方便廣大網(wǎng)友查閱！

這篇文章主要介紹了深入理解JavaScript系列（26）：設計模式之構造函數(shù)模式詳解,本文講解了基本用法、構造函數(shù)與原型、只能用new嗎？、強制使用new、原始包裝函數(shù)等內容,需要的朋友可以參考下

介紹

構造函數(shù)大家都很熟悉了，不過如果你是新手，還是有必要來了解一下什么叫構造函數(shù)的。構造函數(shù)用于創(chuàng)建特定類型的對象——不僅聲明了使用的對象，構造函數(shù)還可以接受參數(shù)以便第一次創(chuàng)建對象的時候設置對象的成員值。你可以自定義自己的構造函數(shù)，然后在里面聲明自定義類型對象的屬性或方法。

基本用法

在JavaScript里，構造函數(shù)通常是認為用來實現(xiàn)實例的，JavaScript沒有類的概念，但是有特殊的構造函數(shù)。通過new關鍵字來調用定義的否早函數(shù)，你可以告訴JavaScript你要創(chuàng)建一個新對象并且新對象的成員聲明都是構造函數(shù)里定義的。在構造函數(shù)內部，this關鍵字引用的是新創(chuàng)建的對象?；居梅ㄈ缦拢?/P>

代碼如下:

function Car(model, year, miles) {

this.model = model;

this.year = year;

this.miles = miles;

this.output= function () {

return this.model + "走了" + this.miles + "公里";

};

}

var tom= new Car("大叔", 2009, 20000);

var dudu= new Car("Dudu", 2010, 5000);

console.log(tom.output());

console.log(dudu.output());

上面的例子是個非常簡單的構造函數(shù)模式，但是有點小問題。首先是使用繼承很麻煩了，其次output()在每次創(chuàng)建對象的時候都重新定義了，最好的方法是讓所有Car類型的實例都共享這個output()方法，這樣如果有大批量的實例的話，就會節(jié)約很多內存。

解決這個問題，我們可以使用如下方式：

代碼如下:

function Car(model, year, miles) {

this.model = model;

this.year = year;

this.miles = miles;

this.output= formatCar;

}

function formatCar() {

return this.model + "走了" + this.miles + "公里";

}

這個方式雖然可用，但是我們有如下更好的方式。

構造函數(shù)與原型

JavaScript里函數(shù)有個原型屬性叫prototype，當調用構造函數(shù)創(chuàng)建對象的時候，所有該構造函數(shù)原型的屬性在新創(chuàng)建對象上都可用。按照這樣，多個Car對象實例可以共享同一個原型，我們再擴展一下上例的代碼：

代碼如下:

function Car(model, year, miles) {

this.model = model;

this.year = year;

this.miles = miles;

}

注意：這里我們使用了Object.prototype.方法名，而不是Object.prototype

主要是用來避免重寫定義原型prototype對象

Car.prototype.output= function () {

return this.model + "走了" + this.miles + "公里";

};

var tom = new Car("大叔", 2009, 20000);

var dudu = new Car("Dudu", 2010, 5000);

console.log(tom.output());

console.log(dudu.output());

這里，output()單實例可以在所有Car對象實例里共享使用。

另外：我們推薦構造函數(shù)以大寫字母開頭，以便區(qū)分普通的函數(shù)。

只能用new嗎？

上面的例子對函數(shù)car都是用new來創(chuàng)建對象的，只有這一種方式么？其實還有別的方式，我們列舉兩種：

代碼如下:

function Car(model, year, miles) {

this.model = model;

this.year = year;

this.miles = miles;

// 自定義一個output輸出內容

this.output = function () {

return this.model + "走了" + this.miles + "公里";

}

//方法1：作為函數(shù)調用

Car("大叔", 2009, 20000); //添加到window對象上

console.log(window.output());

//方法2：在另外一個對象的作用域內調用

var o = new Object();

Car.call(o, "Dudu", 2010, 5000);

console.log(o.output());

該代碼的方法1有點特殊，如果不適用new直接調用函數(shù)的話，this指向的是全局對象window，我們來驗證一下：

代碼如下:

//作為函數(shù)調用

var tom = Car("大叔", 2009, 20000);

console.log(typeof tom); // "undefined"

console.log(window.output()); // "大叔走了20000公里"

這時候對象tom是undefined，而window.output()會正確輸出結果，而如果使用new關鍵字則沒有這個問題，驗證如下：

代碼如下:

//使用new 關鍵字

var tom = new Car("大叔", 2009, 20000);

console.log(typeof tom); // "object"

console.log(tom.output()); // "大叔走了20000公里"

強制使用new

上述的例子展示了不使用new的問題，那么我們有沒有辦法讓構造函數(shù)強制使用new關鍵字呢，答案是肯定的，上代碼：

代碼如下:

function Car(model, year, miles) {

if (!(this instanceof Car)) {

return new Car(model, year, miles);

}

this.model = model;

this.year = year;

this.miles = miles;

this.output = function () {

return this.model + "走了" + this.miles + "公里";

}

var tom = new Car("大叔", 2009, 20000);

var dudu = Car("Dudu", 2010, 5000);

console.log(typeof tom); // "object"

console.log(tom.output()); // "大叔走了20000公里"

console.log(typeof dudu); // "object"

console.log(dudu.output()); // "Dudu走了5000公里"

通過判斷this的instanceof是不是Car來決定返回new Car還是繼續(xù)執(zhí)行代碼，如果使用的是new關鍵字，則(this instanceof Car)為真，會繼續(xù)執(zhí)行下面的參數(shù)賦值，如果沒有用new，(this instanceof Car)就為假，就會重新new一個實例返回。

原始包裝函數(shù)

JavaScript里有3中原始包裝函數(shù)：number, string, boolean，有時候兩種都用：

代碼如下:

// 使用原始包裝函數(shù)

var s = new String("my string");

var n = new Number(101);

var b = new Boolean(true);

// 推薦這種

var s = "my string";

var n = 101;

var b = true;

推薦，只有在想保留數(shù)值狀態(tài)的時候使用這些包裝函數(shù)，關于區(qū)別可以參考下面的代碼：