Javascript autostart scope

Question

Take the code below, iterate over 6 enter buttons and attach the onclick event to each button that notifies the index number of the corresponding iteration:

 for (var i = 1; i < 6; ++i) { var but = document.getElementById('b_' + i); (function (el) { var num = i; but.onclick = function () { alert(num); }; })(but); } 

As you can see, at each iteration there is a self-start function that creates a region for storing the iteration index in that region.

I always used this type of template to attach an event that depends on a variable that changes during iterations.

---

Can someone explain to me exactly why this works, and how the variable num is fixed in scope?

In addition, a self-running function called closure ?

Answer 1

Yes, this is closing.

Each time a function is executed , a new object is created to store (as its properties) the variables declared with var and each function declared inside it. This object is called the execution context (or sometimes the scope object).

Each time a function is declared ( or defined in an expression), a new function binds to it an execution context object that is current. This creates a so-called chain of scope.

When executing the code, you must enable the identifier for the value that it first looks for in the properties of the current execution context. If the identifier is not found, it uses an output context object attached to the function being executed. It continues to climb the chain of visibility until it reaches a global level.

In your example, every time the “self-run function” is executed, a new execution context object is created that creates the el and num properties. Since the function assigned to onclick is created inside this execution context, each time you get a new instance of this function. These instances will have a corresponding execution context object. Therefore, the first will have an execution context when num was assigned 1, the second will have an execution context where num was assigned 2, etc.

When each of the onclick functions runs the code, it will first look for the identifier num in the current execution context. However, this internal function is not var num, so it is not found. Therefore, Javascript considers the execution context attached to the function when it was created. Here he will find num , num will contain the value assigned to him during this iteration, as described above.

Answer 2

Hey guys. Yes, this is closing. If you want to know what exactly happens when you create a function, check out the following article. http://www.jibbering.com/faq/faq_notes/closures.html

Answer 3

Does this mean that var i , defined outside closure , is a global variable, thereby providing it with a self-running function?

Answer 4

Each time in the loop, the evaluation of function (el) {...} creates a new anonymous function that is immediately called. As part of the anonymous function, a variable called num (since JS does not execute static variables, each time it is new). num assigned the value i when the function is called (which immediately). This gives us 6 anonymous functions and 6 num s, each of which has values ​​from 1 to 6.

Each time an anonymous function is called, an internal anonymous function is created and saved as a click handler. The internal function refers to num . As a result, a closure is created to ensure that when an external function exits, num not destroyed. If an internal function is ever discarded, num will follow soon.

Answer 5

 for (var i = 1; i < 6; ++i) { var but = document.getElementById('b_' + i); (function (el) { var num = i; but.onclick = function () { alert(num); }; })(but); } 

Now let's start the loop
originally i = 1 but = domelement with id = 'b1'
now comes the invoke function,
ok, it calls an internal function (with the el parameter) with the parameter value, but ('b1') and starts to execute it, which means that the call actually means to execute it now.
Now inside
new num instance assigned 1
but.onclick is assigned a function, so the memory function also sees that it accesses num, so num now closes the variable, which means that its lifetime is increased so that the onclick function accesses it when called.

Next iteration
now i = 2, but = domelement with id = 'b2' invoke function now comes,
it calls an internal function (with the el parameter) with the parameter value, but (value = 'b2').
Now inside
new num instance is assigned 2
but.onclick is assigned a function, so the memory function also sees that it accesses num, so num now closes the variable, which means that its lifetime is increased so that the onclick function accesses it when called.
Similary everyone else is excreted until the cycle is complete.