js 變量提升和閉包理解

luoyibu 發布于2019-08-22 15:16 / 1727人閱讀

摘要：變量的作用域無非就是兩種全局變量和局部變量。其中內部函數中可以訪問外部函數的變量，是因為內部函數的作用域鏈中包含了外部函數的作用域也可以理解為內部函數的作用范圍輻射到了外部函數的作用范圍另一方面，在函數外部自然無法讀取函數內的局部變量。

以前學習的時候，了解過變量提升和閉包，但是沒有深入了解，網上查了資料，這里記錄下，
只供參考。部分內容引用：

https://www.cnblogs.com/kawask/p/6225317.html
http://www.jb51.net/article/87567.htm

我們先來看一個題目：

第一個script里可以看出var a 被提升到頂部，a = "littlebear"被保留在原地。

第二個script，之所以不先打印undefined ，是因為a在上面已經被var聲明過，所以var a不會再次被提升。

再看一個題目：

可以看到function a(){}被提升到最頂端。說明函數的提升變量的提升

1.變量提升

在ES6之前，JavaScript沒有塊級作用域(一對花括號{}即為一個塊級作用域)，只有全局作
用域和函數作用域。變量提升即將變量聲明提升到它所在作用域的最開始的部分。
上個簡歷的例子如：

console.log(global); // undefined
var global = "global";
console.log(global); // global
 
function fn () {
　　console.log(a); // undefined
　　var a = "aaa";
　　console.log(a); // aaa
}
fn();

之所以會是以上的打印結果，是由于js的變量提升，實際上上面的代碼是按照以下來執行的：

var global; // 變量提升，全局作用域范圍內，此時只是聲明，并沒有賦值
console.log(global); // undefined
global = "global"; // 此時才賦值
console.log(global); // 打印出global
 
function fn () {
　　var a; // 變量提升，函數作用域范圍內
　　console.log(a);
　　a = "aaa";
　　console.log(a);
}
fn();

2.函數提升

js中創建函數有兩種方式：函數聲明式和函數字面量式。只有函數聲明才存在函數提升！如:

console.log(f1); // function f1() {}   
console.log(f2); // undefined  
function f1() {}
var f2 = function() {}

之所以會有以上的打印結果，是由于js中的函數提升導致代碼實際上是按照以下來執行的：

function f1() {} // 函數提升，整個代碼塊提升到文件的最開始
console.log(f1);   
console.log(f2);   
var f2 = function() {}

3.什么是閉包

閉包是有權訪問另一個函數作用域的變量的函數。
簡單的說，Javascript允許使用內部函數---即函數定義和函數表達式位于另一個函數的函數體內。而且，這些內部函數可以訪問它們所在的外部函數中聲明的所有局部變量、參數和聲明的其他內部函數。當其中一個這樣的內部函數在包含它們的外部函數之外被調用時，就會形成閉包。

4.變量的作用域

要理解閉包，首先要理解變量的作用域。
變量的作用域無非就是兩種：全局變量和局部變量。
Javascript語言的特殊之處，就在于函數內部可以直接讀取全局變量。
其中內部函數中可以訪問外部函數的變量，是因為內部函數的作用域鏈中包含了外部函數的作用域；
也可以理解為：內部函數的作用范圍輻射到了外部函數的作用范圍；

var n=999;
function f1(){
　alert(n);
}
f1(); // 999

另一方面，在函數外部自然無法讀取函數內的局部變量。

function f1(){
　var n=999;
}
alert(n); // error

這里有一個地方需要注意，函數內部聲明變量的時候，一定要使用var命令。如果不用的話，你實際上聲明了一個全局變量！

function f1(){
　 n=999;
}
f1();
alert(n); // 999

5.閉包的寫法和用法

var Circle={ 
    "PI":3.14159, 
    "area":function(r){ 
        return this.PI * r * r; 
    } 
}; 
alert( Circle.area(1.0) );//3.14159

剛開始我沒意識到，這樣寫對象也是一種閉包，今天回頭想想，這就是閉包的經典用發啊！

6.使用閉包的注意點

1）由于閉包會使得函數中的變量都被保存在內存中，內存消耗很大，所以不能濫用閉包，否則會造成網頁的性能問題，在IE中可能導致內存泄露。解決方法是，在退出函數之前，將不使用的局部變量全部刪除。

2）閉包會在父函數外部，改變父函數內部變量的值。所以，如果你把父函數當作對象（object）使用，把閉包當作它的公用方法（Public Method），把內部變量當作它的私有屬性（private value），這時一定要小心，不要隨便改變父函數內部變量的值。

GPU云服務器云服務器 js閉包的理解 js變量聲明提升 js變量和數據類型 js調用變量和函數

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

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

Js基礎知識（三） - 作用域與閉包

摘要：是詞法作用域工作模式。使用可以將變量綁定在所在的任意作用域中通常是內部，也就是說為其聲明的變量隱式的劫持了所在的塊級作用域。作用域與閉包如何用js創建10個button標簽，點擊每個按鈕時打印按鈕對應的序號？看到上述問題，如果你能看出來這個問題實質上是考對作用域的理解，那么恭喜你，這篇文章你可以不用看了，說明你對作用域已經理解的很透徹了，但是如果你看不出來這是一道考作用域的題目，...

lemanli 2019-08-30 13:53 評論0 收藏0
Js基礎知識（三） - 作用域與閉包

摘要：是詞法作用域工作模式。使用可以將變量綁定在所在的任意作用域中通常是內部，也就是說為其聲明的變量隱式的劫持了所在的塊級作用域。作用域與閉包如何用js創建10個button標簽，點擊每個按鈕時打印按鈕對應的序號？看到上述問題，如果你能看出來這個問題實質上是考對作用域的理解，那么恭喜你，這篇文章你可以不用看了，說明你對作用域已經理解的很透徹了，但是如果你看不出來這是一道考作用域的題目，...

XFLY 2019-08-26 11:35 評論0 收藏0
Js基礎知識（三） - 作用域與閉包

摘要：是詞法作用域工作模式。使用可以將變量綁定在所在的任意作用域中通常是內部，也就是說為其聲明的變量隱式的劫持了所在的塊級作用域。作用域與閉包如何用js創建10個button標簽，點擊每個按鈕時打印按鈕對應的序號？看到上述問題，如果你能看出來這個問題實質上是考對作用域的理解，那么恭喜你，這篇文章你可以不用看了，說明你對作用域已經理解的很透徹了，但是如果你看不出來這是一道考作用域的題目，...

tanglijun 2019-08-01 18:30 評論0 收藏0
Js基礎知識（三） - 作用域與閉包

摘要：是詞法作用域工作模式。使用可以將變量綁定在所在的任意作用域中通常是內部，也就是說為其聲明的變量隱式的劫持了所在的塊級作用域。作用域與閉包如何用js創建10個button標簽，點擊每個按鈕時打印按鈕對應的序號？看到上述問題，如果你能看出來這個問題實質上是考對作用域的理解，那么恭喜你，這篇文章你可以不用看了，說明你對作用域已經理解的很透徹了，但是如果你看不出來這是一道考作用域的題目，...

lmxdawn 2019-08-15 13:55 評論0 收藏0