javascript
for循环中new的对象什么时候被回收_你真的了解JS里的 new 吗?
前言
我們常常喜歡用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)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 与guacamole服务器的网络不稳定,
- 下一篇: thymeleaf 获取yml中的值_S