And had met with closure

I love you, not only because of the way you look, but also because with you, I look. "Love" - ​​Roy Clift

1 Introduction

Read some of his blog, I found that all the articles are East West Cou Cou Cou Cou, finally organized into an article, but also its reputation, saying this is what I write, closer scrutiny, extremely rubbish! (Purely self-deprecating proper perspective). Cut the crap, get down to business, let me join in an article that summarizes the study, to satisfy my own vanity

2, the concept of closure

The introduction of the concept have watched others: the closure is defined in function inside a function, it is, in essence, is a bridge closures internal functions and external functions connected. Also remember these words, and finally found just remember not understand. Recently encountered the concept of closure, again deepened the understanding of the closures, the concept is as follows:

 闭包： 函数 A 返回了一个函数 B，并且函数 B 中使用了函数 A 的变量，函数 B 就被称为闭包。

 function A() {
     let a = 1;
     function B() {
         console.log(a);
     }
     return B;
 }
 let returnB = A(); // 此时调用只是返回函数B；
 returnB(); // => 1
 // 直接调用
 A()(); // => 1

Do you wonder why the function call stack A has a pop, why can refer to the function B A function of variables. A function because this time the variables are stored on the heap. JS engine can now escape analysis identify which variables need to be stored on the heap, which need to be stored on the stack.

3, the classic face questions

Use loop closures var defined functions to solve the problem

for ( var i=1; i<=6; i++) {
    setTimeout( function timer() {
        console.log( i ); 
    }, 1000 );
}

We must first understand the problem of asynchronous and synchronous, asynchronous synchronization always precedes execution, setTimeout is asynchronous function, only when the synchronization loop will execute all finished, this time i was 6; it will output 6. (Ps: Today for synchronous and asynchronous said a lot of nonsense, too willing MO)

Solution two, the first use of closure

for (var i = 1; i <= 5; i++) {
  (function(j) {
    setTimeout(function timer() {
      console.log(j);
    }, 1000);
  })(i);
}

At this time, each time i will be performed from the execution of the function is a real argument to the setTimeout, this time will be performing this function for the next cycle

The second is to use setTimeout third parameter

for ( var i=1; i<=5; i++) {
    setTimeout( function timer(j) {
        console.log( j );
    }, 1000, i);
}

setTimeout third parameter as an additional parameter in front of the callback function, setTimeout from the third bit, are all parameters as a function of the foregoing parameters

  setTimeout((a,b,c) => {
      console.log(a+b+c) // 6
  },1000, 1,2,3)

The third is to use the let i is defined

for ( let i=1; i<=5; i++) {
    setTimeout( function timer() {
        console.log( i );
    }, 1000 );
}

Because for let, he creates a block-level scope, the equivalent of

{ // 形成块级作用域
  let i = 0
  {
    let ii = i
    setTimeout( function timer() {
        console.log( ii );
    }, 1000 );
  }
  i++
  {
    let ii = i
  }
  i++
  {
    let ii = i
  }
  ...
}

4, Questions

Thinking: 6 seconds to print a

for ( var i=1; i<=6; i++) {
    setTimeout( function timer() {
        console.log( i ); 
    }, i * 1000 );
}