Shulou(Shulou.com)06/01 Report--

This article mainly explains "what is the implementation principle of JavaScript block scope". The content of the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "what is the implementation principle of JavaScript block scope".

Scope and execution context

Many people think that scope and execution context are the same concept, which is completely wrong!

Scope

The scope is determined when the function is declared, and the scope is a set of rules for finding variables by name, that is, determining the access permissions of the currently executing code to the variables. There are three types of scopes supported by JavaScript: global scope, function scope, and block scope.

Execution context

Execution context is the preparation work for execution by the js engine from interpretation to running intermediate precompilation, which creates the execution environment of the current region, which is the execution context.

Execution stack

The call stack is used to hold various execution contexts in js code and is a mechanism for the js engine to track function execution.

Take the following code as an example:

Console.log (1); function pFn () {console.log (2); (function cFn () {console.log (3);} ()); console.log (4);} pFn (); console.log (5); / / output: 1 2 3 4 5

First, there is the execution context in the global environment. After calling pFn, the execution context of the function environment pFn is pressed into the stack. Because the cFn function is executed in pFn, it continues to be pressed into the execution context of the cFn function, and after the execution is finished, the stack is released in turn.

The global context is destroyed only before the application exits, such as closing the web page or exiting the browser.

How javascript supports block-level scope

We know that in js due to the non-standard initial design, using the var keyword to define variables will lead to a series of problems such as variable promotion, but in order to maintain compatibility, we also have to retain support for the way var declares variables, so: how does JavaScript support both variable promotion and block scope?

Let's take the following code as an example:

Function foo () {var a = 1; let b = 2; {let b = 3; var c = 4; let d = 5; console.log (a); console.log (b);} console.log (b); console.log (c); console.log (d);}

First of all, the variables declared by var inside the function are stored in the variable environment, and the variables declared by let are stored in the lexical environment in the pre-compilation stage. Of course, the variables declared by let in the scope of the function body block are not stored in the lexical environment.

Continue to execute the code. When executed into the code block, the value of an in the variable environment has been set to 1, and the value of b in the lexical environment has been set to 2. Note that the variables b and d declared with let are not underfined but uninitialized are not initialized at this time

Finally, when the block scope of the function body is finished, its internal variables will pop up from the top of the lexical environment.

Thank you for your reading, the above is the content of "what is the implementation principle of JavaScript block scope". After the study of this article, I believe you have a deeper understanding of what the implementation principle of JavaScript block scope is, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.