JavaScript shutdown. Using ECMA Spec, please explain how closure is created and maintained.

Question

I am reading about closing JavaScript . I am familiar with runtime contexts , how the Lexical environment is supported and very familiar with Lexical Scoping .

I want to know how JavaScript closures are created and maintained . Sometimes it’s hard for me to understand such important concepts without knowing how this actually happens. I know that according to Wikipedia, closing

is a function or a link to a function together with a reference environment - a table that stores a link to each of the non-local variables (also called free variables) of this function.

But my question is: I want to know how, according to the ECMA Specification , closure is created and maintained. I'm not looking for a high-level explanation of closing theory; refer to the ECMA specification in your answer.

Note. Please do not consider this a duplicate unless the answer explains the closure using the ECMA specification. Again, I am not interested in someone quoting Wikipedia and giving an example, I want to fully understand how JavaScript does this. (I am familiar with this question on SO ).

Answer 1

According to Wikipedia's definition, as mentioned in the question, closure is

- - , ( ) .

, , , , , , /?

.

8.6.2 ECMA 262 v 5 ECMAScript. 9, [[Scope]]. ,

, , Function. ECMAScript Function [[Scope]].

, [[Scope]] . 13.2, . ( : ECMAScript, ).

, [[Scope]] VariableEnvironment, LexicalEnvironment , , , .

, , . , , , 13.2. :

  // The global execution context has already been initialized at this stage.
  // Declaration binding instantiation has occurred and the function 
  // foo is created as a new native object with a [[Scope]] property 
  // having the value of the global execution context VariableEnvironment
  function foo() {
    // When foo is invoked, a new execution context will be created for 
    // this function scope.  When declaration binding instantiation occurs, 
    // bar will be created as a new native object with a [[Scope]] property
    // having the value of the foo execution context VariableEnvironment
    function bar() {
      }
    bar(); // Call bar
  }
  foo();

, - , / . , .

• , NewDeclarativeEnvironment. [[Scope]] , " ". (, [[Scope]] . , Lexical Environment - , , , .)
• LexicalEnvironment VariableEnvironment 1.
• .

, [[Scope]], , .

<script>
// foo.[[Scope]] was set to the global environment during the global execution context initialization
  function foo() {
    var x = 1;
    // bar.[[Scope]] was set to foo lexical environment during foo execution context initialization
    function bar() {
      var y = 2;
      alert(x + y);
    }
    return bar;
  }

   var dummy = foo(); // Assign variable binding "dummy" to a reference of the "bar" function.
   dummy(); // Calls the "bar" function code.  The reference still has it [[Scope]] property set, thus the identifier look-ups work as expected when resolving the identifiers.
   alert(dummy.name); // Alerts "bar";

</script>

, , parent LexicalEnvironment [[Scope]] . , , " " [[Scope]].

: , , .