What are the two categories of JavaScript scopes?

JavaScript scope is divided into two categories: global scope and local scope. Variables are defined as global variables outside the function, and global variables have global scope, that is, all scripts and functions in the web page can be used; variables are declared as local scope inside the function, and the local scope is generally only in fixed code fragments (for example, function) can be accessed internally.

The operating environment of this tutorial: windows7 system, javascript version 1.8.5, Dell G3 computer.

The scope of a variable refers to the valid readable and writable range of the variable in the script code, that is, the area in the script code where the variable can be used.

The scope of variables is mainly divided into two types: global scope and local scope (also called function scope).

The variables in the corresponding scope are called global variables and local variables respectively. Global variables are declared outside all functions; local variables are variables declared within the function body or named parameters of the function.

Global Scope

Variables are defined as global variables outside the function. Global variables have global scope: all scripts and functions in the web page can use.

Objects that can be accessed anywhere in the code have global scope. Generally speaking, the following situations have global scope:

1. The outermost function and the outermost function Variables defined outside the layer function have a global scope

　2. All variables that are not defined and directly assigned a value are automatically declared to have a global scope

3. All properties of the window object have a global scope

Generally, the built-in properties of the window object have global scope, such as window.name, window.location, window.top, etc.

Local Scope

Variables are declared as local scope inside the function.

Contrary to the global scope, the local scope is generally only accessible inside a fixed code fragment (for example: function), the most common one is inside a function, so in some places you will also see people using this This kind of scope is called function scope.

In short, when the JS parser is executed, it will first build a global object in the execution environment. The global properties we define are read as properties of the object. In the top-level code, we use this It can be accessed by both keywords and window objects.

The local variables in the function body only exist in the calling object generated when the function is executed. The local variables are destroyed immediately when the function is executed.

Therefore, in programming, we need to consider how to declare variables reasonably, which not only reduces unnecessary memory overhead, but also largely avoids debugging caused by repeated definition of variables and overwriting previously defined variables. trouble.

Explanation:

The scope of a variable is closely related to the declaration method. Variables declared using var have global scope and function scope; variables declared using let and const have global scope and local scope.

Note: Global variables in the strict sense belong to the properties of the window object, but variables declared by let and const do not belong to the window object, so they are not global variables in the strict sense. Here they are global variables only from the perspective of their scope.

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

Similarly, because var supports variable promotion, but let and const do not support variable promotion, local variables declared using var are valid throughout the function, while local variables declared using let and const are valid from the beginning of the declaration statement to The area between the end of the function is valid. It should be noted that if the local variable and the global variable have the same name, in the function scope, the local variable will overwrite the global variable, that is, the local variable will work in the function body; outside the function body, the global variable will work, and the local variable will work. The variable is invalid, and a syntax error will occur when referencing local variables.

Example: Scope of variables

     var v1 = "JavaScript"; //全局变量
     let v2 = "JScript"; //全局变量
     let v3 = "Script"; //全局变量
     scopeTest();    //调用函数
     function scopeTest(){
         var lv = "aaa"; //局部变量
         var v1 = "bbb"; //局部变量
         let v2 = "ccc"; //局部变量

         console.log("函数体内输出的lv = " + lv); //aaa
         console.log("函数体内输出的v1 = " + v1); //bbb
         console.log("函数体内输出的v2 = " + v2); //ccc
         console.log("函数体内输出的v3 = " + v3); //Script
         //v4为全局变量，赋值在后面，因而值为undefined
         console.log("函数体内输出的v4 = " + v4);
     }
     var v4 = "VBScript"; //全局变量
     console.log("函数体外输出的lv = " + lv); //① 报ReferenceError错误
     console.log("函数体外输出的v1 = " + v1); //JavaScript
     console.log("函数体外输出的v2 = " + v2); //JScript
     console.log("函数体外输出的v3 = " + v3); //Script
     console.log("函数体外输出的v3 = " + v4); //VBScript

The above script code declares 4 global variables and 3 local variables respectively. Outside the scopeTest function, variables v1, v2, v3 and v4 are global variables; inside the scopeTest function body, lv and v2 are global variables.

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

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

After the above code is run in the Chrome browser, open the browser's console and you can see the output as shown below

Above picture The lv not defined reference error in the 18th line of code (that is, the code commented in example ①) is reported. This is because the lv variable is a local variable and is invalid after leaving the function. Comment this line of code and then run it. At this time, open the browser console and you can see the results shown in the figure below

##[Recommended learning:

javascript advanced tutorial】

The above is the detailed content of What are the two categories of JavaScript scopes?. For more information, please follow other related articles on the PHP Chinese website!