Detailed introduction to scope chain in javascript (with examples)

This article brings you a detailed introduction to the scope chain in JavaScript (with examples). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Overview

Executable code in JavaScript has its execution context. In the execution context, there are three important elements:

1. Variable object

2. Scope chain

3. this

Among them, the variable object is a collection of variable declarations and function declarations in the context.
This indicates who holds the variable object. This always points to the current context.

The scope chain controls the visibility and life cycle of variables and functions.

1. Scope chain

When the JavaScript engine looks for the binding corresponding to the variable identifier, it will bubble out from the innermost scope. Start searching, if not found in the inner scope, search in the parent scope, and stop when the first matching identifier is found. This is the scope chain in JS.

var name = "global";
function func1() {
    var name = "outter";
    function func2() {
        var name = "inner";
        console.log(name);
    }
    func2();
}

func1() // "inner"

console.log(name)In the statement, when JS is looking for the binding of the name variable identifier, it will go from inside func2 to the external function Look for variable declarations, all the way to the top level. In the end, only the nearest "inner" value is taken, and the search stops when the first one is found. This is called the "shadowing effect".

2. Creation and Execution Phase

Each function has an internal attribute [[scope]], and the scope chain is related to the execution context. The function When defined, the scope chain links all variable objects in the parent context.

var a = 1;
var b = 3;
function foo(){
  var a = 2;
  bar(4);
  function bar(param){
    console.log(a+param)
  }
}


foo.[[scope]] = [
  globalContext.VO // a, b
];

bar.[[scope]] = [
    fooContext.AO, // a
    globalContext.VO // a, b
];

Come again:

The execution of a function has a creation phase and an execution phase. The value of the variable object is different at different times.

Function creation phase

Generally, the scope chain is the parent variable object (variable object) (the top of the scope chain), the function's own variable VO or the active object ( activation object) forms a list.

var a = 2;
function foo() {
    var b = 3;
    console.log(a+b);
}
foo() // 5

Of course we know that the final result output is 5, but there is an interesting thing during the creation phase:
First of all, a variable belongs to the variable in the global environment, b belongs to the variable in the foo function environment, in During the creation phase, both values ​​are undefined;

globalContext.VO = {
    a: undefined
}

fooContext.VO = {
    b: undefined
}

You can see that the foo context does not contain a, and foo is the a found through the scope. That is:

fooContext = {
    [[scope]]: {
        // 父级的变量对象
    }
}

The [[scope]] of the current execution context contains a list of variable objects in all parent contexts.

Function execution phase

When entering the function execution phase, the function context will convert the variable object in the current execution context into an active object and place it in the scope The front end of the chain, the last modified variable value.

scope = [AO].contat([[scope]])

So when you finally look for variables, you always start from the innermost execution context, and then bubble up and search outwards.

3. Extend the scope chain

In JS, the with and try catch keywords can extend the scope chain. For with, it will specify a scope chain. The read object is added to the scope chain.

For catch, the exception object is pushed into a mutable object and placed at the head of the scope.

With and try catch both increase the number of variable objects that can be accessed by the current scope, so they are regarded as extending the scope chain.

4. Scope chain and prototype chain

The function of the scope chain is to find the identifier, bubble up and search along the scope chain, and find Stop at the first one.

The prototype chain is used to search for the properties of an object. The general prototype chain wants to search at the top of the chain. If the property is found, the search will stop. If not found, it defaults to undefined.

5. Closure

After the variable is executed, it will be garbage collected in the memory, but if at this time, the variable is in other scopes, or It is said that after joining the scope chain of other contexts, variables can continue to be accessed. This behavior is called closure.

function foo() {
    var a = 1;
    function bar (){
        return a;
    }
    return bar;
}

var other = foo();
other();  // 1

After the foo function is executed, the internal variables should have been cleared, but because the returned function refers to the variable a, the variable a can continue to be accessed, which constitutes a closure.

Summary

The scope chain is a list of variable objects of all parent contexts, used to find identifiers, performing context lookups internally, up to the global context.

The above is the detailed content of Detailed introduction to scope chain in javascript (with examples). For more information, please follow other related articles on the PHP Chinese website!