大部分講 new 的文章會(huì)從面向?qū)ο蟮乃悸分v起，但是我始終認(rèn)為，在解釋一個(gè)事物的時(shí)候，不應(yīng)該引入另一個(gè)更復(fù)雜的事物。

今天我從「省代碼」的角度來(lái)講 new。

---------------------------

想象我們?cè)谥谱饕粋€(gè)策略類(lèi)戰(zhàn)爭(zhēng)游戲，玩家可以操作一堆士兵攻擊敵方。

我們著重來(lái)研究一下這個(gè)游戲里面的「制造士兵」環(huán)節(jié)。

一個(gè)士兵的在計(jì)算機(jī)里就是一堆屬性，如下圖：

我們只需要這樣就可以制造一個(gè)士兵：

var 士兵 = {ID: 1, // 用于區(qū)分每個(gè)士兵 兵種:"美國(guó)大兵", 攻擊力:5, 生命值:42, 行走:function(){ /*走倆步的代碼*/}, 奔跑:function(){ /*狂奔的代碼*/ }, 死亡:function(){ /*Go die*/ }, 攻擊:function(){ /*糊他熊臉*/ }, 防御:function(){ /*護(hù)臉*/ } } 兵營(yíng).制造(士兵)

制造一百個(gè)士兵

如果需要制造 100 個(gè)士兵怎么辦呢？

循環(huán) 100 次吧：

var 士兵們 = [] var 士兵 for(var i=0; i<100; i++){士兵 = {ID: i, // ID 不能重復(fù)兵種:"美國(guó)大兵",攻擊力:5,生命值:42, 行走:function(){ /*走倆步的代碼*/}，奔跑:function(){ /*狂奔的代碼*/ },死亡:function(){ /*Go die*/ },攻擊:function(){ /*糊他熊臉*/ },防御:function(){ /*護(hù)臉*/ }}士兵們.push(士兵) }兵營(yíng).批量制造(士兵們)

哎呀好簡(jiǎn)單。

質(zhì)疑

上面的代碼存在一個(gè)問(wèn)題：浪費(fèi)了很多內(nèi)存。

行走、奔跑、死亡、攻擊、防御這五個(gè)動(dòng)作對(duì)于每個(gè)士兵其實(shí)是一樣的，只需要各自引用同一個(gè)函數(shù)就可以了，沒(méi)必要重復(fù)創(chuàng)建 100 個(gè)行走、100個(gè)奔跑……

這些士兵的兵種和攻擊力都是一樣的，沒(méi)必要?jiǎng)?chuàng)建 100 次。

只有 ID 和生命值需要?jiǎng)?chuàng)建 100 次，因?yàn)槊總€(gè)士兵有自己的 ID 和生命值。

?

改進(jìn)

看過(guò)我們的專(zhuān)欄以前文章（JS 原型鏈）的同學(xué)肯定知道，用原型鏈可以解決重復(fù)創(chuàng)建的問(wèn)題：我們先創(chuàng)建一個(gè)「士兵原型」，然后讓「士兵」的 __proto__ 指向「士兵原型」

var 士兵原型 = {兵種:"美國(guó)大兵",攻擊力:5,行走:function(){ /*走倆步的代碼*/}，奔跑:function(){ /*狂奔的代碼*/ },死亡:function(){ /*Go die*/ },攻擊:function(){ /*糊他熊臉*/ },防御:function(){ /*護(hù)臉*/ } } var 士兵們 = [] var 士兵 for(var i=0; i<100; i++){士兵 = {ID: i, // ID 不能重復(fù)生命值:42}/*實(shí)際工作中不要這樣寫(xiě)，因?yàn)?__proto__ 不是標(biāo)準(zhǔn)屬性*/士兵.__proto__ = 士兵原型 士兵們.push(士兵) }兵營(yíng).批量制造(士兵們)

優(yōu)雅？

有人指出創(chuàng)建一個(gè)士兵的代碼分散在兩個(gè)地方很不優(yōu)雅，于是我們用一個(gè)函數(shù)把這兩部分聯(lián)系起來(lái)：

function 士兵(ID){var 臨時(shí)對(duì)象 = {}臨時(shí)對(duì)象.__proto__ = 士兵.原型臨時(shí)對(duì)象.ID = ID臨時(shí)對(duì)象.生命值 = 42return 臨時(shí)對(duì)象 }士兵.原型 = {兵種:"美國(guó)大兵",攻擊力:5,行走:function(){ /*走倆步的代碼*/}，奔跑:function(){ /*狂奔的代碼*/ },死亡:function(){ /*Go die*/ },攻擊:function(){ /*糊他熊臉*/ },防御:function(){ /*護(hù)臉*/ } }// 保存為文件：士兵.js

然后就可以愉快地引用「士兵」來(lái)創(chuàng)建士兵了：

var 士兵們 = [] for(var i=0; i<100; i++){士兵們.push(士兵(i)) }兵營(yíng).批量制造(士兵們)

JS 之父的關(guān)懷

JS 之父創(chuàng)建了 new 關(guān)鍵字，可以讓我們少寫(xiě)幾行代碼：

只要你在士兵前面使用 new 關(guān)鍵字，那么可以少做四件事情：

不用創(chuàng)建臨時(shí)對(duì)象，因?yàn)?new 會(huì)幫你做（你使用「this」就可以訪(fǎng)問(wèn)到臨時(shí)對(duì)象）；

不用綁定原型，因?yàn)?new 會(huì)幫你做（new 為了知道原型在哪，所以指定原型的名字為 prototype）；

不用 return 臨時(shí)對(duì)象，因?yàn)?new 會(huì)幫你做；

不要給原型想名字了，因?yàn)?new 指定名字為 prototype。

?

這一次我們用 new 來(lái)寫(xiě)

function 士兵(ID){this.ID = IDthis.生命值 = 42 }士兵.prototype = {兵種:"美國(guó)大兵",攻擊力:5,行走:function(){ /*走倆步的代碼*/},奔跑:function(){ /*狂奔的代碼*/ },死亡:function(){ /*Go die*/ },攻擊:function(){ /*糊他熊臉*/ },防御:function(){ /*護(hù)臉*/ } }// 保存為文件：士兵.js

然后是創(chuàng)建士兵（加了一個(gè) new 關(guān)鍵字）：

var 士兵們 = [] for(var i=0; i<100; i++){士兵們.push(new 士兵(i)) }兵營(yíng).批量制造(士兵們)

new 的作用，就是省那么幾行代碼。（也就是所謂的語(yǔ)法糖）

注意 constructor 屬性

new 操作為了記錄「臨時(shí)對(duì)象是由哪個(gè)函數(shù)創(chuàng)建的」，所以預(yù)先給「士兵.prototype」加了一個(gè) constructor 屬性：

士兵.prototype = {constructor: 士兵 }

如果你重新對(duì)「士兵.prototype」賦值，那么這個(gè) constructor 屬性就沒(méi)了，所以你應(yīng)該這么寫(xiě)：

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

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

?

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

完。

?

喜歡本文，請(qǐng)關(guān)注我的專(zhuān)欄《前端開(kāi)發(fā)指南》。

想學(xué)前端？到 Q 群里找我：108801207

轉(zhuǎn)載于:https://www.cnblogs.com/Frank99/p/9049365.html

與50位技術(shù)專(zhuān)家面對(duì)面20年技術(shù)見(jiàn)證，附贈(zèng)技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的转自知乎大神----JS 的 new 到底是干什么的？的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。