解決js函數(shù)閉包內(nèi)存泄露問題的辦法
本文通過舉例,由淺入深的講解了解決js函數(shù)閉包內(nèi)存泄露問題的辦法,分享給大家供大家參考,具體內(nèi)容如下
原始代碼:
function Cars(){ this.name = "Benz"; this.color = ["white","black"]; } Cars.prototype.sayColor = function(){ var outer = this; return function(){ return outer.color }; }; var instance = new Cars(); console.log(instance.sayColor()())
優(yōu)化后的代碼:
function Cars(){ this.name = "Benz"; this.color = ["white","black"]; } Cars.prototype.sayColor = function(){ var outerColor = this.color; //保存一個副本到變量中 return function(){ return outerColor; //應(yīng)用這個副本 }; outColor = null; //釋放內(nèi)存 }; var instance = new Cars(); console.log(instance.sayColor()())
稍微復(fù)雜一點的例子:
function inheritPrototype(subType,superType){ var prototype = Object(superType.prototype); prototype.constructor = subType; subType.prototype = prototype; } function Cars(){ this.name = "Benz"; this.color = ["white","black"]; } Cars.prototype.sayColor = function(){ var outer = this; return function(){ return outer.color; }; }; function Car(){ Cars.call(this); this.number = [321,32]; } inheritPrototype(Car,Cars); Car.prototype.sayNumber = function(){ var outer = this; return function(){ return function(){ return outer.number[outer.number.length - 1]; } }; }; var instance = new Car(); console.log(instance.sayNumber()()());
首先,該例子組合使用了構(gòu)造函數(shù)模式和原型模式創(chuàng)建Cars 對象,并用了寄生組合式繼承模式來創(chuàng)建Car 對象并從Cars 對象獲得屬性和方法的繼承;
其次,建立一個名為instance 的Car 對象的實例;instance 實例包含了sayColor 和sayNumber 兩種方法;
最后,兩種方法中,前者使用了一個閉包,后者使用了兩個閉包,并對其this 進行修改使其能夠訪問到this.color 和this.number。
這里存在內(nèi)存泄露問題,優(yōu)化后的代碼如下:
function inheritPrototype(subType,superType){ var prototype = Object(superType.prototype); prototype.constructor = subType; subType.prototype = prototype; } function Cars(){ this.name = "Benz"; this.color = ["white","black"]; } Cars.prototype.sayColor = function(){ var outerColor = this.color; //這里 return function(){ return outerColor; //這里 }; this = null; //這里 }; function Car(){ Cars.call(this); this.number = [321,32]; } inheritPrototype(Car,Cars); Car.prototype.sayNumber = function(){ var outerNumber = this.number; //這里 return function(){ return function(){ return outerNumber[outerNumber.length - 1]; //這里 } }; this = null; //這里 }; var instance = new Car(); console.log(instance.sayNumber()()());
以上就是為大家分享的解決方法,希望對大家的學(xué)習(xí)有所幫助。
相關(guān)文章
JavaScript實現(xiàn)防止網(wǎng)頁被嵌入Frame框架的代碼分享
這篇文章主要介紹了JavaScript實現(xiàn)防止網(wǎng)頁被嵌入Frame框架的代碼分享,本文給出了2種防嵌入方法,需要的朋友可以參考下2014-12-12amd、cmd、esmodule、commonjs區(qū)別詳解
本文主要介紹了amd、cmd、esmodule、commonjs區(qū)別詳解,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04微信小程序wx.getUserInfo授權(quán)獲取用戶信息(頭像、昵稱)的實現(xiàn)
這篇文章主要介紹了微信小程序wx.getUserInfo授權(quán)獲取用戶信息(頭像、昵稱)的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08JavaScript 中 avalon綁定屬性總結(jié)
avalon是前端MVVM框架,在js中經(jīng)常會用到。這篇文章主要介紹了JavaScript 中 avalon綁定屬性總結(jié)的相關(guān)資料,需要的朋友可以參考下2016-10-10JavaScript使用function定義對象并調(diào)用的方法
這篇文章主要介紹了JavaScript使用function定義對象并調(diào)用的方法,實例分析了javascript中function定義及使用對象與方法的相關(guān)技巧,需要的朋友可以參考下2015-03-03Bootstrap與KnockoutJs相結(jié)合實現(xiàn)分頁效果實例詳解
KnockoutJS是一個JavaScript實現(xiàn)的MVVM框架。接下來通過本文給大家介紹Bootstrap與KnockoutJs相結(jié)合實現(xiàn)分頁效果,對bootstrap knockoutjs相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2016-05-05淺談Webpack4 Tree Shaking 終極優(yōu)化指南
這篇文章主要介紹了淺談Webpack4 Tree Shaking 終極優(yōu)化指南,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11