Javascript scope chain

Javascript scope chain
All the javascript code in the Execution Context is executed in an Execution environment. It is only a mechanism for processing the runtime scope and lifetime. There are three types of Code: Global Code Eval Code Function Code. This is an EC structure and can be understood as follows:

ActiveExecutionContext = {VO :{...}, // or AO this: thisValue, Scope: [// Scope chain // list of all variable objects // for identifiers lookup]};

 

When a program starts, it first enters the global execution context environment. At this time, if some functions are called, they will enter their context and exit the context after execution. Assume that the context of EC1 is activated. The following illustration shows that the variable object (VO) and the activity object (AO) are a data scope related to the context, stores variables and function declarations defined in the context (excluding function expressions ). In the global context, the variable object is even the global object itself. Copy an example

Var foo = 10; function bar () {}/// function declaration (function baz () {}); // function expression console. log (this. foo = foo, // true window. bar = bar // true); console. log (baz); // reference error. baz is not defined

 

In the global context, the variable object (VO) has the following attributes: in the context of a function, the variable object is represented as the activity object of the activity object and initialized to AO = {arguments in the context: <ArgO >}; the arguments attribute value is the Arguments object, and the variable storing the current context and the function declaration scope chain are an object list, used to retrieve the identifier (variable name, function declaration, common parameter) that appears in the context ). When a function is created, the current scope chain is stored in the [[scope] attribute of the function. After creating the AO/VO In the context, the Scope attribute of the context (EC) is processed as follows: Scope = AO | VO + [[Scope, now let's take a piece of code to concatenate the process. Before that, we need to know another knowledge, that is, the execution context code is divided into two basic stages to process the code that enters the execution context.

var x = 10;function foo(m) {  var y = 20;  function bar() {    var z = 30;    alert(x +  y + z + m);  }  bar();}foo(10); // 60

 

The variable object that first enters the global context of the global context (x is assigned only when code is executed) is globalContext. VO = Global = {x: 10 foo: <reference to function >}; globalContext. scope = globalContext. VO; when "foo" is created,

Foo. [[Scope] = [globalContext. Scope]; // foo. [[Scope] = [globalContext. VO];

 

When "foo" is activated, the context of foo is entered. The activity object in the context of foo (y is assigned only when code is executed) is: fooContext. AO = {arguments: <Arg>, m: 10, y: 20, bar: <reference to function >}; the scope chain in the context of foo is: fooContext. scope = fooContext. AO + foo. [[Scope] // I. e.: fooContext. scope = [fooContext. AO, globalContext. VO]; when the function "bar" is created, its [[scope] is bar. [[Scope] = fooContext. scope; // bar. [[Scope] = [fooContext. AO, globalContext. VO]; similarly, bar won't be written. Finally, the scope chain of bar context is:

barContext.Scope = barContext.AO + bar.[[Scope]] barContext.Scope = [  barContext.AO,  fooContext.AO,  globalContext.VO];

 

When alert is executed, the search identifier in the scope chain looks for x and barContext as follows. AO Wu ----> fooContext. AO Wu ----> globalContext. VO searches for Z and barContext. AO has others to read. It takes time for local variables and global variables to search for identifiers in the scope chain, so we can understand why we need to use local variables as much as possible (Cache frequently used global variables ), use as few global variables as possible. In addition, with will break the scope chain. It will add the specified VO/AO to the top of the scope chain. In this way, you need to find a longer scope chain when looking for the identifier. Closures can easily understand the above concepts. Closure is the combination of a code block and Context data that creates the code block.