淺談Javascript閉包中作用域及內存泄漏問題

source 發布于2019-08-20 12:28 / 503人閱讀

摘要：將作用域賦值給變量這里的作用域是，而不是將作用域賦值給一個變量閉包返回瀏覽器中內存泄漏問題大家都知道，閉包會使變量駐留在內存中，這也就導致了內存泄漏。

上一章我們講了匿名函數和閉包，這次我們來談談閉包中作用域this的問題。

大家都知道，this對象是在運行時基于函數的執行環境綁定的，如果this在全局就是[object window]，如果在對象內部就是指向這個對象，而閉包卻是在運行時指向的window，因為閉包并不屬于這個對象的屬性和方法。
我們先來看一個例子關于全局作用域的問題:

var a = "this is window";

var box = {
    a:"this is object",
    get:function () {
        return this.a;
    }
};
alert(this.a);        //返回window.因為是全局作用域

不難看出，這個時候，this的作用域是全局的。指向的是window.結合上句話來看例子，如果在對象內部就是指向的這個對象。

var a = "this is window";

var box = {
    a:"this is object",
    get:function () {
        return this.a;
    }
};
alert(box.get());        //返回的是this is object 因為這個是box對象下的作用域

我們了解了作用域的問題。接下來我們就說說閉包中this對象作用域的問題:

var a = "this is window";

var box = {
    a:"this is object",
    get:function () {
        return function () {    //閉包
            retun this.a;    
        };
    }
};
alert(box.get()());        //返回this is window.

這就奇怪了，明明嵌套了這么多層，怎么會指向window呢，這就是閉包的機制，還是剛剛那句話：閉包卻是在運行時指向的window，因為閉包并不屬于這個對象的屬性和方法。

那我們如何講閉包的作用域指針指向對象內部呢？
兩種方法：1.使用call()對象冒充，2.將作用域賦值給變量

/*對象冒充*/

var a = "this is window";

var box = {
    a:"this is object",
    get:function () {
        return function () {    //閉包
            retun this.a;    
        };
    }
};
alert(box.get().call(box));    //返回 this is object

使用call()傳值box，將box對象冒充。從而使作用域指向box對象內部。

/*將作用域賦值給變量*/

var a = "this is window";

var box = {
    a:"this is object",
    get:function () {
    /*這里的作用域是box，而不是window*/
     var scope = this;    //將作用域賦值給一個變量
        return function () {    //閉包
            retun scope.a;    
        };
    }
};
alert(box.get()());    //返回this is object.

IE瀏覽器中內存泄漏問題

大家都知道，閉包會使變量駐留在內存中，這也就導致了內存泄漏。但是只是針對IE瀏覽器，其他瀏覽器不會出現這種問題.

window.onload = function () {
    function box () {
    var div = document.getElementById("div");
    div.onclick = function () {
        alert(div.innerHTML);
    };
}
box();
};

這里的互相調用會導致IE瀏覽器內存泄漏，因為div.onclick引用了上面的var div，他倆互相引用導致內存泄漏，解決辦法就是將用完的div賦值null，等待垃圾回收

window.onload = function () {
    function box () {
    var div = document.getElementById("div");
    var a = div.innerHTML;
    div.onclick = function () {
        alert(a);
    };
    a = null;    //賦值為null，等待垃圾回收
}
box();
};

如果沒有解除引用，必須等待瀏覽器關閉的時候才能釋放！！！

關于作用域及內存泄漏的文章就到這里，歡迎老司機指正錯誤！

                                                                                                                   Brian Lee

GPU云服務器云服務器淺談javascript 閉包內存泄露內存泄漏檢測內存泄漏

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/81002.html

圖解作用域及閉包

摘要：那其實閉包的原因就是外層函數的作用域對象無法釋放其實就是一個函數調用會生成的臨時作用域圖中可看出其實就是在中的匿名函數，所以他的就指向留下的作用域。引言網絡上關于作用域及閉包的文章很多，自己對于純理論知識并不能很快的理解，但自己對于圖畫有很強的記憶和理解能力，因此決定將此知識點以圖畫的知識表現出來，加深自身理解的同時如果能幫到正在學習的童鞋就再好不過了下面我以函數的整個生命周期來...

shiyang6017 2019-08-22 17:03 評論0 收藏0
詳解js變量、作用域及內存

摘要：不是引用類型，無法輸出簡而言之，堆內存存放引用值，棧內存存放固定類型值。變量的查詢在變量的查詢中，訪問局部變量要比全局變量來得快，因此不需要向上搜索作用域鏈。贊助我以寫出更好的文章，give me a cup of coffee? 2017最新最全前端面試題基本類型值有：undefined，NUll，Boolean，Number和String，這些類型分別在內存中占有固定的大小空...

waltr 2019-08-21 10:19 評論0 收藏0
學習JavaScript之內存泄漏

摘要：接上回我寫了一篇關于閉包的博客學習之閉包，最后談到閉包導致的問題時留了一個尾在以下的瀏覽器中會有內存泄漏的問題。今天的博客就繼續探索一下內存泄漏的問題。博客地址的前端之路原文鏈接學習之內存泄漏接上回我寫了一篇關于閉包的博客《學習JavaScript之閉包》，最后談到閉包導致的問題時留了一個尾：在IE9以下的瀏覽器中會有內存泄漏的問題。今天的博客就繼續探索一下內存泄漏的問題。淺...

nodejh 2019-08-20 17:29 評論0 收藏0
【前端進階之路】內存基本知識

摘要：在運行腳本時，需要顯示的指定對象。大對象區每一個區域都是由一組內存頁構成的。這里是唯一擁有執行權限的內存區。換句話說，是該對象被之后所能回收到內存的總和。一旦活躍對象已被移出，則在舊的半空間中剩下的任何死亡對象被丟棄。內存管理本文以V8為背景對之前的文章進行重新編輯，內容做了很多的調整，使其具有邏輯更加緊湊，內容更加全面。 1. 基礎概念 1.1 生命周期不管什么程序語言，內存...

Simon_Zhou 2019-08-22 11:01 評論0 收藏0
淺談js內存與閉包

摘要：將他們放在堆中是為了不影響棧的效率。接著是臨時空間函數執行的時候，會臨時開辟一塊內存空間，這塊內存空間長得和外面這個一樣，也有自己的棧堆，當函數運行完就銷毀。中的內存第一個部分還是和上面的一樣，有棧堆運行時環境，另外還有一個緩沖區存放。 0.前言主要結合了內存的概念講了js的一些的很簡單、但是又不小心就犯錯的地方。結論：js執行順序，先定義，后執行，從上到下，就近原則。閉包可以讓外部...

dailybird 2019-08-22 16:30 評論0 收藏0