What are the differences between the two types of variable scopes in JavaScript?

Difference: In the global scope, variables are visible throughout the page script and can be freely accessed. In the local scope, variables can only be visible inside the declared function, and are not allowed to be accessed outside the function; after the function is executed, the local scope is destroyed.

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

Variable scope, which can be called "variable scope (Scope)", refers to the effective range that a variable can access in the program, also known as the visibility of the variable.

Scope

1. What is Scope

Generally speaking , the name used in a piece of program code is not always valid and available, and the code scope that limits the availability of this name is the scope of this name.

JS scope: It is the scope of the code name (variable)

The purpose of the scope: to improve the reliability of the program, and more importantly, to reduce naming conflicts

2. Classification of JS scope (before ES6)

JS scope can be divided into two categories: global scope and local scope (function Scope)

1) Global scope:

The JS code written directly in the script tag is the global scope;

Or in a separate JS file.

The global scope is created when the page is opened and destroyed when the page is closed;

There is a global object window in the global scope (representing a browser window, created by the browser ), can be used directly.

In the global scope,

• All created variables will be saved as properties of the window object.

• All created functions will be saved as methods of the window object.

2) Local scope (function scope):

Inside the function is the local scope, this The name of the code only works inside the function

The function scope is created when the function is called. After the function is executed, the function scope is destroyed;

A new one will be created each time the function is called. Function scopes are independent of each other.

Example analysis:

In this example, there is a num variable in the local scope in the un function, and there is also a num variable in the global scope of the script tag.

(One is in the global scope and the other is in the local scope. Although the variable names of the two variables conflict, it has no effect.)

So, in different functions Under the domain, variables with the same names are not affected, which effectively reduces naming conflicts.

<script>
    var num = 10;
    function nu(){
        var num = 20;
        console.log(num);
    }
    nu();
    console.log(num);
</script>

There is no block-level scope in JS at this stage (before ES6). The block-level scope is enclosed by curly brackets ({}).

2. Scope of variables

JavaScript variables can be divided into global variables and local variables:

• Global variables: variables are in the entire page script They are all visible and can be accessed freely; their scope is the global scope.

• Local variables: Variables can only be visible inside the declared function, and are not allowed to be accessed outside the function; their scope is the local scope.

Example 1

The following example demonstrates the relationship between global variables and local variables.

var a = 1;  //声明并初始化全局变量
function f(){  //声明函数
    document.write(a);  //显示undefined
    var a = 2;  //声明并初始化局部变量
    document.write(a);  //显示 2
}
f(); //调用函数

Since a local variable a with the same name is declared inside the function, during the pre-compilation period, JavaScript uses this variable to override the influence of the global variable inside the function. At the beginning of execution, local variable a is not assigned a value, so the value of local variable a read in the first line of code in the function is undefined. When the 2nd line of code of the function is executed, the local variable is assigned a value of 2, so it is displayed as 2 in the 3rd line.

Example 2

The following example demonstrates the consequences of not explicitly declaring local variables.

var jQuery = 1;
(function () {
    jQuery = window.jQuery = window.$ = function(){};
})()
document.write(jQuery);  //显示函数代码：function(){}

Therefore, using global variables within a function body is a dangerous behavior. To avoid such problems, you should get into the habit of explicitly declaring local variables using the var statement within the function body.

[Recommended learning: javascript advanced tutorial]

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