javascript - Understanding closures? Seek clarification.

Question

function f1(){//2、找到 f1 函数，执行。
    var n=999;//3、给变量 n 赋值。
    nAdd=function(){n+=1}//9、找到 nAdd ，匿名函数内没有变量 n ，需要去上层查找，n = 999 +1。
    function f2(){//5、找到 f2 函数，执行。
        alert(n);//6、执行动作。
    }
    console.log(n);//新加上，测试，不参与执行步骤。
    return f2;//4、返回 f2 函数，需要寻找 f2 函数。
}
var result=f1();//1、将 f1函数的返回值赋值给 result 变量，result 也变成函数，需要寻找f1函数。
result(); //7、第一次执行 result 函数，将步骤 6 的执行动作（步骤 6）结果输出，n 等于 999。
nAdd();//8、执行 f1 函数里的全局变量函数 nAdd ，需要寻找 nAdd 函数。
result(); //10、第二次执行 result 函数，将步骤 5 的执行动作（步骤 6）结果输出，此时 n 等于 1000，因为第一次执行 result 函数时，查找了上层的作用域，n 是 999。
nAdd();//11、如果再执行 nAdd 函数，此时 nAdd 这个函数里的 n 是 1000，而 f1 函数的 n 还是 999，也就是说 f1 的变量 n 和 nAdd 的 n 是两个作用域不同的同名变量。
result(); 
f1();//新加上，测试

/*结果
控制台输出：999
弹窗：999
弹窗：1000
弹窗：1001
控制台输出：999
*/

I would like to ask the seniors to see if this understanding is correct.
Supplement: Can it be understood that when the closure is executed for the first time, it needs to search for variables in the upper layer. After finding it, the variable value of the upper layer becomes the variable value of the sub-function, and there is no need to go to the upper layer in the future. The search, because it has been inherited during the first execution, becomes its own.
It feels a bit messy. . .
(face covering

--------------------Added again--------------------
The more I read The more chaotic it becomes.
Then it was a complete mess.
Judging from the output results, the n of f1 is immutable in the first console output and the last console output.
But can’t sub-functions read variables from each other? Why does the expression of nAdd affect n of f2?

Answer 1

function f1(){
    var n=999;
    nAdd=function(){n+=1}
    function f2(){
        alert(n);
    }
    console.log(n);
    return f2;
}
var result=f1();
result(); 
nAdd();
result();
nAdd();
result(); 
var b = f1();//新加上，测试

At this time, b and n in result are not the same.
b and n in nAdd are the same.
n in result cannot be changed.

Answer 2

I have the same question, so I copied my answer and added some more.

1. var result=f1(): The f1 function returns the f2 function
   Assign the returned f2 function to the result global variable, (the scope chain of f2 is saved to the result global variable)

2. result(): Call result(), which forms a closure: has the right to access variables in another function scope
   Because the scope in f2 refers to the local variable n in f1, when f1 is executed Finally, the garbage collection mechanism finds that the n variable is still referenced in result, so the garbage collection mechanism will not release n.
   So that n is always saved in the result scope chain. The scope chain of result can normally access the local variable n in f1, forming a closure.

3. nAdd(): nAdd does not write var, so nAdd is a global variable. When calling nAdd() and result(), a closure will be formed. The anonymous function function(){n+=1} has the local n in the scope chain. variable, so when nAdd=funtion(){n+=1}, the scope chain of this anonymous function is saved to the global variable nAdd to form a closure, and nAdd() is called to find the f1 local variable n=999, n+ in the scope chain 1=1000.

4. result(): result() outputs 1000

5. nAdd(); Repeat the third step n+1 = 1001

6. result(); Repeat the fourth step and output n

7. f1(); No closure is formed when f1 is called, n is always 999, because n is destroyed by the garbage collection mechanism after each execution of f1, so var n=999 is called again here; the subsequent output is also It’s 999

Why does the expression of nAdd affect n of f2?
Because of the closure, n has never been destroyed. nAdd() also formed a closure and changed the value of n, so result() is called again later. n has not been destroyed and the recycling has been +1, so it will be Influence.
Finally, there is no closure when f1() is called, and n was destroyed before. So it always outputs a=999;

This is just my understanding, if there are any mistakes please let me know

Answer 3

I suggest you read this
http://www.ruanyifeng.com/blo...
It’s explained more clearly

Answer 4

It’s too complicated to say

This closure uses the static scope feature of js to achieve this effect

function f1(){
    var n=999;// 这里标识n 为代号 n1
    nAdd=function(){n+=1}+1。
    function f2(){
        alert(n);
    }
    console.log(n);
    return f2;
}
var result=f1();
result(); 
nAdd();
result(); 
nAdd();
result(); 
f1();

The first call to result():

alert(n); is looking for n1

nAdd(); also adds the value of n1

The same goes for the ones behind

And the last f1();

When running, var n = 999; assigns a value to n1.
The n of console.log(n) is also n1, so the printed value is 999

Your example is a bit simple. You can look at a complex example (focus on the description of static scope):
static scope