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

This article focuses on "understanding the scope of javascript". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "understanding the scope in javascript".

In javascript, there are generally three kinds of scopes, with block scopes. The three scopes are: (1) the global scope, which is the scope of the global variables declared outside all functions; (2) the local scope, which is the scope of the local variables declared in the function; and (3) the block-level scope. is the area between the beginning of the block-level variable declaration statement and the end of the block.

The operating environment of this tutorial: windows7 system, javascript1.8.5 version, Dell G3 computer.

The scope of a variable refers to the valid scope of a variable that can be read and written in the script code, that is, the area in the script code where the variable can be used. Before ECMAScript6, the scope of variables was mainly divided into global scope and local scope (also known as function scope).

After ECMAScript6, the scope of variables can be divided into global scope, local scope and block scope.

The variables in the corresponding scope are called global variables, local variables and block-level variables.

Global variables are declared outside all functions

A local variable is a variable declared in the body of a function or a named parameter of a function

Block-level variables are variables declared in a block and are valid only in a block.

The scope of a variable is closely related to the way it is declared. Variables declared with var have global and functional scopes and no block-level scope; variables declared with let and const have global scope, local scope, and block-level scope.

Note: strictly global variables belong to the properties of the window object, but the variables declared by let and const do not belong to the window object, so they are not strictly global variables, only from the point of view of their scope.

Because var supports variable promotion, the global scope of var variables is valid for script code throughout the page, while let and const do not support variable promotion, so the global scope of let and const variables refers to the entire area from the beginning of the declaration statement to the end of the script code of the entire page, while the area before the declaration statement is not valid.

Similarly, because var supports variable promotion, while let and const do not, local variables declared with var are valid throughout the function, while local variables declared with let and const are valid from the beginning of the declaration statement to the end of the function.

It should be noted that if the local variable and the global variable have the same name, then in the function scope, the local variable will cover the global variable, that is, it is the local variable that plays a role in the function body; outside the function, the global variable works, the local variable is invalid, and a syntax error will occur when referencing the local variable.

For block-level variables, their scope is the area between the beginning of the block-level variable declaration statement and the end of the block. The area between the beginning of the block and the block-level variable declaration statement is a "temporary dead zone", where the block-level variable is not valid.

In addition, in non-strict operation mode, variables do not need to be declared, and these undeclared variables belong to global variables no matter where they are used. It is generally not recommended that variables be used directly without declaration, as this may result in errors that are not easy to find.

Example 1: an example of the scope of a variable.

Variable scope example var v1 = "JavaScript"; / / global variable let v2 = "JScript"; / / global variable let v3 = "Script"; / / global variable scopeTest (); / / call function function scopeTest () {var lv = "aaa"; / / local variable var v1 = "bbb"; / / local variable let v2 = "ccc" / / Local variable if (true) {let lv = "123"; / / Block-level variable console.log (" lv output within the block = "+ lv); / / 123} console.log (" lv output from the function body = "+ lv); / / aaa console.log (" output from the function body v1 = "+ v1) / / bbb console.log ("function body output v2 =" + v2); / / ccc console.log ("function body output v3 =" + v3); / / Script / / v4 is a global variable, assigned later, so the value is undefined console.log ("function body output v4 =" + v4);} var v4 = "VBScript" / / global variable console.log ("function external output lv =" + lv); / / ① reports ReferenceError error console.log ("function external output v1 =" + v1); / / JavaScript console.log ("function external output v2 =" + v2); / / JScript console.log ("function external output v3 =" + v3) / / Script console.log ("function output v3 =" + v4); / / VBScript

The above script code declares four global variables, three local variables, and one block-level variable. Outside the scopeTest function, variables v1, v2, v3 and v4 are global variables; in the scopeTest function body, lv and v2 are global variables; in the if judgment block, lv is a block-level variable.

We can see that the local variables v1 and v2 have the same name as the global variables v1 and v2. In the body of the scopeTest function, the local variables v1 and v2 are valid, so the output results of these two variables in the body of the function are "bbb" and "ccc" respectively; outside the function, the global variables v1 and v2 are valid, so outside the function, the output results of these two variables are "JavaScript" and "JScript" respectively.

In addition, the block-level variable lv and the local variable lv have the same name. In the if judgment block, the block-level variable lv is valid, so the output result in the block is "123", while outside the block, the local variable lv is valid, and the output result of the lv variable is "aaa".

In addition, the global variables v3 and v4 are not covered in the function body, so the output of v3 is the value of the global variable, so the output of v3 inside and outside the function is "Script", while the v4 variable assignment is after the function call, so the v4 output in the function body is "undefined", while the output outside the function is after the declaration, so the result is "VBScript". Lv is a local variable, so accessing the function outside the body will report a "ReferenceError" error.

After the above code is run in a Chrome browser, open the browser's console and you can see the output shown in figure 1.

Figure 1: console output results before code comments at ①

The figure 1 shows that the lv in line 26 (that is, the code commented at example 1 ①) has no defined reference error because the lv variable is a local variable and has no effect after leaving the function. Comment this line of code before running it, and open the browser console to see the results shown in figure 2.

Figure 2: console output results after code comments at ①

As can be seen from figure 2, block-level variables cover local variables within the block, local variables cover global variables in the function body, and global variables that are not covered are valid both inside and outside the function. Think about it: why the output of v4 variable in the function body is "undefined" without reporting an error?

At this point, I believe you have a deeper understanding of "understanding the scope in javascript". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.