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

This article shows you how to thoroughly understand the various pits of the JS closure, the content is concise and easy to understand, it will definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

The old driver gives you a thorough understanding of all kinds of JS closures.

Closures are a common skill in js development. What is closures?

A closure refers to a function that can access variables within the scope of another function. To be clear: a closure is a function that can access variables in the scope of other functions. Eg:

Function outer () {var a = 'variable 1' var inner = function () {console.info (a)} return inner / / inner is a closure function because it can access the scope of the outer function}

Many people will not understand the relationship between anonymous functions and closures. In fact, closures are defined from a scope point of view. Because inner accesses variables in outer scope, inner is a closure function. Although the definition is simple, there are many potholes, such as this pointing and the scope of variables, and a little carelessness can cause memory leaks. Let's put the problem aside and think about a question: why can closure functions access the scope of other functions?

Looking at js function from the Angle of Stack

The values of basic variables are generally stored in stack memory, while the values of variables of object type are stored in heap memory, which stores the corresponding space address. Basic data types: Number, Boolean, Undefined, String, Null.

Var a = 1 / / an is a basic type var b = {m: 20} / b is an object

Corresponding memory storage:

When we execute b = {mbure30}, the heap memory has a new object {mbure30}, and the b of the stack memory points to the new space address (pointing to {mbure30}), and the original {mbure20} in the heap memory will be garbage collected by the program engine to save memory space. We know that js functions are also objects, and they are also stored in heap and stack memory, so let's take a look at the conversion:

Var a = 1 function fn1 function fn () {var b = 2; function fn1 () {console.log (b);} fn1 ();} fn ()

**

The stack is a first-in-and-out data structure:

1 before executing fn, we have a variable an in the global execution environment (the browser is the window scope).

2 when you enter fn, the stack memory will push a fn execution environment, in which there are variables b and function object fn1, where you can access the variables defined by your own execution environment and the global execution environment.

3 when you enter fn1, the stack memory will push a fn1 execution environment, where no other variables are defined, but we can access the variables in fn and the global execution environment, because when the program accesses the variables, it looks to the underlying stack one by one. If it finds that there are no corresponding variables in the global execution environment, the program throws a underfined error.

4 with the completion of the execution of fn1 (), the execution environment of fn1 is destroyed, and then after the execution of fn (), the execution environment of fn is also destroyed. only in the global execution environment, there are no b variables and fn1 function objects, only an and fn (function declaration scope is under window).

Access to a variable within a function is based on the function scope chain to determine whether the variable exists, and the function scope chain is initialized by the program according to the execution environment stack where the function is located, so in the above example, we print variable b in fn1 and find the corresponding variable b in the fn execution environment according to the scope chain of fn1. So when a program calls a function, it does the following: prepare the execution environment, the initial function scope chain, and the arguments parameter object

Let's go back to the original examples of outer and inner.

Function outer () {var a = 'variable 1' var inner = function () {console.info (a)} return inner / / inner is a closure function because it can access the scope of the outer function} var inner = outer () / / get the inner closure function inner () / / "variable 1"

When the program finishes executing var inner = outer (), the execution environment of outer is not destroyed, because the variable an in it is still referenced by the function scope chain of inner. When the program finishes executing inner (), the execution environment of inner and outer will be destroyed. The book "JavaScript Advanced programming" suggests that because closures carry the scope of the functions that contain them, because they take up more content than other functions, excessive use of closures can lead to too much memory.

Now we understand the closure, the corresponding scope and scope chain, and return to the topic:

Pit 1: the referenced variable may change

Function outer () {var result = []; for (var I = 0; I

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.