js下探究 let, var 之于閉包

BLUE 發布于2019-08-26 12:02 / 3198人閱讀

摘要：問題在說閉包，一定會牽涉到作用域。這也是閉包的屬性的，能夠記錄下內部函數引用外部的值。因為都是全局變量，所以循環也就是不斷值覆蓋，閉包并不會記錄在循環時的值，只會記錄閉包變量。閉包時記錄的除了閉包變量還有塊級作用域變量最后來看看這個輸出什么

js 是非常靈活的語言，寫起來真是*

不過現在有了typescript，寫起來舒服多了。

問題

在說js閉包，一定會牽涉到作用域。而一般在區別 var 跟 let 時就會舉 for 循環的例子，但是這里只說作用域，而不說閉包，那么其實還是看不懂，至于覺得很無厘頭。

在阮一峰的 let 和 const 命令一節，舉了這么一個例子。

var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 10

跟

var a = [];
for (let i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 6

然后我就不清楚了，為什么使用var全局變量后, 就輸出10，變成塊級作用域let后就正常輸出了。

動手

不知道到底怎么回事，只好調試去看變量到底是什么樣？在兩個例子中都稍微增加了點東西

var a = [];
var b;
var c;
for (var i = 0; i < 10; i++) {
    b = i;
    c = i;
    a[i] = function () {
        console.log(i);
        console.log(c);
    };
}

這里，循環里面有3個變量，內部函數中引用兩個。然后我們循環三次后，看看a[0], a[1]

我們發現a[0]， a[1]首先是個函數對象，在scopes 中有 Closure 這個東西，這就是閉包了。
這里閉包中只有 i跟c，并沒有b，因為b沒有在內部函數中被使用，因此沒有被scopes 記錄下來。
而且請注意，i跟c的值都是當前變量i的值。這也是閉包的屬性的，能夠記錄下內部函數引用外部的值。因為 i, c, b 都是全局變量，所以循環也就是不斷值覆蓋，閉包并不會記錄在循環時的值，只會記錄閉包變量。

注： 我這里是循環了3次，所以 閉包變量都是3，如果循環完了則是另外的值，你能正確說出它們的值么？

接著我們來看let 的改編

var a = [];
let b;
let c;
for (let i = 0; i < 10; i++) {
    b = i;
    c = i;
    a[i] = function oo() {
        console.log(i);
        console.log(c);
    };
}
a[6](); // 6

同樣，這里依舊i,b,c三個變量，內部函數中引用兩個。然后我們循環三次后，看看a[0], a[1]

在上圖，我們可以看到scopes 增加了個新東西 Block，這是函數記錄了塊作用域。
看著這個圖，我們就可以這么理解: let聲明的變量i 不是全局變量，每次循環都是作用域關閉然后重新再重建，但是在內部函數又引用了這個塊級作用域變量, 所以內部函數會記錄這個值。

而變量c 雖然也是 let聲明，為什么不是被記錄到 Block 呢，這是因為變量c 雖然是let聲明，但是是在for循環外面，對于這個文件來說，變量c就是全局變量，所以被記錄到 closure 中

over

看完以上分析，不知道有沒有加深你對let,const 的理解， let聲明的變量是塊級作用域，const聲明的是全局變量，但也要看用在哪兒。 閉包時記錄的除了閉包變量還有塊級作用域變量

最后來看看這個輸出什么：

var a = [];
let b;
let c;
for (let i = 0; i < 10; i++) {
    b = i;
    c = i;
    var n = i;
    let m = i;
    a[i] = function oo() {
        console.log(i);
        console.log(c);
        console.log(n);
        console.log(m);
    };
}
a[6]();

云服務器 GPU云服務器 js 中 let var = $ js js閉包 js打印var

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

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

JS進擊之路：閉包

摘要：常見問題說到閉包相關的問題，最典型的就是變量和指向這兩類問題。如果有錯誤或不嚴謹的地方，歡迎批評指正，如果喜歡，歡迎點贊。引言閉包這個詞對很多前端開發人員來說既熟悉又陌生，熟悉是因為很多人都用過閉包，但是用的時候不知道閉包，陌生是因為并不理解閉包，接下來這篇文章將會從多方面介紹閉包定義閉包是怎么定義的呢？當函數可以記住并訪問所在的詞法作用域時，就產生了閉包，即使函數在當前詞法作...

tolerious 2019-08-26 13:39 評論0 收藏0
Node.js內存管理和V8垃圾回收機制

摘要：垃圾回收內存管理實踐先通過一個來看看在中進行垃圾回收的過程是怎樣的內存泄漏識別在環境里提供了方法用來查看當前進程內存使用情況，單位為字節中保存的進程占用的內存部分，包括代碼本身棧堆。 showImg(https://segmentfault.com/img/remote/1460000019894672?w=640&h=426);作者 | 五月君Node.js 技術棧 | https:...

JowayYoung 2019-08-23 18:27 評論0 收藏0
javascript知識點

摘要：模塊化是隨著前端技術的發展，前端代碼爆炸式增長后，工程化所采取的必然措施。目前模塊化的思想分為和。特別指出，事件不等同于異步，回調也不等同于異步。將會討論安全的類型檢測惰性載入函數凍結對象定時器等話題。 Vue.js 前后端同構方案之準備篇——代碼優化目前 Vue.js 的火爆不亞于當初的 React，本人對寫代碼有潔癖，代碼也是藝術。此篇是準備篇，工欲善其事，必先利其器。我們先在代...

Karrdy 2019-08-26 11:34 評論0 收藏0
夯實基礎-作用域與閉包

摘要：作用域分類作用域共有兩種主要的工作模型。換句話說，作用域鏈是基于調用棧的，而不是代碼中的作用域嵌套。詞法作用域詞法作用域中，又可分為全局作用域，函數作用域和塊級作用域。一篇鞏固基礎的文章，也可能是一系列的文章，梳理知識的遺漏點，同時也探究很多理所當然的事情背后的原理。為什么探究基礎？因為你不去面試你就不知道基礎有多重要，或者是說當你的工作經歷沒有亮點的時候，基礎就是檢驗你好壞的一項...

daydream 2019-08-22 16:22 評論0 收藏0