首頁 > 文章 > web前端 > 詳解JavaScript作用域與閉包

詳解JavaScript作用域與閉包

小云云原創: 2017-12-05 10:40:311869瀏覽

身為程式設計師，作用域和閉包在JavaScript裡非常重要。也許在最初的時候我們很難理解什麼是作用域和閉包，在JavaScript中怎麼用呢？本文我們將詳細介紹JavaScript作用域與閉包。

作用域

JavaScript的作用域限定了你可以存取哪些變數。有兩種作用域：全域作用域，局部作用域。

全域作用域

在所有函數宣告或大括號之外定義的變量，都在 全域作用域 裡。

不過這個規則只在瀏覽器中執行的JavaScript裡有效。如果你在Node.js裡，那麼全域作用域裡的變數就不一樣了，不過這篇文章不討論Node.js。

const globalVariable = 'some value'`

一旦你宣告了一個全域變量，那麼你在任何地方都可以使用它，包括函數內部。

const hello = 'Hello CSS-Tricks Reader!'

function sayHello () {
  console.log(hello)
}

console.log(hello) // 'Hello CSS-Tricks Reader!'
sayHello() // 'Hello CSS-Tricks Reader!'

儘管你可以在全域作用域定義變量，但我們並不建議這樣做。因為可能會引起命名衝突，兩個或更多的變數使用相同的變數名稱。如果你在定義變數時使用了 const 或 let ，那麼在命名有衝突時，你就會收到錯誤提示。這是不可取的。

// Don't do this!
let thing = 'something'
let thing = 'something else' // Error, thing has already been declared

如果你定義變數時使用的是 var ，那麼第二次定義會覆寫第一次定義。這也會讓程式碼更難調試，也是不可取的。

// Don't do this!
var thing = 'something'
var thing = 'something else' // perhaps somewhere totally different in your code
console.log(thing) // 'something else'

所以，你應該盡量使用局部變量，而不是全域變數

局部作用域

在你程式碼某一個具體範圍內使用的變數都可以在局部作用域內定義。這就是 局部變數 。

JavaScript裡有兩種局部作用域：函數作用域和區塊級作用域。

我們從函數作用域開始。

函數作用域

當你在函數裡定義一個變數時，它在函數內任何地方都可以使用。在函數之外，你就無法存取它了。

例如下面這個例子，在sayHello 函數內的hello 變數：

function sayHello () {
  const hello = 'Hello CSS-Tricks Reader!'
  console.log(hello)
}

sayHello() // 'Hello CSS-Tricks Reader!'
console.log(hello) // Error, hello is not defined

區塊級作用域

你在使用大括號時，聲明了一個const 或let 的變數時，你就只能在大括號內部使用這個變數。

在下例中， hello 只能在大括號內使用。

{
  const hello = 'Hello CSS-Tricks Reader!'
  console.log(hello) // 'Hello CSS-Tricks Reader!'
}

console.log(hello) // Error, hello is not defined

區塊級作用域是函數作用域的子集，因為函數是需要用大括號定義的，（除非你明確使用return語句和箭頭函數）。

函數提升和作用域

當使用function定義時，這個函數都會被提升到目前作用域的頂端。因此，以下的程式碼是等效的：

// This is the same as the one below
sayHello()
function sayHello () {
  console.log('Hello CSS-Tricks Reader!')
}

// This is the same as the code above
function sayHello () {
  console.log('Hello CSS-Tricks Reader!')
}
sayHello()

使用函數表達式定義時，函數就不會被提升到變數作用域的頂端。

sayHello() // Error, sayHello is not defined
const sayHello = function () {
  console.log(aFunction)
}

因為這裡有兩個變量，函數提升可能會導致混亂，因此就不會生效。所以一定要在使用函數之前定義函數。

函數不能存取其他函數的作用域

在分別定義的不同的函數時，雖然可以在一個函數裡呼叫一個函數，但一個函數仍然不能存取其他函數的作用域內部。

下面這例， second 就不能存取 firstFunctionVariable 這個變數。

function first () {
  const firstFunctionVariable = `I'm part of first`
}

function second () {
  first()
  console.log(firstFunctionVariable) // Error, firstFunctionVariable is not defined
}

巢狀作用域

如果在函數內部又定義了函數，那麼內層函數可以存取外層函數的變量，但反過來則不行。這樣的效果就是詞法作用域。

外層函數並不能存取內部函數的變數。

function outerFunction () {
  const outer = `I'm the outer function!`

  function innerFunction() {
    const inner = `I'm the inner function!`
    console.log(outer) // I'm the outer function!
  }

  console.log(inner) // Error, inner is not defined
}

如果把作用域的機制視覺化，你可以想像有一個雙向鏡（單面透視玻璃）。你能從裡面看到外面，但是外面的人不能看到你。

詳解JavaScript作用域與閉包

函數作用域就像是雙向鏡。你可以從裡面向外看，但是外面看不到你。

嵌套的作用域也是相似的機制，只是相當於有更多的雙向鏡。

詳解JavaScript作用域與閉包

多層函數就意味著多個雙向鏡。

理解前面關於作用域的部分，就能理解閉包是什麼了。

閉包

你在一個函數內新建另一個函數時，就等於是建立了一個閉包。內層函數就是閉包。通常情況下，為了能夠使得外部函數的內部變數可以訪問，一般都會回傳這個閉包。

function outerFunction () {
  const outer = `I see the outer variable!`

  function innerFunction() {
    console.log(outer)
  }

  return innerFunction
}

outerFunction()() // I see the outer variable!

因為內部函數是回傳值，所以你可以簡化函數宣告的部分：

function outerFunction () {
  const outer = `I see the outer variable!`

  return function innerFunction() {
    console.log(outer)
  }
}

outerFunction()() // I see the outer variable!

因為閉包可以存取外層函數的變量，因此他們通常有兩種用途：

減少副作用
建立私有變數

使用閉包控制副作用

當你在函數傳回值時執行某些操作時，通常會發生一些副作用。副作用在很多情況下都會發生，例如Ajax調用，超時處理，或即使是 console.log 的輸出語句：

function (x) {
  console.log('A console.log is a side effect!')
}

当你使用闭包来控制副作用时，你实际上是需要考虑哪些可能会混淆代码工作流程的部分，比如Ajax或者超时。

要把事情说清楚，还是看例子比较方便：

比如说你要给为你朋友庆生，做一个蛋糕。做这个蛋糕可能花1秒钟的时间，所以你写了一个函数记录在一秒钟以后，记录做完蛋糕这件事。

为了让代码简短易读，我使用了ES6的箭头函数：

function makeCake() {
  setTimeout(_ => console.log(`Made a cake`, 1000)
  )
}

如你所见，做蛋糕带来了一个副作用：一次延时。

更进一步，比如说你想让你的朋友能选择蛋糕的口味。那么你就给做蛋糕 makeCake 这个函数加了一个参数。

function makeCake(flavor) {
  setTimeout(_ => console.log(`Made a ${flavor} cake!`, 1000))
}

因此当你调用这个函数时，一秒后这个新口味的蛋糕就做好了。

makeCake('banana')
// Made a banana cake!

但这里的问题是，你并不想立刻知道蛋糕的味道。你只需要知道时间到了，蛋糕做好了就行。

要解决这个问题，你可以写一个 prepareCake 的功能，保存蛋糕的口味。然后，在返回在内部调用 prepareCake 的闭包 makeCake 。

从这里开始，你就可以在你需要的时调用，蛋糕也会在一秒后立刻做好。

function prepareCake (flavor) {
  return function () {
    setTimeout(_ => console.log(`Made a ${flavor} cake!`, 1000))
  }
}

const makeCakeLater = prepareCake('banana')

// And later in your code...
makeCakeLater()
// Made a banana cake!

这就是使用闭包减少副作用：你可以创建一个任你驱使的内层闭包。

私有变量和闭包

前面已经说过，函数内的变量，在函数外部是不能访问的既然不能访问，那么它们就可以称作私有变量。

然而，有时候你确实是需要访问私有变量的。这时候就需要闭包的帮助了。

function secret (secretCode) {
  return {
    saySecretCode () {
      console.log(secretCode)
    }
  }
}

const theSecret = secret('CSS Tricks is amazing')
theSecret.saySecretCode()
// 'CSS Tricks is amazing'

这个例子里的 saySecretCode 函数，就在原函数外暴露了 secretCode 这一变量。因此，它也被成为特权函数。

使用DevTools调试

Chrome和Firefox的开发者工具都使我们能很方便的调试在当前作用域内可以访问的各种变量一般有两种方法。

第一种方法是在代码里使用 debugger 关键词。这能让浏览器里运行的JavaScript的暂停，以便调试。

下面是 prepareCake 的例子：

function prepareCake (flavor) {
  // Adding debugger
  debugger
  return function () {
    setTimeout(_ => console.log(`Made a ${flavor} cake!`, 1000))
  }
}

const makeCakeLater = prepareCake('banana')

打开Chrome的开发者工具，定位到Source页下（或者是Firefox的Debugger页），你就能看到可以访问的变量了。

詳解JavaScript作用域與閉包

使用debugger调试 prepareCake 的作用域。

你也可以把 debugger 关键词放在闭包内部。注意对比变量的作用域：

function prepareCake (flavor) {
  return function () {
    // Adding debugger
    debugger
    setTimeout(_ => console.log(`Made a ${flavor} cake!`, 1000))
  }
}

const makeCakeLater = prepareCake('banana')

詳解JavaScript作用域與閉包

调试闭包内部作用域

第二种方式是直接在代码相应位置加断点，点击对应的行数就可以了。

詳解JavaScript作用域與閉包

通过断点调试作用域

闭包和作用域并不是那么难懂。一旦你使用双向镜的思维去理解，它们就非常简单了。当你在函数里声明一个变量时，你只能在函数内访问。这些变量的作用域就被限制在函数里了。如果你在一个函数内又定义了内部函数，那么这个内部函数就被称作闭包。它仍可以访问外部函数的作用域。希望本文能帮助到大家。

詳解JavaScript作用域與閉包

作用域

閉包

使用DevTools调试

相關文章