Summary of Common Errors in Javascript variable scope usage

Today, I saw this very good article on the blog of rainweb.ArticleI think it is very necessary to share this article. I believe that after reading this article carefully, the understanding of JS scopes will go up to a new level.

In JavaScript, variable scope is a problem that often leads to headaches. The following is a summary of the frequent and error-prone situations through more than 10 questions,CodeThe sample is short and easy to use.

Question 1

Copy code The Code is as follows: var name = 'casper '; alert (name); // output without a doubt: Casper

Question 2Copy codeThe Code is as follows: Alert (name); // error: the object is undefined, that is, a non-existent variable is used, so an error occurs.
Age = 24; // There is a wooden error, but isn't age defined? Flip down the rhino book and understand // assign a value to an undefined variable. A global variable is created, which is equivalent to: var age = 24.

Question 3Copy codeThe Code is as follows: Alert (name); // It is defined under name. An error is returned here? Error! Undefined
VaR name = 'casper ';

Explanation: when parsing JavaScript code, it will search for the variables declared by VAR and declare them in advance. The actual process is as follows:Copy codeThe Code is as follows: var name; // declare the name variable with no value, so it is: Undefined
Alert (name); name = 'casper ';

Question 4Copy codeThe Code is as follows: var name = 'casper ';
Function show (){
Alert (name );
Name = 'hello'; // change the value of the global variable name to 'Hello'
}
Show (); // output: Casper

Question 5Copy codeThe Code is as follows: var name = 'casper ';
Function show () {alert (name); // output: Undefined. Do you want to die?
VaR name = 'hello'; // Note: Compared with question 4, VaR is added before name,
} Show ();

Explanation: In function show, name is a local variable. The principle of Question 3 also applies to this, that is, the function show is actually
(Note: When a function has a local variable with the same name as an external global variable, the local variable is used first, and the name is used here)
Function show () {var name; alert (name); name = 'hello ';}
Question 6Copy codeThe Code is as follows: var list = [1, 2, 3];
Function show () {If (typeof list = 'undefined ')
{List = [];}
Alert (list. Length );
};
Show (); // result: 3. Is it clear at a glance? =. Wait a moment. Please check the seventh question.

Question 7Copy codeThe Code is as follows: var list = [1, 2, 3];
Function show (){
If (typeof list = 'undefined ')
{Var list = []; // note that, compared with question 6, VaR is added here.
} Alert (list. Length );};
Show (); // result: 0. Is it a sudden desire to die?

Explanation: javascript has no block-level scope (that is, the scope defined by {}). All variables declared in the function are defined no matter where they are declared, this is often different from C ++ and so on.
So let's take a look at the actual internal parsing logic of the show method.Copy codeThe Code is as follows: function show () {var list; // list is a local variable, and no value is assigned here.
If (typeof list = 'undefined '){
List = [];}
Alert (list. Length );};

Question 8Copy codeCode: Alert (typeof show); // result: function. Please trust your eyes.
Function show (){}

Explanation: The process of JavaScript code parsing is similar to a function declared in the form of function show (). Like the variables declared by VAR, it will be mentioned at the beginning. The difference is that, function declaration and definition are completed at the same time, but the value assignment of the variable declared by VAR will be completed later.
Question 9Copy codeCode: Alert (typeof show); // result: Undefined. please polish your eyes again.
VaR show = function (){};

Explanation: using function definitions and function expressions to define functions, there are some differences between the two processes.
Function Syntax: function show (){}
Function expression: var show = function (){}
When the function definition declaration method is used, the function definition is advanced. When the function expression declaration method is used, the function definition is the same as the local variable declared by var, but the function definition position remains unchanged. The process is as follows:Copy codeThe Code is as follows: var show; alert (typeof show );
Show = function (){};

Question 10Copy codeThe Code is as follows: var DATA = {Name: 'casper '};
Function data () {alert ('casper ');}
Data (); // typeerror: object is not a function

Is there an impulse to smash the display... Data is actually {Name: 'casper '}, and an object is called as a function, so an error is reported.
As mentioned above, variables declared by function declaration (defined by function) and VAR will be advanced, but there will be orders as follows:Copy codeThe Code is as follows: function data () {alert ('casper ');
} Var data; data = {Name: 'casper '};
Data ();

Slightly modified, the results are different:Copy codeThe Code is as follows: var DATA = {Name: 'casper '};
VaR DATA = function () {// declare a function through a function expression
Alert ('casper ');}
Data (); // result: Casper

The process of combining the above is as follows:Copy codeThe Code is as follows: var data; data = {Name: 'casper '};
Data = function () {alert ('casper ');}
Data (); // result: Casper