Detailed explanation of var declaration methods and variable scope examples in JavaScript

When you make this "implicit" declaration in the current context, the JavaScript engine will first search in the current context to see if this variable has been declared before. If not, then search in the previous context. If It has not been found and will finally declare this variable on the window!

window. y = "hello"; function func(){ y = "OH, NO!!!"; } func(); alert(window.y); //#=> display "OH, NO!!!"

When any layer in the context has such an "implicitly" defined variable, the variable in that layer will be modified without generating a new variable on the window.

var x = "window.x"; function a() { var x = "a's x"; var b = function() { var c = function() { //no var! x = "c's x:"; }; alert("before c run,the b.x:" + x); c(); alert("after c run, the b.x:" + x); }; alert("a.x is:" + x); b(); alert("after b function runed, the a.x is:" + x); }; alert("before a run, window.x:" + x); a(); alert("after a run, window.x:" + x);

Thoughts triggered by a question

1. Myth! Doubts caused by a piece of code

for(var i=0;i<3;i++) { console.log(j+","+k); for(var j=0;j<3;j++) { var k = j+1; } } console.log(i);

Output results:

undefined,undefined 3,3 3,3 3

If you are engaged in languages such as c and java, you may be confused as to why j and k Can such local variables be accessed by code outside the scope?
If a variable declared with var in JavaScript can be regarded as a local variable, then the scope that can access the variable is the local scope of the variable. As in the above example, at the console.log line, there are still scopes of j and k, and outside the loop, there is still the scope of i. At this point, perhaps I can arbitrarily say that JavaScript has no real local scope. Really? No!

2. How to obtain the real local scope? A writing method caught my attention
You may have seen the source code of JQuery or the source code of Ext, and you may be a little familiar with the following writing method.

var a = 3,b=4; var exports = (function() { var a = 1,b=2; return {a:a,b:b}; })(); console.log(""+a+","+b); console.log(exports.a+","+exports.b);

Output result:

3,4 1,2

It is a very magical discovery (actually it is not magical, everyone knows it) that there is an independent scope inside the function, that is, the var declaration inside the function Variables can only be used inside functions. Therefore, every master in each framework writes this way to prevent conflicts between local variables and external variables (outer local variables and global variables).
At this point, I retract the arbitrary inference in the first article and modify it:
JavaScript is bounded by functions, and each function has a local scope; any other block (including ordinary code blocks, for loops, If, while and other code blocks) do not have a local scope. Variables declared using var can directly pass through these code blocks and can be accessed by external code.

3. When is an error reported and when is it undefined? The declaration mechanism of var
Look at the code:

console.log(a)

ReferenceError: a is not defined

undefined

var exports = (function() { var a = 1,b=2; return {a:a,b:b}; })(); console.log(a);

Output result:

ReferenceError: a is not defined

Conjecture conclusion:
Every time the JavaScript engine executes the code, it will scan first All code in the scope (the code inside the function in the scope will not be scanned), and all variables declared by var are recorded. Before the code is executed to the assignment, the value of these variables is undefined. After that, if you access a variable, you will first access the local variable. If there is no such local variable, you will access the local variable of the upper level (such as a closure, and the upper level creates an environment for the closure) until the complete global variable is accessed. If there is no such variable, an exception is thrown.

The above is the detailed content of Detailed explanation of var declaration methods and variable scope examples in JavaScript. For more information, please follow other related articles on the PHP Chinese website!