In this post we will try to demonstrate the scope generation of closures step by step with illustrations.

Although the issue is important, it is generally misunderstood or misinterpreted.

I will try to be as clear and as simple as possible.
I'm open to any suggestions to enhance this post further.

---

Let us begin with a test case:

exhibit 1: source code of the test case.

Sorry, I cannot copy paste the source directly. 'cuz blogger reformats it.

Let us go line by line:

- We call test() method on window load (line 32).

- In lines 4, 5 and 7 we create three variances namely fnRef, j and i.



The scene looks like something like that. I've intentionally left too much whitespace on the image as we will need it later.

- Then at line 9 inside the for loop we create a closure at each iteration. That makes a total of three closures.



Note that fnRef stores a reference to the last closure created.

All those three closures close over the three variances that have been created a priori (i, j and fnRef).



The blue dashed line denotes the scope created by any of those closures.

- Each closure defines its variances as well:



Note that the local variance j (red one)
inside the closure overrides the global variance j (orange one).

- Then a brand new closure is spawned inside the closure at line 16:



which makes three more closures. Note that each local fnRef2 refers to one closure.

And here is the final picture:




The red line shows the scope generated for the innermost closures. As seen they can see both local variances inside the first closure (j and fnRef2) and the variances that closure sees (i, j and fnRef).

That's all for now.
Hope that was useful.

 bu yaziyi sevdin mi?  hemen una ekle!