The complex knowledge simplification — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — westlife

Foreword —– do you know why chang ‘e is so fickle?? Because Chang er, ha ha ha ha!

Throughout JS, there are three big mountains: scope/closure, prototype, async, and single thread. Stumped generation after generation of front small white, small white playing the spirit of Yugong Yishan, scratching broken how much hair. How many neurons have been damaged…

Today I’m going to talk about closures as I understand them.

First of all, there are two conditions for closing the place of production.

1. Functions nested functions

2. Variables are declared in the outer function and called in the inner function.

Let me show you an example

function foo(){
    var a  = 10;
    return function() {return ++a
    }
}
var c = foo();
console.log(c());
console.log(c());Copy the code

This is a simple closure, and in the browser debugger you can see that it prints 11, 12;

(PS: Thank you for your correction. The error has been corrected.)

So what do closures do?

Role 1: Saves data that is about to be destroyed

Here’s a little chestnut:

Do you remember how to make a TAB TAB? Well, yes, should be a lot of people can do, is to find button subscript, to find the content area of the subscript, one-to-one correspondence, the for loop iterates through button, click on the button, the event, so the asynchronous, I value of the for loop can’t correspond to the click event, here we opportunistic, give each button to add the subscript, The content area corresponding to the subscript is displayed, however, there is a question, we need to add a variable index to the button group, if we don’t want the index, can we do it in another way, the answer is we can, we can do it with es6 block-level scope, of course we can do it with closures

Figure: The usual way to implement the TAB TAB

Use closures to do this

(function(){
    var wrap = document.querySelector('#wrap');
    var pic = document.querySelector('#wrap');
    var aBtn = wrap.getElementsByTagName('li'); Var aPic = pic.getElementsByTagName('div'); // Get all div groupsfor(var i = 0; i<aBtn.length; i++){ !function(n){
             aBtn[n].onclick = function(){
             aBtn[n].style.display = 'block'
            }
        }(i)
    }
}()Copy the code

Isn’t that amazing? I’m just using a variable I. The variable I for is looped to 9 (because the event is asynchronous); Hey hey hey…. Using closures, it’s a neat way to realize that I is worth reusing

Role 2: Confidentiality

Demo: write a section of JS code, to achieve the simulation of car driving license subject a test, finish a question, show the answer effect

Everybody thought is some, put all the answers in an array, the array length and the length of the subject, as an array to store the correct answer, when users click on the button next to show out at the moment the answer to the questions, but this data is not safe, but understand a little code in the console output the answer; How do you keep data confidential — closures

!function(){
var aBtn = document.getElementsByClassName('btn'); Var arr = ["A"."B"."C"."A". ] // Store the number of answersfor(var i = 0; i<aBtn.length; i++){ !function(n){
        aBtn[n].onclick = function(){
            console.log("The correct answer is :"+arr[n])
        }
    }()
}Copy the code

So there you have it. Using anonymous function/vertical execution function, data is not leaked, confidentiality is no problem,

To put it bluntly, closures are just a garbage collection mechanism, sort of like the recycle bin on our computers. When a variable declaration is about to be destroyed, closures can be used to collect data that is about to be destroyed.

Then asynchrony: asynchrony was mentioned above; Our JS code is single-threaded, running from top to bottom; But when asynchronous time comes up. Asynchronous executing code will allow synchronous executing code limited passage; Just like the traffic light, we wait for the red light to pass, asynchrony is like this, wait for the synchronous code to finish execution will pass, so, synchronization always takes precedence over asynchrony!

Conditions that trigger asynchrony

  1. ajax
  2. The event
  3. setTimeout() setInterval()

___ the above are my original, if there is any mistake, hope to correct.