Understanding JavaScript variable scopes becomes easier_javascript tips

JavaScript itself is a simple language, but its variable scope issue also makes many people dizzy. This is mainly because of the existence of JavaScript closures. This article does not intend to explain the issue of JavaScript variable scope in depth (in fact, I do not have the ability to talk about this topic in depth), nor does it talk about the topic of "closure". This article only discusses the most practical JavaScript scope knowledge points.

1. JavaScript scope classification
JavaScript has two scopes: global (window) and function level (function). Function level (function) should not be understood as "block level (braces {} level)".

2. Distinguish and define JavaScript global variables and local variables
1.1 Variables defined outside all functions, with or without the var keyword, are global variables. The global variable is actually parsed into an attribute of the window object, so we can access it in the "window.global variable name" method. It is recommended to use the variable name to access it directly unless necessary. The following example demonstrates the most common way to define global variables:

Copy the code The code is as follows:

var msg1='This is message 1';
msg2='This is message 2';
alert(window.msg1); //This is message 1 Use the window keyword to access
alert(window .msg2); //This is message 2
alert(msg1); //This is message 1 omit the access method of window keyword
alert(msg2); //This is message 2
function otherFunction (){} //Some other function or object declaration codes
var otherObject={};

1.2 Global variables can also be defined and obtained within the function (local variable runtime environment). The definition method is not to use the var keyword, and the global variable content can be easily obtained in the local environment, just use the global variable name to reference it. It should be noted that if a local variable with the same name as the global variable is defined in the function, then the function body will use its own local variable first. If you must use a global variable with the same name at this time, please add the window prefix. For example:

Copy code The code is as follows:

var msg1='This is message 1' ;
var msg3='This is message 3';
function otherFunction()
{
msg2='This is message 2'; //Not using the var keyword is actually defining a global Variable
var msg3='Message 3';
alert(msg1); //This is message 1 (Of course, global variables defined outside can be accessed within the function, and no matter how deeply the function is nested, it can be correctly obtained This global variable is one of the manifestations of JavaScript closure)
alert(msg3); //Message 3 (local variable msg3)
alert(window.msg3); //This is message 3 (using The window prefix accesses the global variable msg3 with the same name)
alert(this.msg3); //This is message 3 (because otherFunction () is defined in a global environment, at this time, the this of otherFunction () also points to window, so You see that window.msg3 is equal to this.msg3)
}
otherFunction();
//msg1 defined outside the otherFunction function and msg2 defined inside are still global variables
alert(window .msg1); //This is message 1
alert(window.msg2); //This is message 2

2.1 Using the var keyword, variables defined in the function body are local variables , this variable can be used by all statement blocks ({}) and sub-functions below it. This variable can be accessed anywhere in this function, but cannot be accessed "directly" outside this function (closures allow indirect access, or proxy access, this knowledge point is beyond the scope of this article). For example:

Copy code The code is as follows:

function showMsg()
{
if (true)
{
var msg='This is message';
}
alert(msg); //This is message
}
showMsg();
alert(typeof(msg)); //undefiend
//The variable msg defined within if {} braces can also be accessed within showMsg() outside if, but outside showMsg() It is inaccessible

2.2 The variables of the parent function can be accessed by the child function, but the variables of the child function cannot be accessed by the parent function. Obviously this is consistent with the function-level scope we mentioned at the beginning of. It seems that the father is more cheerful and the son is stingy. For example:

Copy code The code is as follows:

function showMsg()
{
var MsgA='Message A';
this.setMsg=function(msg)
{
var MsgB='Message B' ;
alert(MsgA); //Message A (The sub-function setMsg() can access the local variable MsgA of the parent function showMsg())
}
alert(MsgB); //MsgB is not defined (in The variable MsgB defined in its child function cannot be accessed in the parent function)
}
var sm=new showMsg();
sm.setMsg('Message string');

3. Several things to pay attention to and usage skills
1. In order to avoid variables being confused or overwritten, don’t forget to add the var keyword to the definition of local variables (if necessary, we must actively release the variable after use) , that is, "variable name = null"), and it is recommended to define all variables at the beginning of each function body. For example:

Copy code The code is as follows:

var msg='Message';
function showMsg()
{
var msg; //Even if you accidentally use the same variable name as the global variable here, you don’t have to worry about overwriting the global variable with the same name
var a;
var b;
var c;
for (a=0;athis.setMsg=function(){}
}

2. Use anonymous functions skillfully to reduce naming conflicts or variable pollution. The following two pieces of code actually implement the same function, and the way the first piece of code is written is that you can boldly use the variable names you want to use in the anonymous function, etc., and you don't have to worry about the variables you define overwriting other people's definitions or your own definitions elsewhere. variable.

Copy code The code is as follows:

//Define an anonymous function and throw the code into This anonymous function can effectively reduce naming conflicts or variable pollution, which is the practice of common JS frameworks
(function()
{
var msg='This is message';
alert(msg );
})();
document.write(msg); //msg is undefined (methods other than anonymous functions cannot call the msg variable)
//------ -----------------------
var msg='This is message';
alert(msg);

3. It is not recommended to use this instead of window to access global variables in functions that do not require instantiation. Normally functions using the this keyword should be treated as JavaScript classes (I like to prefix "cls" to the class name). If the following functions are only called as ordinary functions, the this keyword should not appear, because this is usually to operate a global variable. Example:

Copy code The code is as follows:

function clsMsg()
{
this.msg='This is default message';
this.showMsg=function()
{
alert(this.msg);
}
}
sMsg=new clsMsg();
sMsg.msg='This is new message';
sMsg.showMsg();

4. Guidelines for related knowledge points
Understand the following related knowledge points It will help you better understand JavaScript variable scope. This article will not go into details for now. It will be discussed in a separate space later, so stay tuned.
(1)Understanding JavaScript "pre-parsing"
(2)JavaScript closures