Today, a little intern in the company asked me the difference between two JS codes:
Code 1:
<script type="text/javascript"> var a = "Hello"; function test(){ var a; alert(a); a = "World"; alert(a); }</script>Code 2:
<script type="text/javascript"> var a = "Hello"; function test(){ alert(a); a = "World"; alert(a); }</script>I think, it's so simple. Isn't it just a scope problem between global variables and local variables? I said: "When the global variable is duplicated with the local variable, the scope of the local variable will overwrite the scope of the global variable. After leaving the scope of the local variable, it will return to the scope of the global variable. So the results of the two codes running are: 1) undefined World 2) Hello World. Then I randomly compiled the following example for her:
<script> var a =1; function test(){ alert(a); var a = 2; alert(a); } test(); alert(a); </script>What is the result equal? Is it output 1 2 1? Well, I thought so before I sent the test case to her, but after the test output... the result of running was undefined 2 1. At that time, I was puzzled and asked Teacher Gu that I realized that I didn’t know much about JS, so I worked hard to learn + test, and summarized it as follows:
1. The scope of Javascript variables is divided according to method blocks (that is, it is divided by a pair of braces { } of function). Remember, it is a function block, and for, while, and if blocks are not the scope division criteria. You can take a look at the following examples:
<script>function test2(){ alert ("before for scope:"+i); // i is not assigned a value (not undeclared! Use undeclared variables or functions to throw a fatal error and interrupt script execution) // At this time the value of i is underfined for(var i=0;i<3;i++){ alert("in for scope:"+i); // i is 0, 1, 2, and when i is 3, the loop is jumped} alert("after for scope:"+i); // i is 3, note that it is already outside for scope, but i is still retained as 3 while(true){ var j = 1; break; } alert(j); // j is 1, note that it is already on while Outside scope, the value of j remains at 1 if(true){ var k = 1; } alert(k); //The value of k is 1. Note that it is already outside scope, but the value of k remains at 1}test2();//If (outside function scope) the output of the i, j, and k variables that only exist in test2 will have a magic effect? alert(i); //error! That's right, it's an error, because the variable i is not declared (not unassigned, distinguishing the output of the first line of the test2 function), resulting in a script error, and the program ends here! alert("Will this line print still output?"); //Not executed alert(j); //Not executed alert(k); //Not executed</script>2. Before execution, Javascript will conduct a complete analysis of the declaration part of the entire script file (including local variables) to determine the scope of the actual variables. How to understand? See the following example:
<script> var a =1; function test(){ alert(a); //a is undefined! This a is not a global variable, because a duplicate local variable has been declared in the function scope (the fourth last line of the function body) and //The global variable a is overwritten, which shows that Javascript will conduct a complete analysis of the definition part of the entire script file before execution. Therefore, before function test() is executed, // variable a in the function body is pointed to the internal local variable instead of the external global variable. But at this time a is only declared and has not assigned a value, so it outputs undefined. a=4 alert(a); //a is 4, is there no suspense? The a here is still a local variable! var a; //The local variable a declares alert(a); //a is still 4, because 4 has been assigned to a before} test(); alert(a); //a is 1, which is not in the function scope, the value of a is the value of the global variable</script>3. When the global variable is duplicated with the local variable, the scope of the local variable will overwrite the scope of the global variable. After leaving the scope of the local variable, it returns to the scope of the global variable. When the global variable encounters a local variable, how to use the global variable? Use window.globalVariableName.
<script> var a =1; function test(){ alert(window.a); //a is 1, here a is a global variable! var a=2; //The local variable a is defined in this line alert(a); //a is 2, and a here is a local variable! } test(); alert(a); //a is 1, it is not in the function scope, the value of a is the value of the global variable</script>Of course, for more articles, please refer to the related articles below.