作者 | 湯姆大叔
介紹
構造函數大家都很熟悉了，不過如果你是新手，還是有必要來了解一下什麼叫構造函數的。構造函數用于建立特定類型的對象——不僅聲明了使用的對象，構造函數還可以接受參數以便第一次建立對象的時候設定對象的成員值。你可以自定義自己的構造函數，然後在裡面聲明自定義類型對象的屬性或方法。
基本用法
在JavaScript裡，構造函數通常是認為用來實作執行個體的，JavaScript沒有類的概念，但是有特殊的構造函數。通過new關鍵字來調用定義的否早函數，你可以告訴JavaScript你要建立一個新對象并且新對象的成員聲明都是構造函數裡定義的。在構造函數内部，this關鍵字引用的是新建立的對象。基本用法如下：
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()); 上面的例子是個非常簡單的構造函數模式，但是有點小問題。首先是使用繼承很麻煩了，其次output()在每次建立對象的時候都重新定義了，最好的方法是讓所有Car類型的執行個體都共享這個output()方法，這樣如果有大批量的執行個體的話，就會節約很多記憶體。
解決這個問題，我們可以使用如下方式：
function Car(model, year, miles) {
this.model = model;
this.year = year;
this.miles = miles;
this.output= formatCar;
}
function formatCar() {
return this.model + "走了" + this.miles + "公裡";
} 這個方式雖然可用，但是我們有如下更好的方式。
構造函數與原型
JavaScript裡函數有個原型屬性叫prototype，當調用構造函數建立對象的時候，所有該構造函數原型的屬性在新建立對象上都可用。按照這樣，多個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對象執行個體裡共享使用。
另外：我們推薦構造函數以大寫字母開頭，以便區分普通的函數。
隻能用new嗎？
上面的例子對函數car都是用new來建立對象的，隻有這一種方式麼？其實還有别的方式，我們列舉兩種：
function Car(model, year, miles) {
this.model = model;
this.year = year;
this.miles = miles;
// 自定義一個output輸出内容
this.output = function () {
return this.model + "走了" + this.miles + "公裡";
}
}
//方法1：作為函數調用
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直接調用函數的話，this指向的是全局對象window，我們來驗證一下：
//作為函數調用
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的問題，那麼我們有沒有辦法讓構造函數強制使用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還是繼續執行代碼，如果使用的是new關鍵字，則(this instanceof Car)為真，會繼續執行下面的參數指派，如果沒有用new，(this instanceof Car)就為假，就會重新new一個執行個體傳回。
原始包裝函數
JavaScript裡有3中原始包裝函數：number, string, boolean，有時候兩種都用：
// 使用原始包裝函數
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; 推薦，隻有在想保留數值狀态的時候使用這些包裝函數，關于差別可以參考下面的代碼：
// 原始string
var greet = "Hello there";
// 使用split()方法分割
greet.split(' ')[0]; // "Hello"
// 給原始類型添加新屬性不會報錯
greet.smile = true;
// 單沒法擷取這個值（18章ECMAScript實作裡我們講了為什麼）
console.log(typeof greet.smile); // "undefined"
// 原始string
var greet = new String("Hello there");
// 使用split()方法分割
greet.split(' ')[0]; // "Hello"
// 給包裝函數類型添加新屬性不會報錯
greet.smile = true;
// 可以正常通路新屬性
console.log(typeof greet.smile); // "boolean" 總結
本章主要講解了構造函數模式的使用方法、調用方法以及new關鍵字的差別，希望大家在使用的時候有所注意。
參考：http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/#constructorpatternjavascript
