Analysis of a JS front-end closure interview question_javascript skills

Question

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);

Find the program output

This is a closure test question

Convert to equivalent code

The fun attribute of the object returned by return corresponds to a newly created function object. This function object will form a closure scope, allowing it to access the variable n of the outer function and the outer function fun. In order not to combine the fun function with The fun attribute is confused, 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 it be changed like this? How can you be sure that the fun at [1] is not the fun at [2] where the code is located? You must know that the fun attribute here points to a function object. ~
Here we talk about the lexical scope of JS. The JS variable scope exists in the function body, that is, the function body, and the scope of the variable is determined when the function definition is declared, not when the function is run.
The following code

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

function fooOuter1(){
  var name="local";
  foo();
}
fooOuter1();//输出global 而不是local，并且和闭包没有任何关系

function fooOuter2(){
  var name="local";
  function foo(){
    console.log(name);
  }
  foo();
}
fooOuter2();//输出local 而不是global，在函数声明是name变量作用域就在其外层函数中，嗯嗯就是闭包~<br />

Okay, let’s go back to the topic. In the function declaration definition stage, the anonymous function at [2] is defined and declared. It is found that a function object named fun needs to be referenced at [1]. Then first find it in the current function body. , if you find it is not there, then go to its outer function - the wrapping function of this anonymous function to find it, and you find that it is not there either. Go to the outer function and find that there is no function wrapper outside, then go to the global environment to find it, eh. Finally found it... Just specify the fun function as the fun function object in the global environment and add it to the closure of the anonymous function. At this point we know why code B is equivalent to code A~~~

Create closure scope

After the lexical analysis, JS determines a closure, which is the closure of the anonymous function corresponding to the fun attribute of the returned object - the function internal variable n that accesses _func_ in the global environment and its outer function;
Every time _func_ is executed, the scope information of the variables in the closure will be passed to the function execution environment for use when obtaining the variable value when the function is executed

Execution output

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

_fun_ function is executed, because the second parameter is undefined, the output is undefined. Then return an object with the fun attribute pointing to a function object - with a closure, able to access _fun_ and the variable n_
a.fun(1) executes the fun method of the returned object, passes in the value of m 1, and the call returns _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 two sentences are the same as the above output undefined,0. When [3] is called, there is a closure in the b1 object, which references the _fun_ function and the outer function variable n=1, so The function call performed by the anonymous function is _fun_(2,1), the output result is 1, and a new object is returned.
When [4] is executed, the b2 object also has a closure, which refers to the _fun_ function and the outer function variable n=2. When _fun_(3,2) is executed, the output result is 2

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

If you can understand the previous code execution explanation and understand the above code execution output, there will be no problem. I hope you like it.