Detailed explanation of javascript scope

Scope understanding: the scope in which defined variables and functions take effect. JavaScript has two types: global scope and function scope.

Note: es6 implements let block-level scope, which is not native to js. The bottom layer is also implemented through var. If you want to know the specific details, please visit babel official to analyze let in es6.

Execution context

Scope: within a paragraph or within a function;
Global: function declaration, variable declaration. Scope:;
Function: function declaration, variable declaration, this, arguments. Scope: inside a function;

Function and variable declaration promotion

<script>
        foo(); //打印a
        var foo = 1;
        function foo (){
            console.log(’a‘)
        }；
        console.log(foo); //1
</script>


//实际的执行顺序为
<script>
        function foo(){  //函数声明优先于变量的声明
            console.log("a");
        }
        //var a ;  重复声明，这儿被省略了。
        foo(); //打印a
        foo = 1;  //给foo赋值为1
        console.log(foo); //1
</script>

When the js engine executes an execution context code block, the execution order is:
1. Function declaration function a() {}; (function takes precedence) Note: let a = function (){}; This is the declaration and assignment of variables, not the declaration of a function.
2. Variable declaration var a; Note: At the beginning, only the variable is declared and no value is assigned. If this variable is used before assignment, the value is: undefined.
3. When the execution context is the function scope: determine this and arguments.
4. Execute the code in the scope sequentially according to the js single-thread and asynchronous strategy.

We are used to thinking of var a = 2; as a statement, but in fact the JavaScript engine does not think so. It treats var a and a = 2 as two separate declarations, the first is a compile-time task, and the second is an execution-time task. This means that no matter where a declaration appears in the scope, it will be processed first before the code itself is executed. You can think of this process vividly as all declarations (variables and functions) being "moved" to the top of their respective scopes. This process is called hoisting. Be careful to avoid repeated declarations, especially when ordinary var declarations and function declarations are mixed together, otherwise many dangerous problems will occur!

Scope chain

Free variables: variables that are not defined in the current scope, but are defined in the upper scope and can be used in this scope.
Scope chain: When using a variable, first search it in its own scope. If it is not found, then search it in the parent scope until it finds the global scope. If it is not found, an error will be reported.

Block-level scope

js has no block-level scope, only global scope and function scope.
ES6 implements the block-level scope let of js through a special implementation of the global scope;
let's effective scope is { };
const is a defined constant. Note: The memory address where the value of a defined constant is stored cannot be changed. If the value is variable, for example, when the constant is defined as an array or object, the original data can be manipulated through the array or object method. As long as the value is not reassigned, there will be no problem.

The above is the detailed content of Detailed explanation of javascript scope. For more information, please follow other related articles on the PHP Chinese website!