Summary of common errors in the use of javascript variable scope_javascript skills

I saw this very good article on rainweb’s blog today and felt it was necessary to share it. I believe that after reading this article carefully, your understanding of js scope will rise to a new level.

Foreword: Variable scope in JavaScript is a problem that often causes headaches and madness. The following is a brief summary of frequently encountered and error-prone situations through 10 questions. The code samples are short and simple.

Question 1

Copy code The code is as follows:

var name = ' casper'; alert(name); //Output without any doubt: casper

Question 2

Copy code The code is as follows:

alert(name); //Error: The object is undefined, even if a variable that does not exist is used, so an error occurs
age = 24; // There is nothing wrong here, but isn’t age defined? Read the Rhinoceros book and understand //Assigning a value to an undefined variable will create a global variable, which is equivalent to: var age = 24

Question 3

Copy code The code is as follows:

alert(name); //name is defined below, must there be an error here? wrong! Pops up here: undefined
var name = 'casper';

Explanation: When the JavaScript code is parsed, it will search for the variables declared by var and declare them in advance. The actual process is as follows :

Copy code The code is as follows:

var name; // Just declare the name variable, but No value is assigned, so this is: undefined
alert(name); name = 'casper';

Question 4

Copy the code The 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 5

Copy code The 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, there is an extra var before the name here,
} show( : If there is a local variable with the same name as an external global variable, the local variable is used first, here is name)
function show(){ var name; alert(name); name = 'hello'; }

Question 6




Copy code

The 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 continue to question 7


Question 7

Copy code

The code is as follows: var list = [1,2,3]; function show(){

if(typeof list === 'undefined' )

{ var list = []; //Please note that compared with question 6, there is one more var
} alert(list.length); };
show(); //Result :0, do you suddenly have the urge to die?


Explanation: JavaScript does not have block-level scope (that is, the scope limited by {}), all variables declared in the function, no matter where they are Statements are defined in the entire function, which is different from C and other gray areas. Quickly change your thinking and keep pace with the times
So, let’s take a look at the actual internal parsing logic of the show method

Copy code

The code is as follows: function show(){ var list; //list is a local variable and it is not yet available here Assignmentif(typeof list === 'undefined'){

list = []; }

alert(list.length); };


Question 8

Copy code The code is as follows:

alert(typeof show); / /Result: function, please believe your eyes, you read it correctly
function show(){}

Explanation: The process of javascript code parsing, similar to the form statement of function show() Functions, like variables declared by var, will be mentioned to the front. The difference is that the function declaration and definition are completed at the same time, but the assignment of variables declared by var will be completed later
Question 9

Copy code The code is as follows:

alert(typeof show); //Result: undefined, please polish you again Eyes, you did read it correctly
var show = function(){};

Explanation: There are some differences between the two processes of defining functions using function definitions and function expressions
Function definition: function show(){}
Function expression: var show = function(){}
Using the function definition method, the function will be defined in advance; while using function expression The declaration method and function definition are the same as local variables declared with var. The function declaration will be in advance, but the function definition position remains unchanged. The process is as follows:

Copy code The code is as follows:

var show; alert(typeof show);
show = function(){};

Question Ten

Copy code The code is as follows:

var data = {name:'casper'};
function data(){ alert('casper'); }
data(); //TypeError: object is not a function

Do you have the urge to smash the monitor? . . data is actually {name:'casper'} at this time, and an object is called as a function, so an error is reported
As mentioned before, variables declared by functions (through function definitions) and var declarations will be advanced, but there will be The order is as follows:

Copy code The code is as follows:

function data(){ alert('casper');
} var data; data = {name:'casper'};
data();

With slight modification, the result is different:

Copy code The code is as follows:

var data = {name:'casper'};
var data = function (){ //Declare function through function expression
alert('casper'); }
data(); // Result: casper

combined It is not difficult for Wen to guess the process as follows:

Copy code The code is as follows:

var data; data = {name:'casper'};
data = function (){ alert('casper'); }
data(); //Result: casper