Home > Developer > Web Develop
has been a bit confused on the scope of JS, today by chance to read JavaScript authoritative guide, immediately be attracted to, write really good. I look at the sixth version, quite thick, about 1000 pages, JS Broad and profound, to be familiar with the need to master the great perseverance of Kung Fu.
One: function scope
Let's look at a short piece of code:
The first sentence output is: "Undefined", not "global"
The second output is: "Local"
You might think that the first sentence will output: "Global" because the code has not executed var scope= "local", so it will definitely output "global".
I said the idea was absolutely right, just using the wrong object. We will first distinguish between the functional scope of JavaScript and the block-level scope of the Java we know.
In Java, each piece of code inside the curly braces has its own scope, and the variables are not visible outside the code snippet that declares them.
JavaScript does not have a block-level scope at all, but a function scope.
The so-called function scope is to say that the variables are defined in the body of the function in which they are declared and in any function in which the body of the function is nested.
So according to the meaning of the function scope, the above code can be rewritten as follows:
The first sentence output is: "Undefined", not "global"
The second output is: "Local"
The scope declaration inside the T function overrides the global scope, but has not yet been assigned, so the output: "Undefined".
Why JS does not have block-level scope , there is the following code for proof:
var name= "global";
if (true) {
var name= "local";
Console.log (name)
}
Console.log (name);
The output is "local", if there is a block-level scope, the obvious if statement will create the local variable name,
The global name is not modified, but there is no block-level scope for JS.
It's easy to understand the code below.
function T (flag) {
if (flag) {
var s= "Ifscope";
for (Var i=0;i<2;i++)
;
}
Console.log (i);
Console.log (s);
}
T (TRUE);
The result is 2 ifscope.
Two: Variable scope
Or first look at a piece of code:
function T (flag) {
if (flag) {
s= "Ifscope"; WINDOW.S this variable without var is a global variable by default, and is the property of the top-level object.
for (Var i=0;i<2;i++)
;
}
Console.log (i);
}
T (TRUE);
Console.log (s);
In the above code, will declare the Var of S is removed, the program will error?
The final result is: Ifscope
This is mainly a variable that is not declared with Var in JS is a global variable, and is the property of the top-level object
So you use Console.log (WINDOW.S) will also output: Ifcobfig
i = 2; No
alert (WINDOW.I);
When declaring a variable with VAR, the property created is not configurable, that is, it cannot be deleted by the delete operator.
var name = 1-Not Delete
sex = ' girl '-can be deleted
This.age = up to delete
Three: Scope chain
Take a look at the code first:
Name= "Lwy";
function T () {
var name= "Tlwy";
function S () {
var name= "Slwy";
Console.log (name); Slwy
}
function SS () {
Console.log (name); Tlwy
}
S ();
SS ();
}
T ();
Console.log (name); Lwy
When you execute S, the execution environment (the calling object) of the function S is created, the object is placed at the beginning of the list, and then the calling object of the function T is linked after, and finally, the global object. Then looking for the variable name from the beginning of the list, it's obvious
Name is "Slwy".
But when the SS () is executed, the scope chain is: SS ()->t ()->window, so name is "Tlwy"
Here's an example that's easy to make a mistake:
<script type= "Text/javascript" >
function Buttoninit () {
for (Var i=1;i<4;i++) {
var B=document.getelementbyid ("button" +i);
B.addeventlistener ("click", Function () {Alert ("button" +i);},false);
}
}
Window.onload=buttoninit;
</script>
<body>
<button id= "Button1" >Button1</button>
<button id= "Button2" >Button2</button>
<button id= "Button3" >Button3</button>
</body>
When the document is loaded and a few buttons register the click event, what will pop up when we click the button?
It's easy to make a mistake, yes, three buttons all pop up: "Button4", are you correct?
When the registration event ends, the value of I is 4, and when the button is clicked, the event function is functions () {Alert ("button" +i);} This anonymous function does not have I, according to the scope chain, so to find in the Buttoninit function, when I is the value of 4,
So pop up "Button4".
Four: With statement
When it comes to scope chains, you have to say with statements. The WITH statement is primarily used to temporarily extend the scope chain, adding objects in the statement to the scope's head.
Look at the code below
Person={name: "Yhb", Age:22,height:175,wife:{name: "Lwy", age:21}};
With (Person.wife) {
Console.log (name);
}
The WITH statement adds Person.wife to the head of the current scope chain, so the output is: "Lwy".
After the WITH statement ends, the scope chain returns to normal.
Understanding of the scope and scope chain of JS (RPM)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
