js in-depth understanding of closures (code attached)

This article mainly introduces the closure of js. Closure is a relatively difficult point to understand in js. Now it is compiled and shared with everyone. If you need it, you can learn more.

Closure is a relatively difficult point to understand in js, especially for people without programming foundation.

In fact, there are only a few things to pay attention to about closures. If you understand them all, it is not difficult to conquer them. Let's talk about some basic principles of closures.

The concept of closure

A closure is a combination of a function and the scope object in the created function. (Scope objects will be discussed below)

The more popular one is "As long as one or more functions are nested in a function, then we can call them a closure."

Similar to this:

function A() {
 var i = 5;
 return function() {
  console.log('i = '+i);
 }
}

var a = A();
a(); // i = 5

The principle of closure

#1. If the local variable of the external function will Called by a closure function will not be recycled immediately after the external function completes execution.

We know that no matter what language, the operating system will have a garbage collection mechanism to recycle excess allocated space to reduce memory. The life cycle of a function begins when it is called. When the function call is completed, the local variables inside the function will be recycled by the recycling mechanism.

Let’s take the above example as an example. When our external function A is called, the local variable i in A will be recycled by the operating system and will not exist. However, when we use a closure, the result will be That's not the case anymore, i will not be recycled. Just imagine, if i is recycled, wouldn't the returned function print undefined?

Why is it not recycled?

When JavaScript executes a function, a scope object is created and the local variables in the function (the formal parameters of the function are also local variables) are saved in it, along with the variables passed into the function. is initialized.

So when A is called, a scope object is created, let's call it Aa, then this Aa should be like this: Aa { i: 5; }; After the A function returns a function , A is executed. The Aa object should have been recycled, but because the returned function uses the attribute i of Aa, the returned function saves a reference to Aa, so Aa will not be recycled.

So by understanding the scope object, you can understand why the local variables of the function will not be recycled immediately when the function call is completed when encountering a closure.

Another example:

function A(age) {
 var name = 'wind';
 var sayHello = function() {
  console.log('hello, '+name+', you are '+age+' years old!');
 };
 return sayHello;
}
var wind = A(20);
wind(); // hello, wind, you are 20 years old!

Can you tell what its scope object Ww is?

Ww{ age: 20; name: 'wind'; };

2. Each time an external function is called, a new closure is generated. The previous closures still exist and are independent of each other. Influence.

3. The same closure will retain the last state, and when it is called again, it will be based on the last time.

The scope object generated each time the external function is called is different. You can think of it this way. In the above example, the parameter age you pass in is different each time, so the object generated is different each time.

Every time an external function is called, a new scope object will be generated.

function A() {
 var num = 42;
 return function() { console.log(num++); }
}
var a = A();
a(); // 42
a(); // 43

var b = A(); // 重新调用A()，形成新闭包
b(); // 42

This code allows us to discover two things. First, when we call a(); twice in a row, num will be incremented on the original basis. It means that the same closure will retain the last state, and when it is called again, it will be based on the last time. 2. The result of our b(); is 42, indicating that it is a new closure and is not affected by other closures.

We can think of it this way, just like we blow a soap bubble. Every time I blow it (call an external function), a new soap bubble (closure) will be generated. Multiple soap bubbles can exist at the same time. And the two soap bubbles will not affect each other.

4. Multiple functions existing in external functions "live and die together"

The following three functions are declared at the same time and can all perform operations on the properties (local variables) of the scope object. Access and operations.

var fun1, fun2, fun3;
function A() {
 var num = 42;
 fun1 = function() { console.log(num); }
 fun2 = function() { num++; }
 fun3 = function() { num--; } 
}

A();
fun1();  // 42
fun2(); 
fun2(); 
fun1();  // 44
fun3(); 
fun1();  //43

var old = fun1;

A(); 
fun1();  // 42
old();  // 43  上一个闭包的fun1()

Since functions cannot have multiple return values, I used global variables. Again we can see that a new closure is created the second time we call A().

When a closure encounters a loop variable

When we talk about closure, we have to talk about the situation when the closure encounters a loop variable. See the following code :

function buildArr(arr) {
  var result = [];
  for (var i = 0; i < arr.length; i++) {
    var item = &#39;item&#39; + i;
    result.push( function() {console.log(item + &#39; &#39; + arr[i])} );
  }
  return result;
}

var fnlist = buildArr([1,2,3]);
fnlist[0](); // item2 undefined
fnlist[1](); // item2 undefined
fnlist[2](); // item2 undefined

How could this happen? The three outputs we envision should be item0 1, item1 2, item2 3. Why is there three item2 undefined stored in the returned result array?

原来当闭包遇到循环变量时都是循环结束之后统一保存变量值，拿我们上面的例子来说，i是循环变量，当循环全部结束的时候i正好是i++之后的3，而arr[3]是没有值的，所以为undefined，有人会疑惑：为什么item的值是item2，难道不应该是item3吗？注意，在最后一次循环的时候也就是i = 2的时候，item的值为item2，当i++，i = 3循环条件不满足循环结束，此时的item的值已经定下来了，所以此时的arr[i]为arr[3]，而item为item2。这样能理解吗？如果我们将代码改成这样那就说得通了：

function buildArr(arr) {
  var result = [];
  for (var i = 0; i < arr.length; i++) { 
    result.push( function() {console.log(&#39;item&#39; + i + &#39; &#39; + arr[i])} );
  }
  return result;
}

var fnlist = buildArr([1,2,3]);
fnlist[1](); // item3 undefined

那么问题来了，如何改正呢？且看代码：

function buildArr(arr) {
  var result = [];
  for (var i = 0; i < arr.length; i++) {
    result.push( (function(n) {
      return function() {
       var item = &#39;item&#39; + n;
       console.log(item + &#39; &#39; + arr[n]);
      }
    })(i));
  }
  return result;
}

var fnlist = buildArr([1,2,3]);
fnlist[0](); // item0 1
fnlist[1](); // item1 2
fnlist[2](); // item2 3

我们可以用一个自执行函数将i绑定，这样i的每一个状态都会被存储，答案就和我们预期的一样了。

所以以后在使用闭包的时候遇到循环变量我们要习惯性的想到用自执行函数来绑定它。

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

js 闭包常见的两种情况的解析

浅谈js 闭包引起的内存泄露问题_javascript技巧

让你分分钟学会 JS 闭包

The above is the detailed content of js in-depth understanding of closures (code attached). For more information, please follow other related articles on the PHP Chinese website!