The scope and scope chain of JavaScript

Scope

Scope is the accessible scope of variables and functions, that is, scope controls the visibility and life cycle of variables and functions. It can be said that when variables and functions can be used, when they are destroyed, it is related to the scope.

In JavaScript, the scope of a variable has both global scope and local scope.

1 Scope (globalscope)

Objects that can be accessed anywhere in the code have global scope, typically with global scope in the following situations:

(1) the outermost function and the variables defined outside the outermost function have global scope

(2) all variables that are directly assigned to the last definition are automatically declared as having global scope

(3) All window Object properties have global scope

In General, the built-in properties of the Window object have global scope, such as window.name,window.location, window.top and so on.

2 Scope (localscope)

In contrast to the global scope, local scopes are generally accessible only within a fixed code fragment, the most common of which is inside the function, and in some places it is also seen that this scope is called a function scope.

In short, when the JS parser executes, it first constructs a global object in the execution environment, and the global attribute we define is read as the property of the object, and in the top-level code we can access it using the This keyword and the window object. The local variables in the function body only exist in the call object generated when the function executes, and the local variables are destroyed immediately when the function is completed. Therefore, in the program design we need to consider how to reasonably declare variables, so as to reduce unnecessary memory overhead, but also to a large extent to avoid duplicate definitions of variables to overwrite the previously defined variables caused by the debug trouble.

Example:

(function () {   var5;}) (); Console.log (b);

The above code will print 5.

The trick to this question is that there are two variable declarations, but a is declared with the keyword var. Represents a local variable of a function. In contrast, B becomes a global variable.

Scope chain

First introduce the advanced programming of JavaScript--p73

　　Execution Environment (execution context, for simplicity, sometimes referred to as "environment") is one of the most important concepts in JavaScript. The execution environment defines the other data that a variable or function has access to, and determines their respective behavior. Each execution environment has a variable object associated with it (variable object), and all variables and functions defined in the environment are stored in the object. Although the code we write does not have access to this object, the parser uses it in the background when it processes the data.

　　The global execution environment is one of the outermost execution environments. depending on the host environment in which the ECMASCRIPT implementation is implemented, the execution ring is represented, and the object is different. In a Web browser, the global execution environment is considered a Window object. All global variables and functions are therefore created as properties and methods of the Window object. after all code in an execution environment is executed, the environment is destroyed, and all variables and function definitions stored therein are destroyed (the global execution environment is not destroyed until the application exits-for example, when the Web page or browser is closed).

Each function has its own execution environment. When the execution flow enters a function, the environment of the function is pushed into an environment stack. After the function executes, the stack pops up its environment and returns control to the previous execution environment. The execution flow in the ECMAScript program is controlled by this convenient mechanism.

When code executes in an environment, a scope chain of variable objects is created (scope chain). The purpose of a scope chain is to ensure an orderly access to all variables and functions that the execution environment has access to. The front end of the scope chain, which is always the variable object for the environment in which the code is currently executing. If the environment is a function, its active object (Activation object) is used as the variable object. The active object initially contains only one variable, the arguments object (this object does not exist in the global environment). The next variable object in the scope chain comes from the containing (external) environment, and the next variable object comes from the next containment environment. In this way, it continues to the global execution environment; The variable object of the global execution environment is always the last object in the scope chain.

Identifier parsing is the process of searching identifiers one level at a scope chain. The search process always starts at the front end of the scope chain, and then goes backward backwards until the identifier is found (if an identifier is not found, this usually results in an error).

See this paragraph also basic know the execution environment, activity object, Variable object definition also has mechanism.

The following is a further understanding:

In JavaScript, functions are objects, and in fact, everything in JavaScript is an object. function objects, like other objects, have properties that can be accessed through code and a series of internal properties that are accessible only by the JavaScript engine. One of the internal properties is [[Scope]], defined by the ECMA-262 Standard third edition, which contains a collection of objects in the scope of the function being created, called the scope chain of the function, which determines which data can be accessed by the function. When a function is created, its scope chain is populated with data objects that can be accessed by creating the scope of this function. For example, define a function such as the following:

function Add (x, y) {var b= x+ y; return b;}

When the function add is created, it fills a global object in its scope chain, which contains all the global variables, as shown (note: The picture shows only a subset of all variables):

The scope of the function add will be used at execution time. For example, execute the following code:

var total = Add (5,ten);

When this function is executed, an internal object called the execution Environment (execution context)is created, and the execution environment defines the environment at which the function executes. each execution environment has its own scope chain, which is used for identifier parsing when the execution environment is created, and its scope chain is initialized to the current running function the object contained by [[Scope]] .

　　These values are copied into the scope chain of the execution environment according to the order in which they appear in the function. Together they form a new object called the " Activationobject", which contains all the local variables of the function, named arguments, a collection of parameters, and This is then pushed into the front of the scope chain, and the active object is destroyed when the runtime context is destroyed. The new scope chain is as follows:

During the execution of a function, no variable is encountered, and an identifier parsing process is passed to determine where to get and store the data. The process from the scope chain head, that is, starting from the active object search, find an identifier of the same name, if found to use this identifier corresponding to the variable, if not found to continue to search the scope chain of the next object, if the search all objects are not found, the identifier is considered undefined. Each identifier undergoes such a search process during the execution of the function.

Scope Chain and code optimization

As you can see from the structure of the scope chain, the deeper the identifier is in the scope chain of the execution environment, the slower the read and write speed. As shown, because global variables always exist at the end of the execution environment scope chain, finding global variables is the slowest when identifiers are resolved. Therefore, when writing code, you should use as few global variables as possible, using local variables as much as you can. A good rule of thumb is that if a cross-scope object is referenced more than once, it is stored in a local variable before it is used. For example, the following code:

function ChangeColor () {document.getElementById ("btnchange"). onclick=  function () {document.getElementById ("targetcanvas"). style.backgroundcolor="  Red";};}

This function refers to the two global variable document and finds that the variable must traverse the entire scope chain until it is finally found in the global object. This code can be rewritten as follows:

function ChangeColor () {var doc=Document;doc.getelementbyid ("btnchange  "). onclick=function () {Doc.getelementbyid ("targetcanvas"). style.backgroundcolor="red";};}

This code is simple and will not show a huge performance boost after rewriting, but if there are a large number of global variables in the program that are accessed from time to time, the rewritten code performance can be significantly improved.

In JavaScript, you can also extend the scope chain, but JavaScript does not have a block-level scope. Read more about the advanced programming of JavaScript--p76

Finally, look at another question:

Bole Online column Author-kuitos

//Compare the following two sections of code, and try to see the difference between two pieces of code//A--------------------------varScope ="Global Scope"; function Checkscope () {varScope ="Local Scope"; function f () {returnscope; }    returnf ();} Checkscope (); //B---------------------------varScope ="Global Scope"; function Checkscope () {varScope ="Local Scope"; function f () {returnscope; }    returnF;} Checkscope () ();

First, both A and B code outputs return "local scope".

This article also has an explanation of the concept, which is very clear and usable.

The first is a:

1. Enter the global environment context, the global environment is pressed into the environment stack, contextstack = [Globalcontext]

2. The global context is initialized, and the Checkscope function is created at this time checkscope. [[Scope]] = Globalcontext.scopechain

globalcontext=objectObject//  global scope chain }

3. Execute the Checkscope function, enter the Checkscope function context, Checkscope is pressed into the environment stack, Contextstack=[checkscopecontext, Globalcontext]. The Checkscope context is then initialized, which copies the scope of the [[Scope]] variable of the Checkscope function, which is checkscopecontext={scopechain: [checkscope.[ [Scope]] }

The 4.checkscope active object is created at this time checkscope.activationobject = [arguments], then the active object is used as the variable object for initialization, Checkscope.variableobject = Checkscope.activationobject = [arguments, scope, F], then the variable object is pressed into the front of the checkscope scope chain (Checckscope.scopechain = [ Checkscope.variableobject, Checkscope. [[Scope]]) = = [[arguments, scope, F], Globalcontext.scopechain]

5. function f is initialized, F.[[scope]] = Checkscope.scopechain.

The 6.checkscope execution stream continues down to return F () and enters the function f execution context. The function f execution context is pressed into the environment stack, contextstack = [Fcontext, Checkscopecontext, Globalcontext]. function f repeats the 4th step action. Last F.scopechain = [F.variableobject,checkscope.scopechain]

7. After the function f is executed, the context of F is ejected from the environment stack, at which point contextstack = [Checkscopecontext, Globalcontext]. At the same time, the interpreter finds the scope (local scope) in Checkscope.scopechain based on the F.scopechain lookup variable scope.

8.checkscope function is finished, its context pops from the environment stack, contextstack = [Globalcontext]

If you understand the implementation process of a, then the process of B is consistent in detail, the only difference being that B's environment stack varies,

A:contextstack = [globalcontext]-> Contextstack = [Checkscopecontext, globalcontext]-> contextStack = [FContext, Checkscopecontext, globalcontext]-> contextstack = [Checkscopecontext, globalcontext]-> contextStack = [ Globalcontext]

B:contextstack = [globalcontext]-> Contextstack = [Checkscopecontext, globalcontext]-> contextStack = [FContext, globalcontext]-> contextstack = [Globalcontext]

In other words, the difference between these two pieces of code is that they do not change the environment stack during execution, and the other two are the same.

In fact, the most fundamental point of understanding these two pieces of code is that JavaScript is a static-scoped language, and his scope is determined (without arguments) when the function is created.

Reference:

Http://www.jb51.net/article/29335.htm

JavaScript Advanced Programming

Http://www.cnblogs.com/dolphinX/p/3280876.html

Http://www.cnblogs.com/lhb25/archive/2011/09/06/javascript-scope-chain.html

Http://mp.weixin.qq.com/s/8OcJZADyB5w3EZwkxMdAmw

The scope and scope chain of JavaScript