How to better understand JavaScript variable types and variable scopes

Type of variable

Javascript is different from languages ​​​​such as Java and C. It is an untyped and weakly detected language. Its definition of variables does not require declaring the variable type. We can assign various types of data to the same variable through assignment. For example:

i=100;//Number类型 
i="variable";//String类型 
i={x:4};//Object类型 
i=[1,2,3];//Array类型

Although this feature of JS makes our coding more flexible, it also brings a drawback, which is not conducive to debugging. The weak detection of the compiler makes it quite painful for us to maintain lengthy code.

Global variables and local variables
When the JS parser is executed, it will first build a global object in the execution environment, and the global properties we define are used as the objects Property reading, in the top-level code we can access it using the this keyword and the window object. 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 the debugging trouble caused by repeated definition of variables and overwriting previously defined variables.

Variable Scope
The scope of variables in any programming language is a critical detail. The scope of variables in JS is more free compared to languages ​​​​such as JAVA and C. A big feature is that JS variables do not have block-level scope. The variables in the function are valid in the entire function. Run the following code:

<SCRIPT LANGUAGE="JavaScript" type="text/javascript"> 
//定义一个输出函数 
function outPut(s){ 
document.writeln(s) 
} 
//全局变量 
var i=0; 
//定义外部函数 
function outer(){ 
//访问全局变量 
outPut(i); // 0 
//定义一个类部函数 
function inner(){ 
//定义局部变量 
var i = 1; 
// i=1; 如果用隐式申明　那么就覆盖了全局变量i 
outPut(i); //1 
} 
inner(); 
outPut(i); //0 
} 
outer(); 
</SCRIPT>

The output result is 0 1 0. From the above, it can be proved that if JS uses var to declare a variable in the function body, then this variable is valid in and only within the function body. When the function ends, the local variable can be destroyed. .
Due to the above JS characteristics, there is another key issue that needs attention. ActionScript has been used before. Although it and JS are both based on the ECMA standard, it is slightly different here. For example, the following code:

<SCRIPT LANGUAGE="JavaScript" type="text/javascript"> 
//定义一个输出函数 
function outPut(s){ 
document.writeln(s) 
} 
//全局变量 
var i=0; 
//定义外部函数 
function outer(){ 
//访问全局变量 
outPut(i); // 0 
//定义一个类部函数 
function inner(){ 
outPut(i); //undefiend 
var i=1; 
outPut(i); //1 
} 
inner(); 
outPut(i); //0 
} 
outer(); 
</SCRIPT>

JS variable scope

<script language ="javascript" type ="text/javascript" > 
var a = "change"; 
function fun() { 
alert(a);//输出undefined 
var a = "改变了"; 
alert(a);//输出改变了 
} 
alert(a);//输出change 
fun(); 
</script>

var defines a variable in the scope. Before a is output for the first time, JS will In the compilation analysis, a has been assigned the value of change, so change is output for the first time. When the fun() function is called, JS creates a new scope. Before outputting a, the values ​​of all var variables are initialized to undefined, so The first output in fun() is undefined, and the second output has already assigned a value, so a new value is output; the two a's are two different variables inside and outside the function, such as:

<script language ="javascript" type ="text/javascript" > 
var b; 
function fun() { 
b = "change"; 
} 
alert(b);//输出undefined 
</script>

Variable b has been defined outside the function, and a value is assigned to b in the function, but the output is undefined.

The above is the detailed content of How to better understand JavaScript variable types and variable scopes. For more information, please follow other related articles on the PHP Chinese website!