js編程思想：模型進化論--JS 的 new 到底是幹什麽的？
想象我們在制作一個策略類戰爭遊戲，玩家可以操作一堆士兵攻擊敵方。
我們著重來研究一下這個遊戲裏面的「制造士兵」環節。
一個士兵的在計算機裏就是一堆屬性，如下圖：
一、荒蠻時代：對象是數據的集合
我們只需要這樣就可以制造一個士兵：
var 士兵 = {
ID: 1, // 用於區分每個士兵
兵種:"美國大兵",
攻擊力:5,
生命值:42,
行走:function(){ /*走倆步的代碼*/},
奔跑:function(){ /*狂奔的代碼*/ },
死亡:function(){ /*Go die*/ },
攻擊:function(){
防禦:function(){ /*護臉*/ }
}
兵營.制造(士兵)
制造一百個士兵
如果需要制造 100 個士兵怎麽辦呢？
循環 100 次吧：
var 士兵們 = []
var 士兵
for(var i=0; i<100; i++){
士兵 = {
ID: i, // ID 不能重復
兵種:"美國大兵",
攻擊力:5,
生命值:42,
行走:function(){ /*走倆步的代碼*/}，
奔跑:function(){ /*狂奔的代碼*/ },
死亡:function(){ /*Go die*/ },
攻擊:function(){ /*糊他熊臉*/ },
防禦:function(){ /*護臉*/ }
}
士兵們.push(士兵)
}
兵營.批量制造(士兵們)
哎呀好簡單。
質疑
上面的代碼存在一個問題：浪費了很多內存。
行走、奔跑、死亡、攻擊、防禦這五個動作對於每個士兵其實是一樣的，只需要各自引用同一個函數就可以了，沒必要重復創建 100 個行走、100個奔跑……
這些士兵的兵種和攻擊力都是一樣的，沒必要創建 100 次。
只有 ID 和生命值需要創建 100 次，因為每個士兵有自己的 ID 和生命值。
二、原型時代：對於公用的封裝
改進
看過我們的專欄以前文章（JS 原型鏈）的同學肯定知道，用原型鏈可以解決重復創建的問題：我們先創建一個「士兵原型」，然後讓「士兵」的 __proto__ 指向「士兵原型」
var 士兵原型 = {
兵種:"美國大兵",
攻擊力:5,
行走:function(){ /*走倆步的代碼*/}，
奔跑:function(){ /*狂奔的代碼*/ },
死亡:function(){ /*Go die*/ },
攻擊:function(){ /*糊他熊臉*/ },
防禦:function(){ /*護臉*/ }
}
var 士兵們 = []
var 士兵
for(var i=0; i<100; i++){
士兵 = {
ID: i, // ID 不能重復
生命值:42
}
/*實際工作中不要這樣寫，因為 __proto__ 不是標準屬性*/
士兵.__proto__ = 士兵原型
士兵們.push(士兵)
}
兵營.批量制造(士兵們)
三、原型+臨時模版時代
優雅？
有人指出創建一個士兵的代碼分散在兩個地方很不優雅，於是我們用一個函數把這兩部分聯系起來：
function 士兵(ID){
var 臨時對象 = {}
臨時對象.__proto__ = 士兵.原型
臨時對象.ID = ID
臨時對象.生命值 = 42
return 臨時對象
}
士兵.原型 = {
兵種:"美國大兵",
攻擊力:5,
行走:function(){ /*走倆步的代碼*/}，
奔跑:function(){ /*狂奔的代碼*/ },
死亡:function(){ /*Go die*/ },
攻擊:function(){ /*糊他熊臉*/ },
防禦:function(){ /*護臉*/ }
}
// 保存為文件：士兵.js
然後就可以愉快地引用「士兵」來創建士兵了：
var 士兵們 = []
for(var i=0; i<100; i++){
士兵們.push(士兵(i))
}
兵營.批量制造(士兵們)
四、模版+原型+二階構造：new時代
JS 之父的關懷
JS 之父創建了 new 關鍵字，可以讓我們少寫幾行代碼：
只要你在士兵前面使用 new 關鍵字，那麽可以少做四件事情：
不用創建臨時對象，因為 new 會幫你做（你使用「this」就可以訪問到臨時對象）；
不用綁定原型，因為 new 會幫你做（new 為了知道原型在哪，所以指定原型的名字為 prototype）；
不用 return 臨時對象，因為 new 會幫你做；
不要給原型想名字了，因為 new 指定名字為 prototype。
這一次我們用 new 來寫
function 士兵(ID){
this.ID = ID
this.生命值 = 42
}
士兵.prototype = {
兵種:"美國大兵",
攻擊力:5,
行走:function(){ /*走倆步的代碼*/},
奔跑:function(){ /*狂奔的代碼*/ },
死亡:function(){ /*Go die*/ },
攻擊:function(){ /*糊他熊臉*/ },
防禦:function(){ /*護臉*/ }
}
// 保存為文件：士兵.js
然後是創建士兵（加了一個 new 關鍵字）：
var 士兵們 = []
for(var i=0; i<100; i++){
士兵們.push(new 士兵(i))
}
兵營.批量制造(士兵們)
new 的作用，就是省那麽幾行代碼。（也就是所謂的語法糖）
註意 constructor 屬性
new 操作為了記錄「臨時對象是由哪個函數創建的」，所以預先給「士兵.prototype」加了一個 constructor 屬性：
士兵.prototype = {
constructor: 士兵
}
https://zhuanlan.zhihu.com/p/23987456
js編程思想：模型進化論--JS 的 new 到底是幹什麽的？