Concept of scope in JS:
Represents the area in which variables or functions work, referring to the context in which they are executed, that is, the context execution environment. There are only two scopes for Javascript: global scope and local scope. Local scope is distinguished by functions.
Let’s first look at a few questions:
1.
if(true){
var aa= "bb";
}
(aa); //bb
for(var i = 0; i < 100; i++){
//do
}
(i); //100
2.
var bb = '11111';
function aa() {
alert(bb);//undefine
var bb = 'test';
alert(bb);//test
var cc = "test1";
alert(age);// Syntax error
}
aa();
3.
var test = '1111111';
function aa() {
alert(test);
}
function bb() {
var test = '22222222';
aa();
}
bb();//alert(1111111);
4.
alert(typeof aa); //function
alert(typeof bb); //undefined function aa() { //function definition
alert('I am 111111111');
};
var bb = function() { //Function expression
}
alert(typeof bb);//function
5.
function aa(){
var bb = "test";
cc = "test";
alert(bb);
}
aa();
alert(cc);//Test
alert(bb);// Syntax error
The above 5 questions summarize the scope issues in js
Can you summarize these points
1. Block-level scope
From the first question, we can see that after executing in {}, the variable is not destroyed and is still stored in memory, so we can access it.
2. Functions in JavaScript run in the scope they are defined, not in the scope they are executed.
The concept of scope chain of functions is mentioned here. In ECMA262, this is how it is.
Any scope at the execution context moment is implemented by the scope chain.
When a function is defined, the scope chain when it is defined will be linked to the [[scope]] property of this function object.
When a function object is called, an active object (that is, an object) will be created, and the formal parameters of each function are named as the named attribute of the active object. Then, the active object is used as the front end of the scope chain at this time, and the [[scope]] of this function object is added to the scope chain.
So the result of question 3 is alert(1111111);
3. JS will process function definitions and var keywords in advance
For example, if you start alert(bb); //undefined , alert(age)// syntax error, what is the difference between these two? The reason is that there is var bb = "test" afterwards. The keyword var was processed in advance during initialization, but this is not assigned at the beginning.
Modify the code to this, you can see
var dd = '11111';
function aa() {
alert(bb);//undefine
var bb = 'test';
alert(bb);//test
var cc = "test1";
alert(age);// Syntax error
}
aa();
alert(dd);//11111
alert(cc);// Syntax error
Here alert(bb) does not report syntax errors, alert(age) reports syntax errors.
But please note:
<script>
alert(typeof aa); //Result: undefined
</script>
<script>
function aa() {
alert('yupeng');
}
</script>
This shows that js precompilation is segment-based. Question 4 Same as
4. Function-level scope
The variables defined in the function are destroyed after the function is executed and do not occupy the memory area.
Therefore, the grammar of the last alert(cc); in question 2 is reported, and the last alert(bb) of the last answer is the same.
Represents the area in which variables or functions work, referring to the context in which they are executed, that is, the context execution environment. There are only two scopes for Javascript: global scope and local scope. Local scope is distinguished by functions.
Let’s first look at a few questions:
1.
Copy the codeThe code is as follows:
if(true){
var aa= "bb";
}
(aa); //bb
for(var i = 0; i < 100; i++){
//do
}
(i); //100
2.
Copy the codeThe code is as follows:
var bb = '11111';
function aa() {
alert(bb);//undefine
var bb = 'test';
alert(bb);//test
var cc = "test1";
alert(age);// Syntax error
}
aa();
3.
Copy the codeThe code is as follows:
var test = '1111111';
function aa() {
alert(test);
}
function bb() {
var test = '22222222';
aa();
}
bb();//alert(1111111);
4.
Copy the codeThe code is as follows:
alert(typeof aa); //function
alert(typeof bb); //undefined function aa() { //function definition
alert('I am 111111111');
};
var bb = function() { //Function expression
}
alert(typeof bb);//function
5.
Copy the codeThe code is as follows:
function aa(){
var bb = "test";
cc = "test";
alert(bb);
}
aa();
alert(cc);//Test
alert(bb);// Syntax error
The above 5 questions summarize the scope issues in js
Can you summarize these points
1. Block-level scope
From the first question, we can see that after executing in {}, the variable is not destroyed and is still stored in memory, so we can access it.
2. Functions in JavaScript run in the scope they are defined, not in the scope they are executed.
The concept of scope chain of functions is mentioned here. In ECMA262, this is how it is.
Any scope at the execution context moment is implemented by the scope chain.
When a function is defined, the scope chain when it is defined will be linked to the [[scope]] property of this function object.
When a function object is called, an active object (that is, an object) will be created, and the formal parameters of each function are named as the named attribute of the active object. Then, the active object is used as the front end of the scope chain at this time, and the [[scope]] of this function object is added to the scope chain.
So the result of question 3 is alert(1111111);
3. JS will process function definitions and var keywords in advance
For example, if you start alert(bb); //undefined , alert(age)// syntax error, what is the difference between these two? The reason is that there is var bb = "test" afterwards. The keyword var was processed in advance during initialization, but this is not assigned at the beginning.
Modify the code to this, you can see
Copy the codeThe code is as follows:
var dd = '11111';
function aa() {
alert(bb);//undefine
var bb = 'test';
alert(bb);//test
var cc = "test1";
alert(age);// Syntax error
}
aa();
alert(dd);//11111
alert(cc);// Syntax error
Here alert(bb) does not report syntax errors, alert(age) reports syntax errors.
But please note:
Copy the codeThe code is as follows:
<script>
alert(typeof aa); //Result: undefined
</script>
<script>
function aa() {
alert('yupeng');
}
</script>
This shows that js precompilation is segment-based. Question 4 Same as
4. Function-level scope
The variables defined in the function are destroyed after the function is executed and do not occupy the memory area.
Therefore, the grammar of the last alert(cc); in question 2 is reported, and the last alert(bb) of the last answer is the same.