前言

我們常常喜歡用new關鍵字去創(chuàng)建一些對象如new Vue()，但是這個關鍵字的背后究竟做了什么其實沒太多人去關注。

想象我們是蘋果公司，要生產(chǎn)30部iPod，規(guī)定： 每臺iPod都會有自己的ID 每臺iPod都是一樣的制造商：Apple * 每臺iPod的功能都是一樣的（函數(shù)一樣）

let iPod= {// 制造商不會變manufacturer: 'Apple',// 播放音樂play: function () { },// 暫停pause: function () { },// 繼續(xù)播放resume: function () { } }

好了，現(xiàn)在我們開始生產(chǎn)吧。

簡單生產(chǎn)

要生產(chǎn)那么多iPod，那就循環(huán)30次吧。每次循環(huán)都創(chuàng)建一個對象，將這個對象加入到數(shù)組里就行了。

let box = [] let iPodfor (let i = 0; i < 30; i++) {iPod= {// 每次都改變 IDid: i,// 制造商不會變manufacturer: 'Apple',// 播放音樂play: function () {},// 暫停pause: function () {},// 繼續(xù)播放resume: function () {}}box.push(iPod) }Manufacturer.deliver(box)

但是，這里有一個問題：每次都會新創(chuàng)建play()，pause()，resume()這些函數(shù)，manufacturer的值也是一樣，沒必要重新建。

使用原型改進

使用原理鏈，我們可以將上面說到的共有函數(shù)，屬性放在一個共有對象里，然后用iPod.__proto__指向這個iPodCommon不就好了嗎？所以現(xiàn)在代碼可以改寫成這樣：

let box = [] let iPodlet iPodCommon = {// 制造商不會變manufacturer: 'Apple',// 播放音樂play: function () {},// 暫停pause: function () {},// 繼續(xù)播放resume: function () {} }for (let i = 0; i < 30; i++) {iPod= {// 每次都改變 IDid: i,}iPod.__proto__ = iPodCommonbox.push(iPod) }Manufacturer.deliver(box)

這樣就好多了，省了很多空間。但是這個iPod對象的代碼有點太分散了，跟for循環(huán)耦合在一起了。學習重構時聽得最多的一句就是重復代碼最好用函數(shù)包起來，所以我們可以試著傳入要改變的屬性（ID）用函數(shù)來返回iPod對象。，

函數(shù)返回對象

我們可以用一個函數(shù)返回iPod對象，這樣就不用每次都在for循環(huán)里去定義對象了。

function iPod(id) {let tempObj = { }// 自有屬性tempObj.id = id// 共有屬性，函數(shù)tempObj.__proto__ = iPod.commonreturn tempObj }iPod.common = {// 制造商不會變manufacturer: 'Apple',// 播放音樂play: function () {},// 暫停pause: function () {},// 繼續(xù)播放resume: function () {} } // 保存為 iPod.js 文件

然后在創(chuàng)建時候引入這個文件，再去生成iPod。

let box = []for (let i = 0; i < 30; i++) {box.push(iPod(i)) }Manufacturer.deliver(box)

有沒有感覺這樣清爽了很多？我們將所有有關iPod的邏輯都放在一個文件里，這樣就和主文件完全解耦了。

new

上面是很清爽，但是每次都要寫創(chuàng)建一個臨時對象好麻煩。這時候JS的new就上場了，它的作用如下： 1. 幫你創(chuàng)建臨時對象tempObj，函數(shù)里的this綁定為這個tempObj 2. 統(tǒng)一共有屬性所在對象的名字叫prototype而不是comon 3. 幫你完成原型的綁定 4. 幫你返回臨時對象tempObj 現(xiàn)在iPod.js文件可以寫成這樣

function iPod(id) {this.id = id }// 共有屬性 iPod.prototype = {// 制造商不會變manufacturer: 'Apple',// 播放音樂play: function () {},// 暫停pause: function () {},// 繼續(xù)播放resume: function () {} } // 保存為 iPod.js 文件

使用new再次生產(chǎn)iPod

let box = []for (let i = 0; i < 30; i++) {box.push(new iPod(i)) }Manufacturer.deliver(box)

這就是new的由來，不過是一種語法糖，和Java里面的new是完全不一樣的東西，希望大家不要混為一談。當然了，最后的這個iPod函數(shù)也就成了我們所說的構造函數(shù)。

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的for循环中new的对象什么时候被回收_你真的了解JS里的 new 吗？的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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