【轉】JS 的 new 究竟是幹什麼的？

原文：https://zhuanlan.zhihu.com/p/23987456?refer=study-fe

大部分講 new 的文章會從面向對象的思路講起，可是我始終認爲，在解釋一個事物的時候，不該該引入另外一個更復雜的事物。

今天我從「省代碼」的角度來說 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(士兵)
}

兵營.批量製造(士兵們)

 

哎呀好簡單。

質疑

上面的代碼存在一個問題：浪費了不少內存。

1. 行走、奔跑、死亡、攻擊、防護這五個動做對於每一個士兵實際上是同樣的，只須要各自引用同一個函數就能夠了，不必重複建立 100 個行走、100個奔跑……
2. 這些士兵的兵種和攻擊力都是同樣的，不必建立 100 次。
3. 只有 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))
}

兵營.批量製造(士兵們)

JS 之父的關懷

JS 之父建立了 new 關鍵字，可讓咱們少寫幾行代碼：

 

只要你在士兵前面使用 new 關鍵字，那麼能夠少作四件事情：

1. 不用建立臨時對象，由於 new 會幫你作（你使用「this」就能夠訪問到臨時對象）；
2. 不用綁定原型，由於 new 會幫你作（new 爲了知道原型在哪，因此指定原型的名字爲 prototype）；
3. 不用 return 臨時對象，由於 new 會幫你作；
4. 不要給原型想名字了，由於 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: 士兵
}

 

若是你從新對「士兵.prototype」賦值，那麼這個 constructor 屬性就沒了，因此你應該這麼寫：

士兵.prototype.兵種 = "美國大兵"
士兵.prototype.攻擊力 = 5
士兵.prototype.行走 = function(){ /*走倆步的代碼*/}
士兵.prototype.奔跑 = function(){ /*狂奔的代碼*/  }
士兵.prototype.死亡 = function(){ /*Go die*/    }
士兵.prototype.攻擊 = function(){ /*糊他熊臉*/   }
士兵.prototype.防護 = function(){ /*護臉*/       }

 

或者你也能夠本身給 constructor 從新賦值：

 

士兵.prototype = {
  constructor: 士兵,
  兵種:"美國大兵",
  攻擊力:5,
  行走:function(){ /*走倆步的代碼*/},
  奔跑:function(){ /*狂奔的代碼*/  },
  死亡:function(){ /*Go die*/    },
  攻擊:function(){ /*糊他熊臉*/   },
  防護:function(){ /*護臉*/       }
}

完。