閉包到底是什麼？

我記得我的第一次工作面試，面試官要我定義 Closure。這是一場噩夢，因為我不知道技術術語。但內心深處，我有一種感覺，我明白這代表什麼，即使我無法解釋。

面試結束後（劇透：我沒有被選中），我趕緊去 Google 閱讀有關關閉的信息。我遇到的第一個術語是詞法範圍 = _What?

別擔心，詞法作用域只是一個簡單的術語！

所以讓我們一步步深入了解它。

詞彙範圍解釋

想想你的房子。想像一下您在臥室裡，想要打開臥室的燈。您只能打開您目前所在房間中的燈。這就是詞法範圍：您只能存取和修改目前上下文中的事物（例如燈）。

const bedroom = () => {
  let bedroomLamp = 'off'

  const turnOnBedroomLamp = () => {
    bedroomLamp = 'on'
  }

  const turnOffBedroomLamp = () => {
    bedroomLamp = 'off'
  }
}

函數turnOnBedroomLamp和turnOffBedroomLamp存在於臥室上下文中，因此它們可以存取和修改bedroomLamp變數。

現在，想像您在廚房並嘗試關閉臥室的燈。這不起作用，因為您處於不同的上下文中，廚房無權訪問臥室燈變數：

const kitchen = () => {
  const turnOnBedroomLamp = () => {
    bedroomLamp = 'on' // You can't do this!!
  }
}

很簡單吧？

詞彙範圍和閉包有什麼關係？

現在讓我們更進一步。想像一下，你的房子有一個遙控器，無論你在哪個房間，它都可以讓你打開臥室的燈。即使你在廚房，這個遙控器也會「記住」它控制的臥室燈。

這個「記憶」就是閉包！

這是程式碼範例：

const bedroom = () => {
  let bedroomLamp = 'off'

  const turnOnBedroomLamp = () => {
    bedroomLamp = 'on'
  }

  return turnOnBedroomLamp // Returning the function
}

const remoteControl = bedroom() // Creating the closure
remoteControl() // Using the closure to turn on the bedroom lamp

在此範例中：

bedroom 函數建立一個局部變數 BedroomLamp 和一個函數 TurnOnBedroomLamp。

turnOnBedroomLamp 會記住創建它的上下文（臥室函數）。

當我們呼叫remoteControl（傳回的函數）時，它仍然可以存取bedroomLamp 變量，即使我們現在位於bedroom 函數之外。

看到了嗎？這是一個非常簡單的想法，只是 Javascript 記住東西，這樣你就可以在不同的地方以不同的方式使用。

現在在真實的程式碼環境中思考，讓我們看看如何在當今時代使用閉包。下面的程式碼創建了一個在產品價值中添加折扣的函數。

const createDiscount = (discount) => {
  return (price) => price - price * discount
}

const tenPercentOff = createDiscount(0.1) // 10% off
const twentyPercentOff = createDiscount(0.2) // 20% off

// Using discount functions
console.log(tenPercentOff(100)) // returns 90
console.log(twentyPercentOff(200)) // returns 160

現在你已經了解了閉包，並在面試詢問你定義時做好了準備。更多內容請查看參考資料部分。

參考

關閉 - MDN Web Docks

JavaScript 中的閉包 - GeeksForGeeks

以上是閉包到底是什麼？的詳細內容。更多資訊請關注PHP中文網其他相關文章！