Depth js-- scope chain

Scope

Scope is a collection of accessible objects, determine the current access code execution variables.
Scope can be divided into static scope and dynamic scope, JavaScript static scoping, also called lexical scoping.

Static scope

Scope of a function when the function definition will determine how the function is called, is called independent of where they are.

var a = 1;
    function foo() {
        console.log(a); // 1
    }
    function bar () {
        var a = 2;
        foo()
    }
    bar()

The above code, foo function to print out 1. Although foo is executed in the bar function, but its scope is defined when it is determined. First Look Inside there a foo, not to find a from the outer layer, then print out the final 1.

[[scope]]

Before the scope chain, to talk about [[scope]]. Just print a function with console.dir

function bar () {
    var a = 1;
    function foo () {
        console.log(a)

    }
    console.dir(foo)
}
console.dir(bar)
bar()

We can see there is a [[scope]] property. As can be seen from this example:

• [[Scope]] is a hierarchical chain of all parent variable objects

• [[Scope]] are stored at function creation - static (unchanging), forever and ever, until function destruction. That is: The function can never call, but [[scope]] property has been written and stored in the function object.

  Q: Is there important to note the above example, if the variable is not used in the bar foo function, i.e. if not console.log(a), then the foo [[scope]] that does not have a bar.
  A: It is also well understood, js found at compile time foo bar will not refer to the variables, it is not a bar to join the scope of foo parent hierarchy, because no need; but foo accessible level also includes the bar, using the bar as long as the variable, the bar will be added foo [[scope]] in. This is to some extent, but also just further illustrates the [[scope]] is a function definition (js compile time) to determine the better.

One of said binding: js static scoping, when the scope of a function definition is determined; [[scope]] is determined when the function was defined, the function is not a property of the context, and how call unrelated.

The scope chain

definition

Scope chain is created when entering the context, is defined as: the current context + [[scope]], i.e.,

Scope = AO|VO + [[Scope]]

That is, the current execution context variable object placed in the front end of the scope array; When looking variable, first find the current AO | VO whether there is, then ([[scope]]) level when the lookup function is defined along until the last Global.

practice

Article depth js-- variable objects mentioned in the scope of the use of the console to view a variable object, which we can under real good look at the scope.

function bar () {
    var a = 1;
    function foo () {
        debugger
        var b = 2;
        console.log(a)
    }
    foo()
}
bar()

You can see, the top scope is Local, which is currently the object variable execution context, the following is a function of [[scope]] property in the preservation of the parent hierarchy chain. The Call Stack click function can also switch the current execution context, the following changes were observed in the scope.

Overall process

Speak variable object and scope, we finally sort out what happens when the overall function under execution, the whole process is like.

var a = 1;
function bar () {
    var a = 2;
    console.log(a)
}
bar()

• bar function is created, while saving the parent level scope to its properties [[scope]] in

bar.[[scope]] = [
    globalContext.VO
]

• Into the bar function, create a bar execution context, the execution context is push bar to the top of the stack execution context

Stack = [
    barContext,
    globalContext
]

• Assignment bar function [[scope]] property and create scope chain

barContext = {
    Scope: bar.[[scope]],
}

• Active object is initialized with the arguments and added parameter, function declarations, variable declarations

barContext = {
    AO: {
        arguments: {
            length: 0
        },
        a: undefined
    }，
    Scope: bar.[[scope]],
}

• The pressure of the top of the active object AO scope chain

barContext = {
    AO: {
        arguments: {
            length: 0
        },
        a: undefined
    }，
    Scope: bar.AO.concat(bar.[[scope]]),
}

• Perform the function bar