javascript闭包_为什么您应该知道JavaScript闭包

javascript闭包

Fully understanding closures may seem like a right of passage to becoming a JavaScript developer.

充分理解闭包似乎是成为JavaScript开发人员的通行权利。

There is a reason why it can be difficult to make sense of closures—because they are often taught backwards. You may have been taught what a closures is, but you might not understand how they are useful to the average developer or within your own code.

有一个原因使得很难理解闭包-因为闭包经常被反向学习 。 您可能已经学会了闭包是什么，但是您可能不了解闭包对普通开发人员或在您自己的代码中如何有用。

So why do closures matter in our day-to-day JavaScript code?

那么为什么闭包在我们的日常JavaScript代码中很重要？

Instead of seeing closures as a topic to be memorized for some sort of pop quiz, let's see what series of steps can lead us to seeing a closure in the first place. Once we see what they are, we will uncover why closures are worthwhile for you to know and take advantage of in your JavaScript code.

与其将闭包作为某种流行测验要记住的主题，不如让我们看看哪些步骤可以使我们首先看到闭包。 一旦了解了它们的含义，我们将揭示为什么闭包值得您了解并在JavaScript代码中加以利用。

Want to watch this lesson instead? This tutorial is part of the 2020 JS Bootcamp, a 4+ hour course that shows you how to be a JavaScript expert through tons of practical, no-nonsense lessons. Get instant access to the JS Bootcamp here.

是否要观看本课程？ 本教程是2020 JS Bootcamp的一部分，这是一个4小时以上的课程，向您展示如何通过大量实用的，毫无意义的课程成为JavaScript专家。 在此处立即访问JS Bootcamp 。

在野外看到封闭 (Seeing a closure in the wild 🔎)

Let's say we are making an app clone of the blogging site Medium, and we want each user to be able to like different posts.

假设我们正在制作Blog网站Medium的应用程序克隆，我们希望每个用户都能喜欢不同的帖子。

Whenever a user clicks on the like button, its value will be incremented by one each time.

每当用户单击“赞”按钮时，其值将每次增加一。

Think of it like the Medium clap button:

可以将其想象为“中等鼓掌”按钮：

The function that will handle increasing the count by 1 each time is called handleLikePost and we are keeping track of the number of likes with a variable named likeCount:

每次将使计数增加1的函数称为handleLikePost ，我们使用一个名为likeCount的变量来跟踪喜欢的likeCount ：

// global scope
let likeCount = 0;

function handleLikePost() {
  // function scope
  likeCount = likeCount + 1;
}

handleLikePost();
console.log("like count:", likeCount); // like count: 1

Whenever a user likes a post, we call handleLikePost and it increments our likeCount by 1.

每当用户喜欢帖子时，我们都会调用handleLikePost并且它将likeCount增加1。

And this works because we know that functions can access variables outside of themselves.

之所以可行，是因为我们知道函数可以访问自身之外的变量。

In other words, functions can access any variables defined in any parent scope.

换句话说， 函数可以访问在任何父范围中定义的任何变量 。

There's a problem with this code, however. Since likeCount is in the global scope, and not in any function, likeCount is a global variable. Global variables can be used (and changed) by any other bit of code or function in our app.

但是，此代码存在问题。 由于likeCount在全局范围内，而不在任何函数中，因此likeCount是全局变量。 全局变量可以由我们应用程序中的任何其他代码或功能使用(或更改)。

For example, what if after our function, we mistakenly set our likeCount to 0?

例如，如果在我们的函数之后错误地将likeCount设置为0，该怎么办？

let likeCount = 0;

function handleLikePost() {
  likeCount = likeCount + 1;
}

handleLikePost();
likeCount = 0;
console.log("like count:", likeCount); // like count: 0

Naturally, likeCount can never be incremented from 0.

自然， likeCount永远不能从0开始递增。

When only one function needs a given piece of data, it just needs to exist locally, that is, within that function.

当只有一个功能需要给定的数据时，它仅需要存在于本地，即在该功能内。

Now let's bring likeCount within our function:

现在让我们在函数中加入likeCount ：

function handleLikePost() {
  // likeCount moved from global scope to function scope
  let likeCount = 0;
  likeCount = likeCount + 1;
}

Note that there's a shorter way to write the line where we increment likeCount. Instead of saying likeCount is equal to previous value of likeCount and add one like this, we can just use the += operator like so:

注意，有一种更短的方法可以在我们增加likeCount行中编写likeCount 。 likeCount等于likeCount先前值并像这样添加一个值， likeCount说我们可以使用+ =运算符：

function handleLikePost() {
  let likeCount = 0;
  likeCount += 1;
}

And for it to work as before and get like count's value, we also need to bring our console.log into the function as well.

为了使其像以前一样工作并获得count的值，我们还需要将console.log带入该函数中。

function handleLikePost() {
  let likeCount = 0;
  likeCount += 1;
  console.log("like count:", likeCount);
}

handleLikePost(); // like count: 1

And it still works properly as before.

而且它仍然像以前一样正常工作。

So now users should be able to like a post as many times as they want, so let's call handleLikePost a few more times:

因此，现在用户应该可以根据自己的喜好多次，因此我们可以再多次调用handleLikePost ：

handleLikePost(); // like count: 1
handleLikePost(); // like count: 1
handleLikePost(); // like count: 1

When we run this code, however, there's a problem.

但是，当我们运行此代码时，就会出现问题。

We would expect to see the likeCount keep increasing, but we just see 1 each time. Why is that?

我们希望看到likeCount持续增加，但是每次只能看到1。 这是为什么？

Take a second, look at our code and try to explain why our likeCount is no longer being incremented.

花一点时间，看一下我们的代码，尝试解释为什么我们的likeCount不再增加。

Let's look at our handleLikePost function and how it's working:

让我们看一下handleLikePost函数及其工作方式：

function handleLikePost() {
  let likeCount = 0;
  likeCount += 1;
  console.log("like count:", likeCount);
}

Every time we use it, we are recreating this likeCount variable, which is given an initial value of 0.

每次使用它时，我们都会重新创建一个likeCount变量，该变量的初始值为0。

No wonder we can't keep track of the count between function calls! It keeps being set to 0 each time, then it's incremented by 1, after which the function is finished running.

难怪我们无法跟踪函数调用之间的计数！ 每次都将其设置为0，然后将其递增1，此后函数运行完毕。

So we're stuck here. Our variable needs to live inside of the handleLikePost function, but we can't preserve the count.

所以我们被困在这里。 我们的变量需要位于handleLikePost函数内部，但是我们无法保留计数。

We need something that allows us to preserve or remember the likeCount value between function calls.

我们需要使我们能够保留或记住函数调用之间的likeCount值的likeCount 。

What if we tried something that may look a little strange at first—what if we tried putting another function in our function:

如果我们尝试了一些一开始可能看起来有些奇怪的东西—如果我们尝试在函数中添加另一个函数，该怎么办：

function handleLikePost() {
  let likeCount = 0;
  likeCount += 1;
  function() {

  }
}

handleLikePost();

Here we're going to name this function addLike. The reason? Because it will be responsible for incrementing the likeCount variable now.

在这里，我们将这个函数addLike 。 原因？ 因为它将负责立即增加likeCount变量。

And note that this inner function doesn't have to have a name. It can be an anonymous function. In most cases, it is. We're just giving it a name so we can more easily talk about it and what it does.

并且请注意，此内部函数不必具有名称。 它可以是一个匿名函数。 在大多数情况下是这样。 我们只是给它起一个名字，以便我们可以更轻松地谈论它及其作用。

addLike will now be responsible for increasing our likeCount, so we'll move the line where we increment by 1 into our inner function.

addLike现在将负责增加我们的likeCount ，因此我们将将递增1的行移动到内部函数中。

function handleLikePost() {
  let likeCount = 0;
  function addLike() {
    likeCount += 1;
  }
}

What if we were to call this addLike function in handleLikePost?

如果我们在handleLikePost调用此addLike函数handleLikePost办？

All that would happen is that addLike would increment our likeCount, but still the likeCount variable would be destroyed. So again, we lose our value and the result is 0.

将会发生的一切就是addLike将增加我们的likeCount ，但是likeCount变量仍然会被破坏。 因此，我们再次失去了价值，结果是0。

But instead of calling addLike within its enclosing function, what if we called it outside of the function? This seems even stranger. And how would we do that?

但是， addLike在函数的外部调用addLike在函数外部调用addLike怎么办？ 这似乎更陌生。 那我们该怎么做呢？

We know at this point that functions return values. For example, we could return our likeCount value at the end of handleLikePost to pass it to other parts of of our program:

至此，我们知道函数会返回值。 例如，我们可以回到我们的likeCount在年底值handleLikePost将它传递给我们的程序的其他部分：

function handleLikePost() {
  let likeCount = 0;
  function addLike() {
    likeCount += 1;
  }
  addLike();
  return likeCount;
}

But instead of doing that, let's return likeCount within addLike and then return the addLike function itself:

但是在做的是，让我们回到likeCount内addLike然后返回addLike函数本身：

function handleLikePost() {
  let likeCount = 0;
  return function addLike() {
    likeCount += 1;
    return likeCount;
  };
  // addLike();
}

handleLikePost();

Now this may look bizarre, but this is allowed in JS. We can use functions like any other value in JS. That means a function can be returned from another function. By returning the inner function, we can call it from outside of its enclosing function.

现在，这看起来很奇怪，但这在JS中是允许的。 我们可以像在JS中使用任何其他值一样使用函数。 这意味着一个函数可以从另一个函数返回。 通过返回内部函数，我们可以从其封闭函数的外部调用它。

But how would we do that? Think about this for a minute and see if you can figure it out...

但是我们该怎么做呢？ 仔细考虑一下，看看是否可以解决...

First, to better see what's happening, let's console.log(handleLikePost) when we call it and see what we get:

首先，为了更好地了解发生了什么，让我们在调用它时查看console.log(handleLikePost)并看看得到了什么：

function handleLikePost() {
  let likeCount = 0;
  return function addLike() {
    likeCount += 1;
    return likeCount;
  };
}

console.log(handleLikePost()); // ƒ addLike()

Unsurprisingly, we get the addLike function logged. Why? Because we're returning it, after all.

毫不奇怪，我们记录了addLike函数。 为什么？ 毕竟，因为我们要退货。

To call it, couldn't we just put it in another variable? As we just said, functions can be used like any other value in JS. If we can return it from a function, we can put it in a variable too. So let's put it in a new variable called like:

调用它，我们不能只是将它放在另一个变量中吗？ 就像我们刚才说的，函数可以像JS中的其他任何值一样使用。 如果我们可以从函数中返回它，我们也可以将其放入变量中。 因此，让我们将其放入一个名为like的新变量中：

function handleLikePost() {
  let likeCount = 0;
  return function addLike() {
    likeCount += 1;
    return likeCount;
  };
}

const like = handleLikePost();

And finally, let's call like. We'll do it a few times and console.log each result:

最后，我们叫like 。 我们将执行几次，然后console.log每个结果：

function handleLikePost() {
  let likeCount = 0;
  return function addLike() {
    likeCount += 1;
    return likeCount;
  };
}

const like = handleLikePost();

console.log(like()); // 1
console.log(like()); // 2
console.log(like()); // 3

Our likeCount is finally preserved! Every time we call like, the likeCount is incremented from its previous value.

我们的likeCount终于被保存了！ 每次我们调用like ， likeCount都会从其先前值开始增加。

So what in the world happened here? Well, we figured out how to call the addLike function from outside the scope in which it was declared. We did that by returning the inner function from the outer one and storing a reference to it, named like, to call it.

那么，这里发生了什么？ 好了，我们弄清楚了如何从声明范围之外的地方调用addLike函数。 我们通过从外部函数返回内部函数并存储对该函数的引用(名为like )来进行调用来做到这一点。

封闭的工作方式，逐行 (How a closure works, line-by-line 📝)

So that was our implementation, of course, but how did we preserve the value of likeCount between function calls?

所以这就是我们的实现，但是如何在函数调用之间保留likeCount的值呢？

function handleLikePost() {
  let likeCount = 0;
  return function addLike() {
    likeCount += 1;
    return likeCount;
  };
}

const like = handleLikePost();

console.log(like()); // 1

1. The handleLikePost outer function is executed, creating an instance of the inner function addLike; that function closes over the variable likeCount, which is one scope above.

   执行handleLikePost外部函数，创建内部函数addLike的实例； 该函数将关闭变量likeCount ，这是上面的作用域之一。

2. We called the addLike function from outside the scope in which it was declared. We did that by returning the inner function from the outer one and storing a reference to it, named like, to call it.

   我们从声明它的范围之外的地方调用了addLike函数。 我们通过从外部函数返回内部函数并存储对该函数的引用(名为like )来进行调用来做到这一点。

3. When the like function finishes running, normally we would expect all of its variables to be garbage collected (removed from memory, which is an automatic process that the JS compiler does). We'd expect each likeCount to go away when the function is done, but they don't.

   当like函数完成运行时，通常我们希望它的所有变量都被垃圾回收(从内存中删除，这是JS编译器执行的自动过程)。 我们希望当函数完成时，每个likeCount都会消失，但likeCount并非如此。

What is that reason? Closure.

那是什么原因 关闭 。

Since the inner function instances are still alive (assigned to like), the closure is still preserving the countLike variables.

由于内部函数实例仍然处于活动状态(分配给like )，因此闭包仍保留countLike变量。

You would think that having a function written in another function, would just be like a function written in the global scope. But it's not.

您会认为，用另一个函数编写的函数就像在全局范围内编写的函数一样。 但事实并非如此。

This is why closure makes functions so powerful, because it is a special property that isn't present in anything else in the language.

这就是闭包使函数如此强大的原因，因为闭包是一种特殊的属性，在语言中没有其他属性。

变量的生命周期 (The lifetime of a variable)

To better appreciate closures, we have to understand how JavaScript treats variables that are created. You might have wondered what happens to variables when you close your page or go to another page within an app. How long do variables live?

为了更好地理解闭包，我们必须了解JavaScript如何对待创建的变量。 您可能想知道在关闭页面或转到应用程序中的另一页面时变量会发生什么。 变量存活多长时间？

Global variables live until the program is discarded, for example when you close the window. They are around for the life of the program.

全局变量一直存在，直到程序被丢弃为止(例如，当您关闭窗口时)。 它们在程序的整个生命周期中都存在。

However, local variables have short lives. They are created when the function is invoked, and deleted when the function is finished.

但是，局部变量寿命短。 它们在调用函数时创建，并在函数完成时删除。

So before, where likeCount was just a local variable, when the function was run. The likeCount variable was created at the beginning of the function and then destroyed once it finished executing.

因此在运行该函数之前， likeCount只是一个局部变量。 likeCount变量是在函数的开头创建的，一旦执行完毕便销毁。

闭包不是快照-它们使局部变量保持活动状态 (Closures are not snapshots - they keep local variables alive)

It's sometimes stated that JavaScript closures are similar to snapshots, a picture of our program at certain point in time. This is a misconception that we can dispel by adding another feature to our like button functionality.

有时会说JavaScript关闭类似于快照，这是我们程序在特定时间点的图片。 这是一种误解，认为我们可以通过在喜欢的按钮功能中添加其他功能来消除。

Let's say that on some rare occasions, we want to allow users to 'double like' a post and increment the likeCount by 2 at a time instead of 1.

假设在极少数情况下，我们希望允许用户对帖子“加倍likeCount ，并将likeCount一次增加2，而不是1。

How would would we add this feature?

我们将如何添加此功能？

Another way to pass values to a function is of course through arguments, which operate just like local variables.

将值传递给函数的另一种方法当然是通过参数，参数的作用就像局部变量一样。

Let's pass in an argument called step to the function, which will allow us to provide a dynamic, changeable value to increment our count by instead of the hard-coded value 1.

让我们向函数传递一个名为step的参数，这将允许我们提供一个动态的，可变的值来增加计数，而不是硬编码的值1。

function handleLikePost(step) {
  let likeCount = 0;
  return function addLike() {
    likeCount += step;
    // likeCount += 1;
    return likeCount;
  };
}

Next, let's try making a special function that will allow us to double like our posts, doubleLike. We'll pass in 2 as our step value to make it and then try calling both of our functions, like and doubleLike:

接下来，让我们尝试制作一个特殊功能，该功能使我们可以像帖子一样加倍，比如doubleLike。 我们将传入2作为我们的step值，然后尝试调用我们的两个函数， like和doubleLike ：

function handleLikePost(step) {
  let likeCount = 0;
  return function addLike() {
    likeCount += step;
    return likeCount;
  };
}

const like = handleLikePost(1);
const doubleLike = handleLikePost(2);

like(); // 1
like(); // 2

doubleLike(); // 2 (the count is still being preserved!)
doubleLike(); // 4

We see the likeCount is also being preserved for doubleLike.

我们看到likeCount也被保留为doubleLike 。

What's happening here?

这里发生了什么事？

Each instance of the inner addLike function closes over both the likeCount and step variables from its outer handleLikePost function's scope. step remains the same over time, but the count is updated on each invocation of that inner function. Since closure is over the variables and not just snapshots of the values, these updates are preserved between function calls.

内部addLike函数的每个实例都从其外部handleLikePost函数的作用域关闭likeCount和step变量。 step随着时间的推移保持不变，但是在每次调用该内部函数时都会更新计数。 由于闭包不仅遍历变量，而且还覆盖值的快照，因此这些更新将在函数调用之间保留。

So what does this code show to us—the fact that we can pass in dynamic values to change the result of our function? That they are still alive! Closures keep local variables alive from functions that should have destroyed them a long time ago.

那么，这段代码向我们展示了什么—我们可以传入动态值来更改函数结果的事实？ 他们还活着！ 闭包使本应保留很长时间的函数中的局部变量保持活动状态。

In other words, they are not static and unchanging, like a snapshot of the closed-over variables value at one point in time—closures preserve the variables and provide an active link to them. As a result, we can use closures can observe or make updates to these variables over time.

换句话说，它们不是静态不变的，就像某个时间点上已关闭变量的值的快照一样，闭包保留变量并提供与其的活动链接。 结果，我们可以使用闭包来观察或随时间更新这些变量。

到底是什么闭合？ (What is a closure, exactly?)

Now that you see how a closure is useful, there are two criteria for something to be a closure, both of which you've seen here:

既然您已经了解了闭包的有用性，那么对于要成为闭包的东西有两个标准，您在这里都看到了两个标准：

1. Closures are a property of JavaScript functions, and only functions. No other data type has them.
   闭包是JavaScript函数的属性，并且仅是函数。 没有其他数据类型具有它们。
2. To observe a closure, you must execute a function in a different scope than where that function was originally defined.
   要观察关闭，您必须在与最初定义该函数不同的范围内执行一个函数。

为什么要知道闭包？ (Why should you know closures? )

Let's answer the original question we set out to answer. Based off of what we've seen, pause and take a stab at answering this question. Why should we care about closures as JS developers?

让我们回答我们要回答的原始问题。 基于我们所看到的，暂停并尝试回答这个问题。 我们为什么要关心作为JS开发人员的闭包？

Closures matter for you and your code because they allow you to 'remember' values, which is a very powerful and unique feature in the language which only functions possess.

闭包对您和您的代码很重要，因为闭包允许您“记住”值，这是仅函数拥有的语言中非常强大且独特的功能。

We saw it right here in this example. After all, what use is a like count variable that doesn't remember likes? You'll encounter this often in your JS career. You need to hold onto some value somehow and likely keep it separate from other values. What do you use? A function. Why? To keep track of data over time with a closure.

在此示例中，我们在这里看到了它。 毕竟，不记得点赞的点赞计数变量有什么用？ 您在JS生涯中经常会遇到这种情况。 您需要以某种方式保持某种价值，并可能将其与其他价值分开。 你用什么？ 一个功能。 为什么？ 通过关闭来跟踪一段时间内的数据。

And with that, you're already a step ahead other developers.

这样一来，您已经领先于其他开发人员。

想要成为JS大师吗？ 加入2020年JS训练营🏕️ (Want To Become a JS Master? Join the 2020 JS Bootcamp 🏕️)

Follow + Say Hi! 👋 Twitter • Instagram • codeartistry.io

关注+说声嗨！ 👋 Twitter的 • Instagram • codeartistry.io

翻译自: https://www.freecodecamp.org/news/javascript-closures/

javascript闭包