javascript
for循环中new的对象什么时候被回收_你真的了解JS里的 new 吗?
前言
我們常常喜歡用new關鍵字去創建一些對象如new Vue(),但是這個關鍵字的背后究竟做了什么其實沒太多人去關注。
想象我們是蘋果公司,要生產30部iPod,規定: 每臺iPod都會有自己的ID 每臺iPod都是一樣的制造商:Apple * 每臺iPod的功能都是一樣的(函數一樣)
let iPod= {// 制造商不會變manufacturer: 'Apple',// 播放音樂play: function () { },// 暫停pause: function () { },// 繼續播放resume: function () { } }好了,現在我們開始生產吧。
簡單生產
要生產那么多iPod,那就循環30次吧。每次循環都創建一個對象,將這個對象加入到數組里就行了。
let box = [] let iPodfor (let i = 0; i < 30; i++) {iPod= {// 每次都改變 IDid: i,// 制造商不會變manufacturer: 'Apple',// 播放音樂play: function () {},// 暫停pause: function () {},// 繼續播放resume: function () {}}box.push(iPod) }Manufacturer.deliver(box)但是,這里有一個問題:每次都會新創建play(),pause(),resume()這些函數,manufacturer的值也是一樣,沒必要重新建。
使用原型改進
使用原理鏈,我們可以將上面說到的共有函數,屬性放在一個共有對象里,然后用iPod.__proto__指向這個iPodCommon不就好了嗎?所以現在代碼可以改寫成這樣:
let box = [] let iPodlet iPodCommon = {// 制造商不會變manufacturer: 'Apple',// 播放音樂play: function () {},// 暫停pause: function () {},// 繼續播放resume: function () {} }for (let i = 0; i < 30; i++) {iPod= {// 每次都改變 IDid: i,}iPod.__proto__ = iPodCommonbox.push(iPod) }Manufacturer.deliver(box)這樣就好多了,省了很多空間。但是這個iPod對象的代碼有點太分散了,跟for循環耦合在一起了。學習重構時聽得最多的一句就是重復代碼最好用函數包起來,所以我們可以試著傳入要改變的屬性(ID)用函數來返回iPod對象。,
函數返回對象
我們可以用一個函數返回iPod對象,這樣就不用每次都在for循環里去定義對象了。
function iPod(id) {let tempObj = { }// 自有屬性tempObj.id = id// 共有屬性,函數tempObj.__proto__ = iPod.commonreturn tempObj }iPod.common = {// 制造商不會變manufacturer: 'Apple',// 播放音樂play: function () {},// 暫停pause: function () {},// 繼續播放resume: function () {} } // 保存為 iPod.js 文件然后在創建時候引入這個文件,再去生成iPod。
let box = []for (let i = 0; i < 30; i++) {box.push(iPod(i)) }Manufacturer.deliver(box)有沒有感覺這樣清爽了很多?我們將所有有關iPod的邏輯都放在一個文件里,這樣就和主文件完全解耦了。
new
上面是很清爽,但是每次都要寫創建一個臨時對象好麻煩。這時候JS的new就上場了,它的作用如下: 1. 幫你創建臨時對象tempObj,函數里的this綁定為這個tempObj 2. 統一共有屬性所在對象的名字叫prototype而不是comon 3. 幫你完成原型的綁定 4. 幫你返回臨時對象tempObj 現在iPod.js文件可以寫成這樣
function iPod(id) {this.id = id }// 共有屬性 iPod.prototype = {// 制造商不會變manufacturer: 'Apple',// 播放音樂play: function () {},// 暫停pause: function () {},// 繼續播放resume: function () {} } // 保存為 iPod.js 文件使用new再次生產iPod
let box = []for (let i = 0; i < 30; i++) {box.push(new iPod(i)) }Manufacturer.deliver(box)這就是new的由來,不過是一種語法糖,和Java里面的new是完全不一樣的東西,希望大家不要混為一談。當然了,最后的這個iPod函數也就成了我們所說的構造函數。
與50位技術專家面對面20年技術見證,附贈技術全景圖總結
以上是生活随笔為你收集整理的for循环中new的对象什么时候被回收_你真的了解JS里的 new 吗?的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 与guacamole服务器的网络不稳定,
- 下一篇: bootstrap insertrow始