1 物件是什麼

物件是單個實物的抽象。通常有一個模板表示共同特徵，然後物件根據這個模板生成。

典型的面向物件程式語言（比如C++和Java），都有“類”（class）這個概念。所謂“類”就是物件的模板，物件就是“類”的例項。但是JavaScript的物件體系，不是基於“類”的，而是基於建構函式（constructor）和原型鏈（prototype）。

2 建構函式

JavaScript使用建構函式（constructor）作為物件的模板。所謂“建構函式”，就是專門用來生成例項物件的函式。它是物件的模板，描述了例項物件的基本結構。

建構函式其實是一個普通的函式，但是有自己的特徵和用法。

var Person = function() {
    this.age = 30;
}

上面程式碼中，Person就是一個建構函式。為了與普通函式區別，建構函式名字的第一個字母通常大寫。

建構函式的特點有兩個。

• 函式內部使用了this關鍵字，代表所要生成的物件例項。
• 生成物件的時候，必須使用new命令。

3 new命令

3.1 基本用法

new命令的作用，就是執行建構函式，返回一個例項物件。

var Person = function() {
    this.age = 30;
};

var p = new Person();
p.age // 30
 

上面程式碼中，通過new命令讓建構函式Person生成一個例項物件，儲存在變數p中。建構函式內部的this，代表新生成的例項物件。

new命令本身就可以執行建構函式，所以後面的建構函式可以帶括號，也可以不帶括號。下面兩行程式碼是等價的，但為了表示這是函式呼叫，推薦使用括號。

var p = new Person(); // 推薦的寫法
var p = new Person; // 不推薦的寫法

如果忘了使用new命令，直接呼叫建構函式會發生什麼呢？

這種情況下，建構函式變成普通函式，並不會生成例項物件。而且，這時this代表全域性物件，還將造成一些意想不到的結果。

var Person = function() {
    this.age = 30;
};

var p = Person();
p // undefined
age // 30
 

上面程式碼中，呼叫Person建構函式時，忘了加上new命令，結果，變數p變成了undefined，而age屬性變成了全域性變數。

3.2 new命令的原理

使用new命令時，內部將依次執行下面的步驟。

1. 建立一個空物件，作為將要返回的物件例項。
2. 將這個空物件的原型，指向建構函式的prototype屬性。
3. 將這個空物件賦值給函式內部的this關鍵字。
4. 開始執行建構函式內部的程式碼。

也就是說，建構函式內部，this指向的是一個新生成的空物件，所有this操作，都發生在這個空物件上。

new命令簡化的內部流程，可以用下面的程式碼表示。

function _new(/* 建構函式 */ constructor, /* 建構函式引數 */ params) {
  // 將 arguments 物件轉為陣列
  var args = [].slice.call(arguments);
  // 取出建構函式
  var constructor = args.shift();
  // 建立一個空物件，繼承建構函式的 prototype 屬性
  var context = Object.create(constructor.prototype);
  // 執行建構函式
  var result = constructor.apply(context, args);
  // 如果返回結果是物件，就直接返回，否則返回 context 物件
  return (typeof result === 'object' && result != null) ? result : context;
}

// 例項
var man1 = _new(Person, '張三', 28);

3.3 new.target

函式內部可以使用new.target屬性。如果當前函式是new命令呼叫，new.target指向當前函式，否則為undefined。

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

注：本文適用於ES5規範，原始內容來自 JavaScript 教程，有修改。