JS 的 new 到底是幹什麼的？

大部分講 new 的文章會從物件導向的思路講起，但是我始終認為，在解釋一個事物的時候，不應該引入另一個更復雜的事物。

今天我從「省程式碼」的角度來講 new。

—————————

想象我們在製作一個策略類戰爭遊戲，玩家可以操作一堆士兵攻擊敵方。

我們著重來研究一下這個遊戲裡面的「製造士兵」環節。

一個士兵的在計算機裡就是一堆屬性，如下圖：

我們只需要這樣就可以製造一個士兵：

製造一百個士兵

如果需要製造 100 個士兵怎麼辦呢？

迴圈 100 次吧：

哎呀好簡單。

質疑

上面的程式碼存在一個問題：浪費了很多記憶體。

1. 行走、奔跑、死亡、攻擊、防禦這五個動作對於每個士兵其實是一樣的，只需要各自引用同一個函式就可以了，沒必要重複建立 100 個行走、100個奔跑……
2. 這些士兵的兵種和攻擊力都是一樣的，沒必要建立 100 次。
3. 只有 ID 和生命值需要建立 100 次，因為每個士兵有自己的 ID 和生命值。

改進

看過我們的專欄以前文章（JS 原型鏈）的同學肯定知道，用原型鏈可以解決重複建立的問題：我們先建立一個「士兵原型」，然後讓「士兵」的 __proto__ 指向「士兵原型」

優雅？

有人指出建立一個士兵的程式碼分散在兩個地方很不優雅，於是我們用一個函式把這兩部分聯絡起來：

然後就可以愉快地引用「士兵」來建立士兵了：

JS 之父的關懷

JS 之父建立了 new 關鍵字，可以讓我們少寫幾行程式碼：

只要你在士兵前面使用 new 關鍵字，那麼可以少做四件事情：

1. 不用建立臨時物件，因為 new 會幫你做（你使用「this」就可以訪問到臨時物件）；
2. 不用繫結原型，因為 new 會幫你做（new 為了知道原型在哪，所以指定原型的名字為 prototype）；
3. 不用 return 臨時物件，因為 new 會幫你做；
4. 不要給原型想名字了，因為 new 指定名字為 prototype。

這一次我們用 new 來寫

然後是建立士兵（加了一個 new 關鍵字）：

new 的作用，就是省那麼幾行程式碼。（也就是所謂的語法糖）

注意 constructor 屬性

new 操作為了記錄「臨時物件是由哪個函式建立的」，所以預先給「士兵.prototype」加了一個 constructor 屬性：

如果你重新對「士兵.prototype」賦值，那麼這個 constructor 屬性就沒了，所以你應該這麼寫：

或者你也可以自己給 constructor 重新賦值：

完。