介紹

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

基本用法

在 JavaScript 里，構(gòu)造函數(shù)通常是認(rèn)為用來(lái)實(shí)現(xiàn)實(shí)例的，JavaScript 沒(méi)有類(lèi)的概念，但是有特殊的構(gòu)造函數(shù)。通過(guò) new 關(guān)鍵字來(lái)調(diào)用定義的否早函數(shù)，你可以告訴 JavaScript 你要?jiǎng)?chuàng)建一個(gè)新對(duì)象并且新對(duì)象的成員聲明都是構(gòu)造函數(shù)里定義的。在構(gòu)造函數(shù)內(nèi)部，this 關(guān)鍵字引用的是新創(chuàng)建的對(duì)象。基本用法如下：

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

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

解決這個(gè)問(wèn)題，我們可以使用如下方式：

function Car(model, year, miles) {
    this.model = model;
    this.year = year;
    this.miles = miles;
    this.output= formatCar;
}
function formatCar() {
    return this.model + "走了" + this.miles + "公里";
}

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

構(gòu)造函數(shù)與原型

JavaScript 里函數(shù)有個(gè)原型屬性叫 prototype，當(dāng)調(diào)用構(gòu)造函數(shù)創(chuàng)建對(duì)象的時(shí)候，所有該構(gòu)造函數(shù)原型的屬性在新創(chuàng)建對(duì)象上都可用。按照這樣，多個(gè) Car 對(duì)象實(shí)例可以共享同一個(gè)原型，我們?cè)贁U(kuò)展一下上例的代碼：

function Car(model, year, miles) {
    this.model = model;
    this.year = year;
    this.miles = miles;
}
/*
注意：這里我們使用了Object.prototype.方法名，而不是Object.prototype
主要是用來(lái)避免重寫(xiě)定義原型prototype對(duì)象
*/
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()單實(shí)例可以在所有 Car 對(duì)象實(shí)例里共享使用。

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

只能用 new 嗎？

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

function Car(model, year, miles) {
    this.model = model;
    this.year = year;
    this.miles = miles;
    // 自定義一個(gè)output輸出內(nèi)容
    this.output = function () {
        return this.model + "走了" + this.miles + "公里";
    }
}
//方法1：作為函數(shù)調(diào)用
Car("大叔", 2009, 20000);  //添加到window對(duì)象上
console.log(window.output());
//方法2：在另外一個(gè)對(duì)象的作用域內(nèi)調(diào)用
var o = new Object();
Car.call(o, "Dudu", 2010, 5000);
console.log(o.output()); 

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

//作為函數(shù)調(diào)用
var tom = Car("大叔", 2009, 20000);
console.log(typeof tom); // "undefined"
console.log(window.output()); // "大叔走了20000公里"

這時(shí)候?qū)ο?tom 是 undefined，而 window.output()會(huì)正確輸出結(jié)果，而如果使用 new 關(guān)鍵字則沒(méi)有這個(gè)問(wèn)題，驗(yàn)證如下：

//使用new 關(guān)鍵字
var tom = new Car("大叔", 2009, 20000);
console.log(typeof tom); // "object"
console.log(tom.output()); // "大叔走了20000公里"

強(qiáng)制使用 new

上述的例子展示了不使用 new 的問(wèn)題，那么我們有沒(méi)有辦法讓構(gòu)造函數(shù)強(qiáng)制使用 new 關(guān)鍵字呢，答案是肯定的，上代碼：

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公里"

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

原始包裝函數(shù)

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

// 使用原始包裝函數(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í)候使用這些包裝函數(shù)，關(guān)于區(qū)別可以參考下面的代碼：

// 原始string
var greet = "Hello there";
// 使用split()方法分割
greet.split(' ')[0]; // "Hello"
// 給原始類(lèi)型添加新屬性不會(huì)報(bào)錯(cuò)
greet.smile = true;
// 單沒(méi)法獲取這個(gè)值（18章ECMAScript實(shí)現(xiàn)里我們講了為什么）
console.log(typeof greet.smile); // "undefined"
// 原始string
var greet = new String("Hello there");
// 使用split()方法分割
greet.split(' ')[0]; // "Hello"
// 給包裝函數(shù)類(lèi)型添加新屬性不會(huì)報(bào)錯(cuò)
greet.smile = true;
// 可以正常訪問(wèn)新屬性
console.log(typeof greet.smile); // "boolean"

總結(jié)

本章主要講解了構(gòu)造函數(shù)模式的使用方法、調(diào)用方法以及new關(guān)鍵字的區(qū)別，希望大家在使用的時(shí)候有所注意。