1. What is scope?
The definition in ECMAScript is the scope of the variable. We know that variables in js are divided into two categories: local variables and global variables. The scope of global variables is global. Variables declared inside functions are called local variables. The scope is local and only meaningful in the function body.
2. Intervals that are independent of each other cannot access each other. All global variables can be accessed. The outer function cannot access the inner layer, and the inner layer can access the outer layer. The further inward the higher the authority.
3. Each js object has attributes, some can be accessed by us, some cannot, these attributes are only accessed by the js engine, the [[scope]] we are going to talk about is such an attribute, it refers to what we call A scope in which a collection of runtime contexts is stored.
4. When the function is executed, an internal object called the execution context is created. An execution context defines the environment in which a function executes. The context of each execution of the function is unique, because in the function This internal object will be destroyed after execution. The collection of execution-time context objects stored in [[scope]] is chained and we call it a scope chain.
function a(){
function b(){
var bb = 234;
aa=0;
}
var aa = 123;
b();
console.log(aa);
}
var glob = 100;
a();
To solve this problem we just need to draw its scope chain.
According to the above, when a function is defined, an execution context is created, and we store it in the scope
a.[[scope]] ->scope chain[0]->Global Object I will explain this Global Object in detail when writing the precompile. Now you only need to know that this is the global scope and two global variables can be stored in it function a and variable glob;
What is the next step, not the definition of b, but the execution of a, after the execution of a, the definition of b is not there. When the a function is executed, we can add another execution context and then a.[[scope]]->scope chain[0] ->Activation Object (this is the local scope of the a function) We can find that there are also two Variable function b and variable aa and scope chain[1] points to Global Object,
This is the scope chain of the a function, which contains two execution-time contexts. Next, it is the turn of the b function to be defined. According to the above rules, the inner function can access the outside, so the scope chain of the b function is inherently linked. With the scope chain of function a, it will happen when function b is executed, b.[[scope]]->scope chain[0] ->Activation Object (this is the local scope of function b) defines variable b in it And scope chain[1] is the local scope of the previous a function, and scope chain[2] is the global scope
When the b function is executed, it assigns a value of 0 to aa, but its scope chain[0] does not have this variable, so he accesses the scope chain[1] that has aa and the value is 123, modify it, scope chain The aa value in [1] is 0, so the output result is 0;
It is worth noting that we can find that the execution of the a function brings the definition of the b function, because in js, in order to save efficiency, when a function is not executed, the computer does not spend time to detect the content of the function body. There may be a knowledge blind spot in the explanation of scope. It is recommended to watch the js precompilation I wrote first, which will help to understand the scope and scope chain. By the way, we all know that there is no block level before es6 Scope, I will explain the block-level scope brought by let and const when I write es6.