An analytical _javascript technique for a JS front-end closure-cladding test

Problem

Code A

function Fun (n,o) {
  console.log (o);
  return {
    fun:function (m) {//[2] return
      fun (m,n);//[1]}}

var a=fun (0);
A.fun (1);
A.fun (2);
A.fun (3);
var b=fun (0). Fun (1). Fun (2). Fun (3);
var c=fun (0). Fun (1);
C.fun (2);
C.fun (3);

To find out the program output

This is a closed-pack test question.

Convert to equivalent code

Return returns the object's Fun property corresponds to a newly created function object that will form a closure scope to enable it to access the outer function's variable n and the outer function fun, in order not to confuse the fun function with the fun property, we modify the above code as follows:
Code B

function _fun_ (n,o) {
  console.log (o);
  return {
    fun:function (m) {return
      _fun_ (m,n);
    }

}} var a=_fun_ (0);//undefined
A.fun (1);//0
A.fun (2);//0
A.fun (3);//0

var b=_fun_ (0). Fun (1). Fun (2 ). Fun (3);
undefined,0,1,2

var c=fun (0). Fun (1);//undefined,0,
c.fun (2);//1
C.fun (3);//1

Then some students asked, why can this change, how could you be sure [1] at the fun is not [2] code where the fun it, to know that the fun attribute here but point to a function object Oh ~
Here to talk about the lexical scope of JS, JS variable scope exists in the function body is the function body, and the scope of the variables in the function definition declaration is determined, not when the function is run.
The following code

var name= "global";
function foo () {
  console.log (name);
}

function FooOuter1 () {
  var name= "local";
  Foo ();
}
FooOuter1 ()//output global instead of local and has no relationship to the closure

function FooOuter2 () {
  var name= "local";
  function foo () {
    console.log (name);
  }
  Foo ();
}
FooOuter2 ()//output local instead of global, where the function declaration is the name variable scope is in its outer function, hmm, it's a closure.

Okay, let's go back to the title, in the function declaration definition phase, the anonymous function at [2] defines the declaration and finds that at [1] you need to refer to a function object named fun, and then look for it in the current function and find it, and then go to its outer function-this anonymous function's wrapping function-to find it, To the outer function, found that there is no function wrapped outside, then go to the global environment to find, the amount I finally found ... The fun function is designated as the Fun function object in the global environment and added to the closure of the anonymous function. So we know why code B is equivalent to code a ~ ~ ~

Create closure Scopes

JS in the lexical analysis after the end, determined 1 closures, is the return of the object fun properties of the anonymous function of the closure-access Global environment _FUNC_ and its outer function of the function internal variable n;
Each time the _FUNC_ executes, the scope information of the variables in the closure is passed to the function execution environment, which is used when the function is executed to get the value of the variable.

Perform output

var a=_fun_ (0);//undefined
A.fun (1);//0
A.fun (2);//0
A.fun (3);//0

The _fun_ function executes because the 2nd parameter is undefined and the output undefined. It then returns an object with the fun attribute, pointing to a function object-with a closure that can access the _fun_ and variable N_
A.fun (1) Executes the fun method of the returned object, passing in the value of M 1, calling back to _fun_ (1,0)
So the output is 0,a.fun (2), A.fun (3) and A.fun (1)

var b=_fun_ (0). Fun (1). Fun (2). Fun (3);
Equivalent code:

var b=_fun_ (0);
var b1=b.fun (1);
var b2=b1.fun (2);//[3]
var b3=b2.fun (3);//[4]
the first 2 sentences and the above output are the same undefined,0, when [3] is called, the B1 object has a closure, references the _fun_ function and the outer function variable n=1, so the function call of the anonymous function is _fun_ (2,1), and the output result is 1. and returns a new object.
When [4] executes, the B2 object also has a closure that references the _fun_ function and the outer function variable n=2, executes _fun_ (3,2), and outputs the result to 2

var c=fun (0). Fun (1);//undefined,0,
c.fun (2);//1 C.fun
(3);//1

Can understand the previous code execution explanation, understanding the above code execution output will not have the question, hoped everybody likes.