作用域和閉包

[圖片上傳失敗...(image-9ad041-1561218142988)]

目錄

  1. 概述
  2. 作用域
    • 編譯過(guò)程
    • 詞法作用域
    • 全局作用域
    • 函數(shù)作用域
  3. 閉包
    • 循環(huán)和閉包
    • 閉包的用途
    • 性能
  4. 總結(jié)

概述

作用域和閉包一直是各大小廠面試的重點(diǎn)，學(xué)習(xí)了一段時(shí)間 JS 了，是時(shí)候?qū)@部分知識(shí)有個(gè)交代了。

本文暫不涉及ES6的塊級(jí)作用域。
本文是對(duì)《你不知道的JavaScript》的大量梳理。

作用域

作用域是一套用來(lái)存儲(chǔ)變量的規(guī)則，用于確定在何處以及如何查找變量（標(biāo)志符）。

作用域也通常被理解為變量存在的范圍、當(dāng)前的執(zhí)行上下文等。在 ES5 的規(guī)范中，JavaScript 只有兩種作用域：

  • 全局作用域：變量在整個(gè)程序中一直存在，所有地方都可以讀取
  • 函數(shù)作用域：變量只在函數(shù)內(nèi)部存在

當(dāng)一個(gè)函數(shù)中嵌套另一個(gè)函數(shù)，它的作用域也會(huì)嵌套，一層層的作用域嵌套，就形成了作用域鏈。
如果一個(gè)變量或者其他表達(dá)式不在當(dāng)前的作用域，那么 JS 機(jī)制會(huì)繼續(xù)沿著一層一層作用域鏈往上查找，直到全局作用域（global 或?yàn)g覽器中的 window）。如果找不到將不可被使用。

而在源代碼執(zhí)行前，會(huì)先經(jīng)歷編譯過(guò)程。

編譯過(guò)程

與傳統(tǒng)的編譯語(yǔ)言不同，JavaScript 不是提前編譯的，大部分情況下編譯發(fā)生在代碼執(zhí)行前的幾微秒甚至更短的時(shí)間內(nèi)。因此 JavaScript 引擎用了各種辦法（比如 JIT，可以延遲甚至重編譯）來(lái)保證性能最佳。

整個(gè)編譯過(guò)程分為以下幾步：

（1）詞法分析

這個(gè)過(guò)程會(huì)將由字符組成的字符串分解成有意義的代碼塊，這些代碼塊被稱為詞法單元（token）。

比如 var a = 2，這段程序會(huì)分解成這些詞法單元：var、a、=、2。之間的空格是否當(dāng)做詞法單元取決于是否有意義。

（2）語(yǔ)法分析

這個(gè)過(guò)程是將詞法單元流（數(shù)組）轉(zhuǎn)換成一個(gè)由元素逐級(jí)嵌套所組成的代表了程序語(yǔ)法結(jié)構(gòu)的樹(shù)。這個(gè)樹(shù)被稱為“抽象語(yǔ)法樹(shù)”（Abstract Syntax Tree，AST）。

這棵樹(shù)定義了代碼的結(jié)構(gòu)，通過(guò)操縱這棵樹(shù)，我們可以精準(zhǔn)的定位到聲明語(yǔ)句、賦值語(yǔ)句、運(yùn)算語(yǔ)句等等，實(shí)現(xiàn)對(duì)代碼的分析、優(yōu)化、變更等操作。

舉個(gè)例子：

var global1 = 1

上面這段代碼的 AST 如下（Parser: acorn-6.1.1）：

{
      "type": "VariableDeclaration",
      "declarations": [
        {
          "type": "VariableDeclarator",
          "id": {
            "type": "Identifier",
            "name": "global1"
          },
          "init": {
            "type": "Literal",
            "value": 1,
            "raw": "1"
          }
        }
      ],
      "kind": "var"
}

舉個(gè)更復(fù)雜的例子（詳見(jiàn)——完整語(yǔ)法樹(shù)）：

var global1 = 1
function fn1(param1){
    var local1 = 'local1'
    var local2 = 'local2'
    function fn2(param2){
        var local2 = 'inner local2'
        console.log(local1)
        console.log(local2)
    }

    function fn3(){
        var local2 = 'fn3 local2'
        fn2(local2)
    }

    fn3()  // 'local1'
           // 'inner local2'
}

fn1()

如果只分析變量聲明，AST 可以簡(jiǎn)化為如下的圖：

[圖片上傳失敗...(image-be5a10-1561218142988)]

整個(gè)分析過(guò)程是在靜態(tài)階段完成的，因此 fn3 中的 fn2 在語(yǔ)法分析階段就已經(jīng)確定了它的聲明位置，并且在 fn1 調(diào)用的時(shí)候，明確了 fn2 的作用域是 fn1 的函數(shù)結(jié)構(gòu)體內(nèi)，fn3 的函數(shù)作用域并不會(huì)對(duì)其造成影響，因此打印的 local2 的值是 'inner local2' 而不是 'fn3 local2'。

AST 常見(jiàn)的幾種用途：

  • 代碼語(yǔ)法的檢查、代碼風(fēng)格的檢查、代碼的格式化、代碼的高亮、代碼錯(cuò)誤提示、代碼自動(dòng)補(bǔ)全等等
    • 如JSLint、JSHint對(duì)代碼錯(cuò)誤或風(fēng)格的檢查，發(fā)現(xiàn)一些潛在的錯(cuò)誤
      IDE的錯(cuò)誤提示、格式化、高亮、自動(dòng)補(bǔ)全等等
  • 代碼混淆壓縮
    • UglifyJS2等
  • 優(yōu)化變更代碼，改變代碼結(jié)構(gòu)使達(dá)到想要的結(jié)構(gòu)
    • 代碼打包工具webpack、rollup等等
      CommonJS、AMD、CMD、UMD等代碼規(guī)范之間的轉(zhuǎn)化
      CoffeeScript、TypeScript、JSX等轉(zhuǎn)化為原生Javascript

（3）代碼生成

將 AST 轉(zhuǎn)換為可執(zhí)行代碼的過(guò)程。

代碼生成就是上一個(gè)步驟得到的 AST 轉(zhuǎn)化為機(jī)器指令，然后在內(nèi)存中存儲(chǔ)它們。

詞法作用域

就是定義在詞法階段的作用域。變量的作用域是在定義時(shí)而非執(zhí)行時(shí)決定，也就是說(shuō)詞法作用域取決于源碼，通過(guò)靜態(tài)分析就能確定，因此詞法作用域也叫做靜態(tài)作用域（with 和 eval 可以欺騙詞法作用域）。

以 var a = 2 為例：

  1. 編譯器遇到 var a 會(huì)詢問(wèn)作用域中是否有該名稱的變量。如果是，忽略并繼續(xù)編譯；如果不是，在當(dāng)前作用域聲明變量，命名為 a。
  2. 引擎執(zhí)行代碼 a = 2，會(huì)查詢 a （LHS查詢）并對(duì)其進(jìn)行賦值。

查詢分兩種：

  • LHS（Left Hand Side）：查找目的是為變量賦值
  • RHS（Right Hand Side）：查找目的是獲取變量的值

LHS 和 RHS 查詢都會(huì)在當(dāng)前執(zhí)行作用域開(kāi)始，如果沒(méi)有找到所需標(biāo)志符，就會(huì)向上級(jí)作用域繼續(xù)查詢，一級(jí)一級(jí)直到全局作用域。到了全局作用域，如果 RHS 查詢失敗拋出 ReferenceError，如果 LHS 查詢失敗會(huì)隱式創(chuàng)建一個(gè)全局變量（非嚴(yán)格模式）。

[圖片上傳失敗...(image-1db6b0-1561218142989)]

看個(gè)例子：

function foo(a) {
  var b = a
  return a + b
}
var c = foo(2)
  1. 引擎執(zhí)行 var c = foo(2)，會(huì)在作用域里查找（RHS）是否有 foo 函數(shù)
  2. 找到后，將實(shí)參 2 賦值給形參 a（LHS，隱式變量分配）
  3. var b = a，首先要先找到變量 a（RHS）
  4. 將 a 的值賦值給 b（LHS）
  5. return a + b，分別查找 a 和 b 的值（兩次 RHS），然后返回
  6. 將 foo(2) 的結(jié)果賦值給 c（LHS）

全局作用域

以瀏覽器環(huán)境為例：

  • 最外層函數(shù)和在最外層函數(shù)外面定義的變量擁有全局作用域
  • 所有未定義直接賦值的變量自動(dòng)聲明為擁有全局作用域
  • 所有 window 對(duì)象的屬性擁有全局作用域

缺點(diǎn)：會(huì)污染全局命名空間。

解決方案：

  • 立即執(zhí)行函數(shù)（Immediately Invoked Function Expression， IIFE），因此很多庫(kù)的源碼都在使用
  • 模塊化 (ES6、commonjs 等等)

函數(shù)作用域

函數(shù)作用域指屬于這個(gè)函數(shù)的全部變量都可以在整個(gè)函數(shù)范圍內(nèi)使用及復(fù)用。

function foo() {
  let name = 'Shawn'
  function sayName() {
    console.log(`Hello, ${name}`)
  }
  sayName()
}
foo() // 'Hello, Shawn'
console.log(name) // 外部無(wú)法訪問(wèn)到內(nèi)部變量
sayName() // 外部無(wú)法訪問(wèn)到內(nèi)部函數(shù)

閉包

當(dāng)函數(shù)可以記住并訪問(wèn)所在的詞法作用域，即使函數(shù)是在當(dāng)前詞法作用域之外執(zhí)行，這時(shí)就產(chǎn)生了閉包。

舉個(gè)最簡(jiǎn)單的閉包（函數(shù) + 函數(shù)內(nèi)部能訪問(wèn)的變量）：

var local = "變量"
function foo () {
  console.log(local)
}

但這樣 local 就暴露在了全局作用域中，其他函數(shù)也能訪問(wèn)。并且，這里只體現(xiàn)了可以訪問(wèn)，并沒(méi)有“記住”。所以在閉包的基礎(chǔ)上還需添加一些代碼，使得變量 local 成為 foo 的局部變量，且 foo 能被外部訪問(wèn)到。一些實(shí)現(xiàn)方式：

（1）用立即執(zhí)行函數(shù)封裝，并將所需函數(shù)添加為 window 的全局變量

!function(){
  var local = "變量"
  window.foo = function (){
    console.log(local)
  }
}()

foo()

（2）匿名函數(shù)表達(dá)式，將所需函數(shù)當(dāng)做參數(shù)返回

var a = function(){
  var local = "變量"
  function foo(){
    console.log(local)
  }
  return foo  
}

var myFoo = a()
myFoo()  // 這就是閉包的效果

上面（2）中的例子里，因?yàn)樾枰L問(wèn)局部變量 local，設(shè)計(jì)了函數(shù) foo，根據(jù)嵌套函數(shù)“內(nèi)部函數(shù)可以訪問(wèn)外部函數(shù)的參數(shù)和變量”的特點(diǎn)，foo 可以訪問(wèn)到局部變量 local，然后在外部函數(shù)中，將 foo 作為參數(shù)返回。這樣，當(dāng)匿名函數(shù)被賦值給 a，然后將 a 的執(zhí)行結(jié)果賦值給 myFoo，就等價(jià)于 myFoo = foo，執(zhí)行 myFoo，就達(dá)到了記住并訪問(wèn) foo 所在詞法作用域的目的。

并且，在 a() 執(zhí)行之后，由于閉包的存在，其內(nèi)部作用域并不會(huì)被GC銷毀，因?yàn)?foo() 在持續(xù)使用該內(nèi)部作用域。

無(wú)論以何種方式將內(nèi)部函數(shù)傳遞到所在詞法作用域之外，它都會(huì)保持對(duì)原始定義作用域的引用，無(wú)論在何處執(zhí)行這個(gè)函數(shù)都會(huì)使用閉包。

循環(huán)和閉包

來(lái)看個(gè)經(jīng)典的例子：

for (var i = 1; i <=5; i++) {
  setTimeout(function timer(){
    console.log(i)
  }, i * 1000)
}

初看這段代碼時(shí)，我對(duì)這段代碼的預(yù)期是：分別輸出數(shù)字 1~5，每秒一次，一次一個(gè)。
然而實(shí)際運(yùn)行結(jié)果是：輸出五次 6，每秒一次。

[圖片上傳失敗...(image-6612c3-1561218142989)]

Why？

首先，循環(huán)結(jié)束時(shí) i 的值是 6，然后，延遲函數(shù)的回調(diào)會(huì)在循環(huán)結(jié)束時(shí)才執(zhí)行。即使設(shè)置 setTimeout(..., 0)，結(jié)果依然不變。

Why?

因?yàn)?setTimeout 是異步執(zhí)行的，1000 毫秒后向任務(wù)隊(duì)列里添加一個(gè)任務(wù)，只有主線程上的任務(wù)全部執(zhí)行完畢才會(huì)執(zhí)行任務(wù)隊(duì)列里的任務(wù)，所以當(dāng)主線程 for 循環(huán)執(zhí)行完之后 i 的值為 6，而用這個(gè)時(shí)候再去任務(wù)隊(duì)列中執(zhí)行任務(wù)，因此 i 全部為 6。
又因?yàn)樵?for 循環(huán)中使用 var 聲明的 i 是在全局作用域中，那么全程都只有一個(gè) i，盡管循環(huán)中的 5 個(gè)函數(shù)都在各自的迭代中分別定義，然而它們共享這一個(gè) i 的引用，因此 timer 函數(shù)中打印出來(lái)的 i 自然是都是 6。

那么，我們需要給循環(huán)中的每個(gè)迭代過(guò)程都設(shè)定一個(gè)閉包作用域。

試一下立即執(zhí)行函數(shù)（IIFE）來(lái)解決。

第一次嘗試：

for (var i = 1; i <=5; i++) {
  !function () {
    setTimeout(function timer(){
      console.log(i)
    }, i * 1000)
  }()
}

然而這樣并不能成功，因?yàn)槟涿瘮?shù)的作用域是空的，它并沒(méi)有什么實(shí)質(zhì)內(nèi)容為我們所用。全程依然只有一個(gè) i。

第二次嘗試：

for (var i = 1; i <=5; i++) {
  !function () {
    var j = i
    setTimeout(function timer(){
      console.log(j)
    }, j * 1000)
  }()
}

It worked! 但是代碼看起來(lái)不太優(yōu)雅。

第三次嘗試：

for (var i = 1; i <=5; i++) {
  !function (j) {
    setTimeout(function timer(){
      console.log(j)
    }, j * 1000)
  }(i)
}

這樣，在迭代內(nèi)使用 IIFE 會(huì)為每個(gè)迭代都生成一個(gè)新的作用域，使得延遲函數(shù)的回調(diào)可以將新的作用域封閉在每個(gè)迭代內(nèi)部，每個(gè)迭代中都會(huì)含有一個(gè)具有正確值的變量供我們?cè)L問(wèn)。

那么，ES6 之后這個(gè)問(wèn)題是怎么解決的呢？首先想到let，可以用來(lái)劫持塊作用域，并且在塊作用域內(nèi)聲明一個(gè)變量。

第四次嘗試：

for (var i = 1; i <=5; i++) {
  let j = i    // 閉包的塊作用域
  setTimeout(function timer(){
    console.log(j)
  }, j * 1000)
}

那么，這是不是究極答案呢？先看代碼：

第五次嘗試：

for (let i = 1; i <=5; i++) {
  setTimeout(function timer(){
    console.log(i)
  }, i * 1000)
}

最后這種寫(xiě)法，是現(xiàn)在的通用寫(xiě)法。
它是一個(gè)語(yǔ)法糖，并且其內(nèi)部原理就是第四次嘗試的寫(xiě)法代碼。這里 i 的作用域只在 for(...) 的圓括號(hào)內(nèi)，只不過(guò)每次迭代，JS 會(huì)自動(dòng)重新聲明一個(gè) i 在 {...} 內(nèi)，隨后的每個(gè)迭代的 i 都會(huì)使用上一個(gè)迭代結(jié)束時(shí)的值來(lái)初始化。

閉包的用途

（1）存儲(chǔ)、隱藏變量

閉包一大用途是讀取函數(shù)內(nèi)部的變量，并讓這些變量始終保持在內(nèi)存中，即閉包可以使得它誕生環(huán)境一直存在。并且由于是函數(shù)內(nèi)部的變量，局部變量外部無(wú)法訪問(wèn)，也達(dá)到了隱藏的目的。

function createCounter(initial) {
    var x = initial || 0
    return {
        inc: function () {
            x += 1
            return x
        }
    }
}

var c1 = createCounter()
c1.inc() // 1
c1.inc() // 2
c1.inc() // 3

var c2 = createCounter(1024)
c2.inc() // 1025
c2.inc() // 1026
c2.inc() // 1027

上例中，x 是函數(shù) createCounter 的內(nèi)部變量。通過(guò)閉包，x 的狀態(tài)被保留了，每一次調(diào)用都是在上一次調(diào)用的基礎(chǔ)上進(jìn)行計(jì)算。inc 存在依賴于 createCounter，因此也始終在內(nèi)存中，不會(huì)在調(diào)用結(jié)束后，被垃圾回收機(jī)制回收。這就使得變量 x 達(dá)到了儲(chǔ)存且隱藏的目的。

所以，閉包可以看作是函數(shù)內(nèi)部作用域的一個(gè)接口。

（2）封裝私有變量

由于 JavaScript 中的屬性沒(méi)有 public、private 這類的修飾符來(lái)控制訪問(wèn)，并且所有屬性都需要在函數(shù)中定義，我們需要一些手段來(lái)達(dá)到變量私有化的目的。

var Foo = function () {
    var _name = 'Frank'
    this.getName = function () {
        return _name
    }
    this.setName = function (str) {
        _name = str
    }
}
var foo1 = new Foo()
foo1.setName('Shawn')

var foo2 = new Foo()
foo2.setName('Givenchy')

foo1._name // undefined，外部無(wú)法直接訪問(wèn)局部變量，相當(dāng)于“私有化”
foo1.getName() // 'Shawn'
foo2.getName() // 'Givenchy'

上例中，函數(shù) Foo 的內(nèi)部變量 _name，通過(guò)閉包 setName 和 getName，變成了返回對(duì)象 foo1 和 foo2 的私有變量，并且它們之間互不影響，互相獨(dú)立。

更普遍地，本質(zhì)上無(wú)論何時(shí)何地，如果將（訪問(wèn)它們各自詞法作用域的）函數(shù)當(dāng)作第一級(jí)的值類型并到處傳遞，就能看到閉包在這些函數(shù)中的應(yīng)用。如在定時(shí)器、事件監(jiān)聽(tīng)器、AJAX請(qǐng)求、跨窗口通信、Web Worders或者任何其他的異步（或同步）任務(wù)中，只要使用了回調(diào)函數(shù)，實(shí)際上就是在使用閉包。

性能

如果不是某些特定任務(wù)需要使用閉包，在其它函數(shù)中創(chuàng)建函數(shù)是不明智的，因?yàn)殚]包在處理速度和內(nèi)存消耗方面對(duì)腳本性能具有負(fù)面影響。

例如，在創(chuàng)建新的對(duì)象或者類時(shí)，方法通常應(yīng)該關(guān)聯(lián)于對(duì)象的原型，而不是定義到對(duì)象的構(gòu)造器中。原因是這將導(dǎo)致每次構(gòu)造器被調(diào)用時(shí)，方法都會(huì)被重新賦值一次（也就是，每個(gè)對(duì)象的創(chuàng)建）。

例如上例的封裝私有變量的閉包改成在原型上定義更好：

var Foo = function () {
    var _name = 'Frank'
    Foo.prototype.getName = function () {
        return _name
    }
    Foo.prototype.setName = function (str) {
        _name = str
    }
}

繼承的原型可以為所有對(duì)象共享，不必在每一次創(chuàng)建對(duì)象時(shí)定義方法。

總結(jié)

  • Q：什么是作用域？
    A：作用域是用于確定在何處以及如何查找變量的一套規(guī)則。
  • Q：什么是作用域鏈？
    A：當(dāng)一個(gè)函數(shù)嵌套在另一個(gè)函數(shù)中時(shí)，就發(fā)生了作用域嵌套。如果在當(dāng)前作用域下找不到某個(gè)變量，JS 引擎就會(huì)往外層嵌套的作用域繼續(xù)查找，直到找到該變量或抵達(dá)全局作用域。如果在全局作用域中還沒(méi)找到就會(huì)報(bào)錯(cuò)。這種逐級(jí)向上查找的模式就是作用域鏈。
  • Q：什么是閉包？
    A：當(dāng)函數(shù)可以記住并訪問(wèn)所在的詞法作用域，即使函數(shù)是在當(dāng)前詞法作用域之外執(zhí)行，這時(shí)就產(chǎn)生了閉包。

后面等刷了一些題之后會(huì)挑出一些經(jīng)典的題目總結(jié)一下，以備面試和加深之用。

參考：

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 目錄 概述 作用域編譯過(guò)程詞法作用域全局作用域函數(shù)作用域 閉包循環(huán)和閉包閉包的用途性能 總結(jié) 概述 作用域和閉包一...
    許驍Charles閱讀 558評(píng)論 0贊 1
  • You don't KnowJS 引語(yǔ)：你不懂的JS這本書(shū)?github上已經(jīng)有了7w的star最近也是張野大大給...
    Sleet閱讀 661評(píng)論 0贊 0
  • 作用域 作用域是一套存儲(chǔ)、訪問(wèn)變量的規(guī)則。這套規(guī)則用來(lái)管理引擎如何在當(dāng)前作用域以及嵌套的子作用域中根據(jù)標(biāo)識(shí)符名稱進(jìn)...
    獨(dú)木舟的木閱讀 459評(píng)論 0贊 0
  • 《你不知道的JavaScript》真的是一本好書(shū)，閱讀這本書(shū)，我有多次“哦，原來(lái)是這樣”的感覺(jué)，以前自以為理解了（...
    然并阮閱讀 652評(píng)論 2贊 9
  • 讀《你不知道的JavaScript》，顯然沒(méi)有讀懂TAT JavaScript 作用域和閉包 賦值操作 當(dāng)變量出現(xiàn)...
    錦繡拾年閱讀 180評(píng)論 0贊 1

友情鏈接更多精彩內(nèi)容