JavaScript 構(gòu)造函數(shù)與 new 命令

目錄

雖然不同于傳統(tǒng)的面向?qū)ο缶幊陶Z言，但是JavaScript具有很強(qiáng)的面向?qū)ο缶幊棠芰?。本章介紹JavaScript如何進(jìn)行“面向?qū)ο缶幊獭薄?/p>

“面向?qū)ο缶幊獭保∣bject Oriented Programming，縮寫為OOP）是目前主流的編程范式。它的核心思想是將真實(shí)世界中各種復(fù)雜的關(guān)系，抽象為一個(gè)個(gè)對(duì)象，然后由對(duì)象之間的分工與合作，完成對(duì)真實(shí)世界的模擬。

傳統(tǒng)的過程式編程（procedural programming）由一系列函數(shù)或一系列指令組成，而面向?qū)ο缶幊痰某绦蛴梢幌盗袑?duì)象組成。每一個(gè)對(duì)象都是功能中心，具有明確分工，可以完成接受信息、處理數(shù)據(jù)、發(fā)出信息等任務(wù)。因此，面向?qū)ο缶幊叹哂徐`活性、代碼的可重用性、模塊性等特點(diǎn)，容易維護(hù)和開發(fā)，非常適合多人合作的大型軟件項(xiàng)目。

那么，“對(duì)象”（object）到底是什么？

我們從兩個(gè)層次來理解。

（1）“對(duì)象”是單個(gè)實(shí)物的抽象。

一本書、一輛汽車、一個(gè)人都可以是“對(duì)象”，一個(gè)數(shù)據(jù)庫、一張網(wǎng)頁、一個(gè)與遠(yuǎn)程服務(wù)器的連接也可以是“對(duì)象”。當(dāng)實(shí)物被抽象成“對(duì)象”，實(shí)物之間的關(guān)系就變成了“對(duì)象”之間的關(guān)系，從而就可以模擬現(xiàn)實(shí)情況，針對(duì)“對(duì)象”進(jìn)行編程。

（2）“對(duì)象”是一個(gè)容器，封裝了“屬性”（property）和“方法”（method）。

所謂“屬性”，就是對(duì)象的狀態(tài)；所謂“方法”，就是對(duì)象的行為（完成某種任務(wù)）。比如，我們可以把動(dòng)物抽象為animal對(duì)象，“屬性”記錄具體是那一種動(dòng)物，“方法”表示動(dòng)物的某種行為（奔跑、捕獵、休息等等）。

“面向?qū)ο缶幊獭钡牡谝徊?，就是要生成“?duì)象”。

前面說過，“對(duì)象”是單個(gè)實(shí)物的抽象。通常需要一個(gè)模板，表示某一類實(shí)物的共同特征，然后“對(duì)象”根據(jù)這個(gè)模板生成。

典型的面向?qū)ο缶幊陶Z言（比如 C++ 和 Java），存在“類”（class）這個(gè)概念。所謂“類”就是對(duì)象的模板，對(duì)象就是“類”的實(shí)例。但是，JavaScript語言的對(duì)象體系，不是基于“類”的，而是基于構(gòu)造函數(shù)（constructor）和原型鏈（prototype）。

JavaScript語言使用構(gòu)造函數(shù)（constructor）作為對(duì)象的模板。所謂“構(gòu)造函數(shù)”，就是專門用來生成“對(duì)象”的函數(shù)。它提供模板，描述對(duì)象的基本結(jié)構(gòu)。一個(gè)構(gòu)造函數(shù)，可以生成多個(gè)對(duì)象，這些對(duì)象都有相同的結(jié)構(gòu)。

構(gòu)造函數(shù)的寫法就是一個(gè)普通的函數(shù)，但是有自己的特征和用法。

var Vehicle = function () {
  this.price = 1000;
};

上面代碼中，Vehicle就是構(gòu)造函數(shù)，它提供模板，用來生成對(duì)象實(shí)例。為了與普通函數(shù)區(qū)別，構(gòu)造函數(shù)名字的第一個(gè)字母通常大寫。

構(gòu)造函數(shù)的特點(diǎn)有兩個(gè)。

• 函數(shù)體內(nèi)部使用了this關(guān)鍵字，代表了所要生成的對(duì)象實(shí)例。
• 生成對(duì)象的時(shí)候，必需用new命令，調(diào)用Vehicle函數(shù)。

基本用法

new命令的作用，就是執(zhí)行構(gòu)造函數(shù)，返回一個(gè)實(shí)例對(duì)象。

var Vehicle = function (){
  this.price = 1000;
};

var v = new Vehicle();
v.price // 1000

上面代碼通過new命令，讓構(gòu)造函數(shù)Vehicle生成一個(gè)實(shí)例對(duì)象，保存在變量v中。這個(gè)新生成的實(shí)例對(duì)象，從構(gòu)造函數(shù)Vehicle繼承了price屬性。在new命令執(zhí)行時(shí)，構(gòu)造函數(shù)內(nèi)部的this，就代表了新生成的實(shí)例對(duì)象，this.price表示實(shí)例對(duì)象有一個(gè)price屬性，它的值是1000。

使用new命令時(shí)，根據(jù)需要，構(gòu)造函數(shù)也可以接受參數(shù)。

var Vehicle = function (p) {
  this.price = p;
};

var v = new Vehicle(500);

new命令本身就可以執(zhí)行構(gòu)造函數(shù)，所以后面的構(gòu)造函數(shù)可以帶括號(hào)，也可以不帶括號(hào)。下面兩行代碼是等價(jià)的。

var v = new Vehicle();
var v = new Vehicle;

一個(gè)很自然的問題是，如果忘了使用new命令，直接調(diào)用構(gòu)造函數(shù)會(huì)發(fā)生什么事？

這種情況下，構(gòu)造函數(shù)就變成了普通函數(shù)，并不會(huì)生成實(shí)例對(duì)象。而且由于后面會(huì)說到的原因，this這時(shí)代表全局對(duì)象，將造成一些意想不到的結(jié)果。

var Vehicle = function (){
  this.price = 1000;
};

var v = Vehicle();
v.price
// Uncaught TypeError: Cannot read property 'price' of undefined

price
// 1000

上面代碼中，調(diào)用Vehicle構(gòu)造函數(shù)時(shí)，忘了加上new命令。結(jié)果，price屬性變成了全局變量，而變量v變成了undefined。

因此，應(yīng)該非常小心，避免出現(xiàn)不使用new命令、直接調(diào)用構(gòu)造函數(shù)的情況。為了保證構(gòu)造函數(shù)必須與new命令一起使用，一個(gè)解決辦法是，在構(gòu)造函數(shù)內(nèi)部使用嚴(yán)格模式，即第一行加上use strict。

function Fubar(foo, bar){
  'use strict';
  this._foo = foo;
  this._bar = bar;
}

Fubar()
// TypeError: Cannot set property '_foo' of undefined

上面代碼的Fubar為構(gòu)造函數(shù)，use strict命令保證了該函數(shù)在嚴(yán)格模式下運(yùn)行。由于在嚴(yán)格模式中，函數(shù)內(nèi)部的this不能指向全局對(duì)象，默認(rèn)等于undefined，導(dǎo)致不加new調(diào)用會(huì)報(bào)錯(cuò)（JavaScript不允許對(duì)undefined添加屬性）。

另一個(gè)解決辦法，是在構(gòu)造函數(shù)內(nèi)部判斷是否使用new命令，如果發(fā)現(xiàn)沒有使用，則直接返回一個(gè)實(shí)例對(duì)象。

function Fubar(foo, bar){
  if (!(this instanceof Fubar)) {
    return new Fubar(foo, bar);
  }

  this._foo = foo;
  this._bar = bar;
}

Fubar(1, 2)._foo // 1
(new Fubar(1, 2))._foo // 1

上面代碼中的構(gòu)造函數(shù)，不管加不加new命令，都會(huì)得到同樣的結(jié)果。

new命令的原理

使用new命令時(shí)，它后面的函數(shù)調(diào)用就不是正常的調(diào)用，而是依次執(zhí)行下面的步驟。

1. 創(chuàng)建一個(gè)空對(duì)象，作為將要返回的對(duì)象實(shí)例
2. 將這個(gè)空對(duì)象的原型，指向構(gòu)造函數(shù)的prototype屬性
3. 將這個(gè)空對(duì)象賦值給函數(shù)內(nèi)部的this關(guān)鍵字
4. 開始執(zhí)行構(gòu)造函數(shù)內(nèi)部的代碼

也就是說，構(gòu)造函數(shù)內(nèi)部，this指的是一個(gè)新生成的空對(duì)象，所有針對(duì)this的操作，都會(huì)發(fā)生在這個(gè)空對(duì)象上。構(gòu)造函數(shù)之所以叫“構(gòu)造函數(shù)”，就是說這個(gè)函數(shù)的目的，就是操作一個(gè)空對(duì)象（即this對(duì)象），將其“構(gòu)造”為需要的樣子。

如果構(gòu)造函數(shù)內(nèi)部有return語句，而且return后面跟著一個(gè)對(duì)象，new命令會(huì)返回return語句指定的對(duì)象；否則，就會(huì)不管return語句，返回this對(duì)象。

var Vehicle = function () {
  this.price = 1000;
  return 1000;
};

(new Vehicle()) === 1000
// false

上面代碼中，構(gòu)造函數(shù)Vehicle的return語句返回一個(gè)數(shù)值。這時(shí)，new命令就會(huì)忽略這個(gè)return語句，返回“構(gòu)造”后的this對(duì)象。

但是，如果return語句返回的是一個(gè)跟this無關(guān)的新對(duì)象，new命令會(huì)返回這個(gè)新對(duì)象，而不是this對(duì)象。這一點(diǎn)需要特別引起注意。

var Vehicle = function (){
  this.price = 1000;
  return { price: 2000 };
};

(new Vehicle()).price
// 2000

上面代碼中，構(gòu)造函數(shù)Vehicle的return語句，返回的是一個(gè)新對(duì)象。new命令會(huì)返回這個(gè)對(duì)象，而不是this對(duì)象。

另一方面，如果對(duì)普通函數(shù)（內(nèi)部沒有this關(guān)鍵字的函數(shù)）使用new命令，則會(huì)返回一個(gè)空對(duì)象。

function getMessage() {
  return 'this is a message';
}

var msg = new getMessage();

msg // {}
typeof msg // "Object"

上面代碼中，getMessage是一個(gè)普通函數(shù)，返回一個(gè)字符串。對(duì)它使用new命令，會(huì)得到一個(gè)空對(duì)象。這是因?yàn)?code class="highlighter-rouge">new命令總是返回一個(gè)對(duì)象，要么是實(shí)例對(duì)象，要么是return語句指定的對(duì)象。本例中，return語句返回的是字符串，所以new命令就忽略了該語句。

new命令簡化的內(nèi)部流程，可以用下面的代碼表示。

function _new(/* 構(gòu)造函數(shù) */ constructor, /* 構(gòu)造函數(shù)參數(shù) */ param1) {
  // 將 arguments 對(duì)象轉(zhuǎn)為數(shù)組
  var args = [].slice.call(arguments);
  // 取出構(gòu)造函數(shù)
  var constructor = args.shift();
  // 創(chuàng)建一個(gè)空對(duì)象，繼承構(gòu)造函數(shù)的 prototype 屬性
  var context = Object.create(constructor.prototype);
  // 執(zhí)行構(gòu)造函數(shù)
  var result = constructor.apply(context, args);
  // 如果返回結(jié)果是對(duì)象，就直接返回，則返回 context 對(duì)象
  return (typeof result === 'object' && result != null) ? result : context;
}

// 實(shí)例
var actor = _new(Person, '張三', 28);

new.target

函數(shù)內(nèi)部可以使用new.target屬性。如果當(dāng)前函數(shù)是new命令調(diào)用，new.target指向當(dāng)前函數(shù)，否則為undefined。

function f() {
  console.log(new.target === f);
}

f() // false
new f() // true