JavaScript Learning Summary 2--scopes and closures

Closures are one of the hardest-to-understand points of knowledge in JavaScript.

Before understanding closures, it is important to understand that there are only 2 scopes in JavaScript, global scope and local scope (inside the function).

Global scopes are well understood, while local scopes represent a separate scope for functions (or methods) function formation

For example:

vara=0;//This is a variable in the global scopefunctionFnA () {varB=1;      Console.log (a); //local scope access to variable a under global scope  functionFnaa () {varc=2;        Console.log (a); //after nesting a layer of functions, the internal function Fnaa can still access the variable a under the global scope} console.log (c); //outside the FNAA scope, the external function cannot access the internal variable C (this will be an error)}fna (); Console.log (b); //Similarly, the variable B inside the FNA cannot be accessed under the global scope

Let's start by focusing on closures.

Assuming that there are 10 Li elements in the page, you need to bind a click event for each Li, which we would like to write

// Omit previous Code var oli=document.getelementsbytagname ("Li"); // using A For loop  for (var i=0;i<oli.length;i++) {  Oli[i].onclick=function() {      alert ( "I am the first" +i+ "li element");  }  }

At first glance it seems to be fine, but in fact this code runs and clicking on each of the LI elements will pop up I'm the 10th LI element

Why is it?

In the above code, Oli[i].onclick actually only calls the I after the For loop is run, and simply the value of I does not have an anonymous function call that is handled by the OnClick event every time the For loop is executed

When the Click event is triggered, the anonymous function looks for the variable i inside itself, and then continues to look up in the parent scope without finding it, and at this point the For loop executes, I has a value of 10, so each call gets only 10

When a function calls an external variable, it forms a closure, so all we have to do is build a closure that only we can access, and save the variables we use for ourselves.

Simple Rude Direct on code

var oli=document.getelementsbytagname (' li ');  for (var i=0;i<oli.length;i++) {   (function(i) {      Oli[i].onclick=  function() {         console.log ("I am the first" +i+ "element");      }   ) (i);};

JavaScript Learning Summary 2--scopes and closures