Shulou(Shulou.com)06/02 Report--

This article mainly explains why there are closures in JS. Friends who are interested might as well take a look. The method introduced in this paper is simple, fast and practical. Now let the editor take you to learn why there are closures in JS.

It's too long to read the version.

When a function accesses a variable defined outside of it, you need a closure.

For example, this code contains a closure:

Let users = ['Alice',' Dan', 'Jessica']; let query =' A'; let user = users.filter (user = > user.startsWith (query))

Notice that user = > user.startsWith (query) is itself a function. It uses the query variable. However, the query variable is defined "outside" of the function. That's closure.

You can stop reading here if you want. The rest of this article deals with closures in different ways, not explaining what closures are, but rather taking you through the process of "discovering" closures-just as the first programmers did in the 1960s.

Step 1: the function can access external variables

To understand closures, we need to know something about variables and functions. In this example, we declare the food variable in the eat function.

Function eat () {let food = 'cheese'; console.log (food +' is good');} eat (); / / = > 'cheese is good'

But what if we want to change the food variable of the eat function later? To do this, we can move the food variable itself from the function to the top level:

Let food = 'cheese'; / / Let's move it to external function eat () {console.log (food +' is good');}

This allows us to modify the food "externally" whenever necessary:

Eat (); / / = > 'cheese is good' food =' pizza'; eat (); / / > 'pizza is good' food =' sushi'; eat (); / / = > 'sushi is good'

In other words, the food variable is no longer a local variable of the eat function, but the eat function can still easily access it. Functions can access variables other than them. Stop and think for a second to make sure you don't have any questions about the idea. Then proceed to step two.

Step 2: wrap the code in a function call

Suppose we have some code:

/ * some code snippets * /

It doesn't matter what the code does. But suppose, "We're going to run it twice."

One way is to copy and paste:

/ * some code snippets * / * some code snippets * /

Another way is to use loops:

For (let I = 0; I

< 2; i++) { /* 一些代码片段 */ } 第三种方法，也是我们今天特别感兴趣的一种方法，将其包装在一个函数中： function doTheThing() { /* 一些代码片段 */ } doTheThing(); doTheThing(); 函数为我们提供了很大的灵活性，因为我们可以随时在程序中的任何位置把这个函数执行任意次。 如果愿意，「我们也可以只调用一次」： function doTheThing() { /* 一些代码片段 */ } doTheThing(); 请注意，上面的代码与原始代码段是等效的： /* 一些代码片段 */ 换句话说，「如果我们有一段代码，将代码"包装"到一个函数中，然后只调用一次，那么我们就不会改变代码的作用」。我们会忽略此规则的一些例外，但总的来说这应该是有道理的。停留在这个想法上，直到你的大脑完全理解为止。 第3步：发现闭包 前面我们通过两种不同的想法进行了探索： 函数可以访问在其外部定义的变量。 在函数中包装代码并调用一次不会改变结果。 那么如果把它们结合在一起会发生些什么呢。 我们将从第一步的代码开始： let food = 'cheese'; function eat() { console.log(food + ' is good'); } eat(); 然后，将整个例子中的代码包装到一个函数中，该函数将被调用一次： function liveADay() { let food = 'cheese'; function eat() { console.log(food + ' is good'); } eat(); } liveADay(); 再次审视两个代码片段，并确保它们是等效的。 这段代码有效!但是仔细看，注意 eat 函数在 liveADay 函数的内部。这允许吗?我们真的可以将一个函数放在另一个函数中吗? 在某些语言中，用这种方式写出来的代码是「无效」的。例如这种代码在 C 语言(没有闭包)中无效。这意味着在 C 语言中，前面的第二个结论是不正确的——我们不能随随便便就把一些代码包装在函数中。但是 JavaScript 不受这种限制。 再看这段代码，并注意在哪里声明和使用了 food： function liveADay() { let food = 'cheese'; // 声明 `food` function eat() { console.log(food + ' is good'); // 使用 `food` } eat(); } liveADay(); 让我们一起逐步看一下这段代码。首先在顶层声明 liveADay 函数，然后立即调用它。它有一个 food 局部变量，还包含一个 eat 函数。然后调用 eat 功能。因为 eat在 liveADay 内部，所以它"看到"了所有变量。这就是为什么它可以读取 food 变量的原因。 「这就是闭包」。 「我们说当函数(例如 eat)读取或写入在其外部(例如在 food 中)声明的变量(例如 food)时，存在闭包。」 花一些时间多读几遍，并确保你已经理解了上面的代码代码。 下面是本文最开始介绍过的例子： let users = ['Alice', 'Dan', 'Jessica']; let query = 'A'; let user = users.filter(user =>

User.startsWith (query))

If you rewrite it with a function expression, it is easier to notice the closure:

Let users = ['Alice',' Dan', 'Jessica'] / / 1. Query variables are externally declared as let query = 'A'; let user = users.filter (function (user) {/ / 2. We are in a nested function / / 3. Then we read the query variable (declared externally! ) return user.startsWith (query);})

Whenever a function accesses a variable declared outside it, we say it is a closure. The term itself is somewhat lax in use. In this example, some people refer to the "nested function itself" as a "closure". Others may refer to the "technique" of accessing external variables as closures. Actually, it doesn't matter.

The Phantom of function calls

Closure may seem simple, but that doesn't mean they don't have their own traps. If you really think about it, the fact that functions can read and write variables externally will have a profound impact. This means that as long as nested functions can be called, these variables will "survive":

Function liveADay () {let food = 'cheese'; function eat () {console.log (food +' is good');} / / Call eat after five seconds setTimeout (eat, 5000);} liveADay ()

Here, food is a local variable within the call to the liveADay () function. After we quit liveADay, it's easy to think that it's "gone" and that it won't come back to bother us.

However, within liveADay, we tell the browser to call eat within five seconds. Eat then reads the food variable. "therefore, the JavaScript engine needs to keep the food variable in a specific liveADay () call available until eat is called. "

In this sense, we can think of closures as "illusions" or "memory" of function calls in the past. Even though our liveADay () function call has been completed for a long time, its variables must continue to exist as long as the nested eat function can still be called. Fortunately, JavaScript does this for us, so we don't have to think about it anymore.

Why is there a closure?

Finally, you may wonder why closures are called in this way. Mainly for historical reasons. Someone familiar with computer science terminology might say that expressions like user = > user.startsWith (query) have "open bindings." In other words, it is clear what user is (a parameter), but it is not certain that query is isolated. When we say, "actually, query refers to variables declared externally," we are "closing" open binding. In other words, we get a closure.

Not all languages implement closures. For example, in some languages like C, nested functions are not allowed at all. As a result, a function can only access its own local or global variables, and will never access the local variables of the parent function. Of course, this restriction is painful.

There are also languages like Rust, which implement closures but have separate syntax for closures and regular functions. Therefore, if you want to read a variable from outside the function, you must choose to use it in Rust. This is because at the bottom, even after a function call, closures may require the engine to maintain external variables (called "environments"). This overhead is acceptable in JavaScript, but for very low-level languages, it can cause performance problems.

At this point, I believe you have a deeper understanding of "why there are closures in JS". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.