JS 的 new 到底是幹什麼的？

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

今天我從「省**」的角度來講 new。

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

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

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

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

var 士兵 = ,
奔跑:function(),
死亡:function(),
攻擊:function(),
防禦:function()
}兵營.製造(士兵) // 呼叫[兵營]例項中的(製造)函式士兵

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

迴圈 100 次吧：

var 士兵們 = 
var 士兵
for(var i=0; i<100; i++)，
奔跑:function(),
死亡:function(),
攻擊:function(),
防禦:function()
} 士兵們.push(士兵) //將士兵新建立的士兵物件新增到【士兵們】陣列
}兵營.批量製造(士兵們) // 呼叫[兵營]例項中的(批量製造)函式士兵

哎呀好簡單。

上面的**存在乙個問題：浪費了很多記憶體。

行走、奔跑、死亡、攻擊、防禦這五個動作對於每個士兵其實是一樣的，只需要各自引用同乙個函式就可以了，沒必要重複建立 100 個行走、100個奔跑……

這些士兵的兵種和攻擊力都是一樣的，沒必要建立 100 次。

只有 id 和生命值需要建立 100 次，因為每個士兵有自己的 id 和生命值。

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

var 士兵原型 = ，
奔跑:function(),
死亡:function(),
攻擊:function(),
防禦:function()
}var 士兵們 = 
var 士兵
for(var i=0; i<100; i++)
/*實際工作中不要這樣寫，因為 __proto__ 不是標準屬性*/
士兵.__proto__ = 士兵原型 
士兵們.push(士兵)
}兵營.批量製造(士兵們)

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

function 士兵(id)
臨時物件.__proto__ = 士兵.原型
臨時物件.id = id
臨時物件.生命值 = 42
return 臨時物件
}士兵.原型 = ，
奔跑:function(),
死亡:function(),
攻擊:function(),
防禦:function()
}// 儲存為檔案：士兵.js

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

var 士兵們 = 
for(var i=0; i<100; i++)
兵營.批量製造(士兵們)

js 之父建立了 new 關鍵字，可以讓我們少寫幾行**：

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

不用建立臨時物件，因為 new 會幫你做（你使用「this」就可以訪問到臨時物件）；

不用繫結原型，因為 new 會幫你做（new 為了知道原型在哪，所以指定原型的名字為 prototype）；

不用 return 臨時物件，因為 new 會幫你做；

不要給原型想名字了，因為 new 指定名字為 prototype。

function 士兵(id)
士兵.prototype = ,
奔跑:function(),
死亡:function(),
攻擊:function(),
防禦:function()
}// 儲存為檔案：士兵.js

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

var 士兵們 = 
for(var i=0; i<100; i++)
兵營.批量製造(士兵們)

new 的作用，就是省那麼幾行**。（也就是所謂的語法糖）new 操作為了記錄「臨時物件是由哪個函式建立的」，所以預先給「士兵.prototype」加了乙個 constructor 屬性：

士兵.prototype =

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

士兵.prototype.兵種 = "美國大兵"
士兵.prototype.攻擊力 = 5
士兵.prototype.行走 = function()
士兵.prototype.奔跑 = function()
士兵.prototype.死亡 = function()
士兵.prototype.攻擊 = function()
士兵.prototype.防禦 = function()

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

士兵.prototype = ,
奔跑:function(),
死亡:function(),
攻擊:function(),
防禦:function()
}

XML到底是幹什麼的

xml本身是一種格式規範，是一種包含了資料以及資料說明的文字格式規範。比如，我們要給對方傳輸一段資料，資料內容是 too young,too sometimes 要將這段話按照屬性拆分為三個資料的話，就是，年齡too young，閱歷too 結果sometimes 我們都知道程式不像人，可以體會字面...

註解到底是幹什麼的？

說起註解，我們都用過注釋用文字描述程式的.給程式設計師看的。那麼註解和注釋相似。下面看一下註解的介紹定義註解 annotation 也叫元資料。一種級別的說明。它是jdk1.5及以後版本引入的乙個特性，與類介面列舉是在同乙個層次。它可以宣告在包類字段方法區域性變數方法引數等的前...

王思聰他們家到底是幹什麼的

萬科萬達這兩家地產龍頭公司絕對值得研究，很多人對萬達的業務不是特別了解，以為他就是乙個普通的地產公司。他們的一些思路還是蠻有啟發的。這也是我為什麼要梳理摘要的原因。不過我也在思考另外一些問題萬達需要創新嗎？需要什麼方面的創新？需要什麼深度的創新？需要什麼樣的創新機制和環境氛圍？需要技術創新嗎？需要...

JS 的 new 到底是幹什麼的？

XML到底是幹什麼的

註解到底是幹什麼的？

王思聰他們家到底是幹什麼的

相關推薦