闭包到底是什么？（简单的 JS 定义）

我记得我的第一次工作面试，面试官让我定义 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

以上是闭包到底是什么？（简单的 JS 定义）的详细内容。更多信息请关注PHP中文网其他相关文章！