Summary of basic JavaScript knowledge (9) Exquisite explanation of scope and scope chain

This time I will bring you a basic JavaScript knowledge summary. There are a total of eleven knowledge points. Basic JavaScript knowledge summary (9) Scope and scope chain. The following is a practical case. Let’s take a look.

scope definition

[[scope]]: Every JavaScript function is an object. There are some properties in the object that we can access, but some we cannot. These properties are only accessible to the JavaScript engine, and [[scope]] is one of them.

[[scope]] refers to what we call the scope, which stores the collection of runtime contexts

Scope chain: The execution context stored in [[scope]] A collection of objects. This collection is chain-linked. We call this chain link a scope chain.

Runtime context: When a function is executed, an internal called the execution context will be created. Object. An execution context defines the environment when a function is executed. The corresponding execution context is unique each time a function is executed, so calling a function multiple times will result in the creation of multiple execution contexts. When the function completes execution, it generates The execution context is destroyed

Find variables: Search from the top of the scope chain downwards

function a() {    function b(){        var b = 234;
    }    
    var a = 123;
    b();
}var glob = 100;
a();

First we look at the above function, this is an overall function, a is in this global In the scope, there is the variable glob below, and then there is the execution of a;

Step 1: First, what the system sees must be the definition of a. If a is defined, there is this [[scope]].

a
/
[[scope]]    
scope指向scope chain
scope chain
scope指向这里

0 The 0 at this position points to GO

Global Object

0 points to This table

this    window    
window    (object)    
document    (object)    
a    (function)    
glob    100    
[[scope]]里面有这个全局的执行期上下文,然后a被执行了,a被执行，a产生的这个AO，把自己的AO存到作用域链的最顶端，形成一个新的作用域链，现在的a的[[scope]]和刚才的那个[[scope]]不一样了
a
/
[[scope]]
scope指向scope chain
scope chain
scope指向这里

0 The 0 at this position points to AO

1 The 0 at this position points to GO

Activation Object

0 points to this table

this    window    
arguents    []    
a    123    
b    (function)    
Global Object

1 points to this table

this    window    
window    (object)    
document    (object)    
a    (function)    
glob    100

It is different only the values ​​stored in it are different [ [scope]] is still the [[scope]]. We will not look at the following at this time. If we access a variable at this time, we are accessing the [[scope]] of a, which is from the [[scope]] of a. To get something, the scope of a is a warehouse. There is a scope chain stored in this library, and various variables are hung in it. When I go to get something, I search from the top to the bottom.

Then the execution of a results in b being defined. A can be defined only after b is executed. When b is defined, there is a natural [[scope]], and there is one in [[scope]]. It should have a scope chain, but the scope chain it has is different from that of a. When a is defined, it is in the global, and the only attributes that can be accessed are its own AO and the global GO. But b is defined in a function, so b's [[scope]] can not only access its own AO, but also access a's AO, and the global GO

b
/
[[scope]]

scope points to the scope chain

scope chain

scope points here

##0 The 0 in this position points to your own AO

1 The 1 at this position points to the AO of a

2 The 0 at this position points to GO

Activation Object

0 points to this table

this    window    
arguents    []    
b    234;    
Activation  Object

1 points to this table

this    window    
arguents    []    
a    123    
b    (function)    
Global Object

1 points to this table

this    window    
window    (object)    
document    (object)    
a    (function)    
glob    100

Scope destruction

When After b is executed, destroy its own ao, return to the definition state, and wait for the next execution.

Because b is the last sentence of function a, when b is executed, a is also destroyed, and b is also destroyed. The [[scope]] is also destroyed, returns to the definition state, and waits for the next execution

//例子function a() {    function b() {        function c(){
            
        }
        c();
    }
    b();
}
a();
a defined a.[[scope]] --> 0:GOa doing   a.[[scope]] --> 0:a的AO
                          1:GO
                          b defined b.[[scope]] --> 0:a的AO
                          1:GOb doing   b.[[scope]] --> 0:自己的AO
                          1:a的AO 
                          2:GO
                          c defined c.[[scope]] --> 0:a的AO
                          1:c的AO 
                          2:GOc doing   c.[[scope]] --> 0:自己的AO
                          1:b的AO
                          2:a的AO
                          3:GO

So the external function cannot access the properties and values ​​of the

internal function

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

Summary of basic JavaScript knowledge (6) Functions, initial scope (Part 2)

Basics Summary of JavaScript knowledge (7) Recursion

##Summary of basic JavaScript knowledge (8) Pre-compilation execution process

The above is the detailed content of Summary of basic JavaScript knowledge (9) Exquisite explanation of scope and scope chain. For more information, please follow other related articles on the PHP Chinese website!