The original intention of this series of articles is to “let each front-end engineer master the high frequency knowledge, for the work of power”. This is the front end of the 12th cut, I hope friends pay attention to the public number “kite”, armed with knowledge of their minds.

12.1 scope

12.1.1 definition

Scope is the area in the program where variables are defined, and the location determines the lifetime of the variables. In short, scope is the accessible scope of variables and functions, that is, scope controls the visibility and life cycle of variables and functions.

12.1.2 classification

Prior to the ES6 phase, scopes were divided into two types: global and functional scopes; After ES6, scopes are divided into global scopes, function scopes, and block-level scopes.

  1. Global scope

Objects in this scope can be accessed anywhere in the code, and their life cycle follows the life of the page. For example, the following are all in global scope.

(1) Properties on window (in browser)

console.log(window.location.href); // Page address
Copy the code

(2) the outermost function

function testFun() {
    console.log('testFun');
}

testFun();
Copy the code

(3) Variables defined in the outermost layer

let val1 = 10;
const val2 = 20;
var val3 = 30;
Copy the code

(4) Variables not directly assigned by definition

val4 = 40;
Copy the code

(5) js specified global object properties, three values (Infinity, NaN, undefined), nine functions (parseInt, parseFloat, decodeURI, encodeURI……) , some constructors (Date, Array, etc.), and four objects used as namespaces (Atomics, JSON, Math, Reflect).

Math.sin(Math.PI / 2);;
const date = new Date(a);Copy the code
  1. Function scope

A variable or function defined inside a function that can only be accessed inside the function. At the end of a function execution, variables defined inside the function are destroyed.

function test() {
    var val1 = 10;
    function fun1() {
        console.log('fun1');
    }
    console.log(val1); / / 10
    fun1(); // fun1
}
test();
// console.log(val1); // val1 is not defined
// fun1(); // fun1 is not defined
Copy the code
  1. Block-level scope

In the ES6 phase, the concept of blocks was introduced, with the addition of block-level scopes and the addition of let and const commands. Block-level scopes are simply a piece of code wrapped in braces {}. Block-level scopes are generated by individual braces, if blocks, while blocks, for blocks, try/catch/finallyd blocks, and so on. (The characteristics of let and const in the block-level scope can be seen in the front end [002])

// Block contained in a single parenthesis
{}

/ / if statements
if (flag) {

}

/ / for statement
for (let i = 0; i < 10; i++) {

}

/ /...
Copy the code

12.2 Scope Chain

12.2.1 definition

In the variable environment of each execution context, there is an external reference (called outer) to the external pointing context. When looking for a variable, if it is not found in the current variable environment, the JS engine continues the search in the execution context pointed to by Outer, calling the search chain the scope chain. (A scope chain can be thought of as a list of objects containing the parent and its own variable objects, so we can access variables or functions declared in the parent through the scope chain.)

12.2.2 composition

The scope chain consists of two parts, the [[scope]] property and the AO.

  1. The [[scope]] property refers to the parent variable object and scope chain, that is, the [[scope]] and AO containing the parent
  2. AO: self active object, that is, variable object in the execution context.

Extension: so that [[scope]] contains [[scope]], forming a chain of scopes from top to bottom.

12.2.3 Finding Rules

  1. Find variables from the current execution scope;
  2. If the variable is not found in the current scope, it looks up one level;
  3. Continue up one level to the outermost global scope.

12.2.4 of actual combat

To further understand the scope chain, a simple example is used to demonstrate the scope chain.

var val1 = 10;
function fun1() {
    var val2 = 20;
    function fun2() {
        var val3 = 30;
        console.log(val1 + val2 + val3);
    }
    fun2();
}

fun1();
Copy the code

Combined with the code and the above flow chart of the execution context, when executing to console.log(val1 + val2 + val3); Val3 will be found in fun2 function scope, val2 will be found in fun1 function scope, val1 will be found in global scope, and finally all three variables associated with the statement will be retrieved. Fun2 function scope, fun1 function scope and global scope constitute a scope chain.

1. If you think this article is good, share and like it so that more people can see it

2. Pay attention to the public number of kite, and the number of the Lord together to kill the front hundred.