The Little JavaScript Closures

Heier 發(fā)布于2019-08-19 17:10 / 2941人閱讀

摘要：寫在前面本文嘗試模仿的風格，介紹的閉包。本文同時也是我學(xué)習(xí)閉包的一次總結(jié)。注根據(jù)這篇文章，事實上所有函數(shù)在創(chuàng)建的時候都會形成閉包。但這種閉包并沒什么趣味，也沒什么特別的用途，所以我們更關(guān)注的是由內(nèi)部函數(shù)形成的閉包。

寫在前面

本文嘗試模仿 The Little Schema 的風格，介紹 JavaScript 的閉包。本文同時也是我學(xué)習(xí) JavaScript 閉包的一次總結(jié)。歡迎一起討論。

簡介

什么是閉包？

閉包是一個函數(shù)

閉包都是函數(shù)嗎？

是

函數(shù)都是閉包嗎？

不

我怎么判斷一個函數(shù)是不是閉包？

你現(xiàn)在還不能回答，因為你還不知道以下概念：
全局變量（Global Variable）
局部變量（Local Variable）
自由變量（Free Variable）
詞法作用域（Lexical Scope）

變量與作用域

var a = 1; a 是什么變量？

全局變量

a = 1; a 是什么變量？

全局變量

function foo() {
  a = 1;
  var b = 1;
}

這里的 a，b 分別是什么變量？

a 是全局變量，b 是局部變量

為什么 a 在函數(shù)中定義還是全局變量？

因為 a 不是用 var 聲明的

不用 var 聲明的變量都是全局變量？

是的

用 var 聲明的變量都是局部變量？

不是

為什么？

在全局作用域中聲明的變量都是全局變量，即使這個變量是用 var 聲明的

全局作用域是什么？

函數(shù)作用域以外的地方都是就是全局作用域

函數(shù)作用域又是什么？

函數(shù)內(nèi)部

可以舉個例子嗎？

var foo = 1;
function bar() {
  var baz = 2;
}
foo 變量和 bar 函數(shù)都處于全局作用域中，baz 變量處于函數(shù)作用域中

function foo() {
  var bar = 1;
}

這段代碼中有多少個作用域？

2 個，foo 函數(shù)所處的全局作用域和 bar 變量所處的函數(shù)作用域

function foo() {
  var bar = 1;
  function baz() {
    var test = 1;
  }
}

這段代碼中有多少個作用域？

3 個，foo 函數(shù)所處的全局作用域，bar 所處的函數(shù)作用域，和 test 所處的函數(shù)作用域

上面的 bar 變量和 baz 函數(shù)處于同一個作用域嗎？

是的，因為它們都在 foo 函數(shù)中

上面 test 變量和 bar，baz處于同一個作用域中嗎？

不是，因為 test 變量在 baz 函數(shù)中

JavaScript 用函數(shù)來劃分作用域嗎？

是的

function foo() {
  var bar = 1;
}
console.log(bar);

會輸出什么？

Uncaught ReferenceError: bar is not defined

為什么會報錯呢？

因為外部作用域不能訪問內(nèi)部作用域

var foo = 1;
function bar() {
  console.log(foo);
}
bar();

會輸出什么？

為什么不會報錯？

因為內(nèi)部作用域可以訪問外部作用域

var x = 1;
function foo() {
  var x = 2;
  console.log(x);
}
foo();

會輸出什么？

為什么不是輸出 1 ？

因為局部變量的優(yōu)先級比外部變量高

var x = 1;
function foo() {
  console.log(x);
  var x = 2;
  console.log(x);
}
foo();

會輸出什么？

undefined
2

為什么會這么奇怪？

因為變量聲明有變量提升（Variable Hoisting）的過程

變量提升是什么？

聲明語句會在執(zhí)行前被處理，在任何地方聲明一個變量，相當于在頂部位置聲明

可以舉個例子嗎？

bla = 0;
var bla;

// 相當于

var bla;
bla = 0;

這和之前的例子有什么關(guān)系？

函數(shù)內(nèi)部聲明的變量，都會先在函數(shù)的頂部聲明。所以之前的例子就相當于
function foo() {
  var x;
  console.log(x);
  x = 1;
  console.log(x)
}

什么是詞法作用域？

變量的作用域是由它在源代碼中所處位置決定的（詞法），并且嵌套的函數(shù)可以訪問到其外層作用域中聲明的變量。

這和上面說到的內(nèi)部作用域可以訪問外部作用域有什么區(qū)別嗎？

沒有

什么是自由變量？

在函數(shù)內(nèi)部使用到，但既不是該函數(shù)的參數(shù)，也不是該函數(shù)的局部變量的變量。

可以舉個例子嗎？

var foo = 1;
function bar() {
  var baz = 2;
  console.log(foo + baz);
}
這里 bar 函數(shù)有三個變量：baz, console, foo
其中 baz 是局部變量， console 和 foo 都屬于自由變量

為什么 console 和 foo 都是自由變量？

因為 console 和 foo 都在全局作用域中，在 bar 函數(shù)中是通過引用的方式來使用 console 和 foo 的

還需要了解其他概念嗎？

不需要，現(xiàn)在已經(jīng)可以深入了解閉包了

閉包

什么是閉包？

閉包是一個內(nèi)部函數(shù) [注1]

內(nèi)部函數(shù)都是閉包嗎？

不是，引用了自由變量的內(nèi)部函數(shù)才是閉包

var x = 1;
function foo() {
  console.log(x + 1);
}

foo 函數(shù)是一個閉包嗎？

不是，因為 foo 函數(shù)不是一個內(nèi)部函數(shù)

function foo() {
  function bar() {
    var x = 1;
    return x + 1;
  }
}

bar 函數(shù)是一個閉包嗎？

不是，因為它只是一個內(nèi)部函數(shù)，并沒有引用自由變量

function foo() {
  var x = 1;
  function bar() {
    return x + 1;
  }
}

bar 函數(shù)是一個閉包嗎？

是的，因為它是一個內(nèi)部函數(shù)，同時引用了自由變量

閉包有什么特點？

閉包可以訪問外部變量

閉包可以在外部函數(shù)返回之后依然保留外部變量的引用

閉包會保留外部變量的引用，不是該變量的值

第一點在前面的例子中已經(jīng)懂了。

很好

第二點還沒懂，可以舉個例子嗎？

function add(x) {
  return function(y) {
    return x + y;
  }
}

var add5 = add(5);
console.log(add5(10)) // 15
即便 add 函數(shù)已經(jīng)返回，add5 中依然可以訪問 x

第三點還沒懂，可以舉個例子嗎？

function user() {
  var id = 1;

  return {
    getId: function() { return id; },
    setId: function(newId) { id = newId }
  }
}

var foo = user();
foo.getId(); // 1
foo.setId(2);
foo.getId(); // 2
這里閉包中的 id 是一個引用，不是實際值

有點像私有方法？

是的，我們可以用閉包來實現(xiàn)私有方法

閉包還可以用來做什么？

閉包是函數(shù)式編程的骨架，掌握閉包之后你可以寫出函數(shù)式 JavaScript 代碼。

函數(shù)式編程是什么？

這不是本文的討論范圍，自己去學(xué)習(xí)吧。

One More Thing

注1] 根據(jù) [Understanding JavaScript Closures 這篇文章，事實上所有函數(shù)在創(chuàng)建的時候都會形成閉包。但這種閉包并沒什么趣味，也沒什么特別的用途，所以我們更關(guān)注的是由內(nèi)部函數(shù)形成的閉包。

出處

https://scarletsky.github.io/2015/12/02/...

參考資料

http://uternet.github.io/TLS/
http://www.ruanyifeng.com/blog/2009/08/l...
https://developer.mozilla.org/zh-CN/docs...
https://developer.mozilla.org/en-US/docs...
http://javascriptissexy.com/understand-j...
http://javascriptissexy.com/javascript-v...
http://stackoverflow.com/questions/12930...
https://javascriptweblog.wordpress.com/2...
http://www.moye.me/2014/12/29/closure_hi...