Article Directory
One, scope
- Used to teach you how to write code
- Role : effective and useful
- Domain : scope, area
- Scope : the effective scope of the variable (variable name, function name)
1. Global scope
The global scope is the largest scope and includes the local scope. Where can variables defined in the global scope be used
- When the page is opened, the browser will automatically generate a global scope window for us
- This scope will always exist and will not be destroyed until the page is closed
//下面两个变量都是存在全局作用域下面的，都是可以在任意地方使用的
var num1 = 100;
var num2 = 200;
2. Local scope
The local scope is a relatively small scope opened up below the global scope. Variables defined in the local scope can only be used inside this local scope
- In js, only functions can generate a local scope, nothing else
- Every function is a local scope
// 这个 num 是一个全局作用域下的变量 在任何地方都可以使用
var num = 100;
function fn(){
//下面这个变量就是一个 fn 局部作用域内部的变量
//只能在 fn 函数内部使用
var num2 = 200;
}
fn();
Second, the scope of the upper and lower levels
- With the scope, the variable has the scope of use, and there is also the rule of use
1. Variable definition mechanism
- A variable (function)
- Define in which scope
- Only in the current scope or subordinate scopes use in
- The upper level scope cannot be used
// 全局作用域下的 a
var a = 100;
function fn(){
// 局部作用域下的 b
var b = 200;
}
fn();
console.log(a); // 100
console.log(b); // 报错：b is not defined
2. Variable usage mechanism
- When you need to use a variable (function)
- First of all, look for it in its own scope, and if there is one, use it directly
- If not, go to the upper scope to find, if there is, use it
- If not, go to the upper scope to find, and so on
- If there is no such variable up to the global scope window, then it will
直接报错（该变量 is not defined）
var num = 100;
function fn(){
var num2 = 200;
function fun(){
var num3 = 300;
//自己fun函数作用域里面有，直接拿过来用
console.log(num3);
//自己作用域内没有，就去上一级，就是 fn 的作用域里面找，发现有，拿过来用
console.log(num2);
//自己这没有，去上一级 fn 那里也没有，再上一级到全局作用域，发现有，直接用
console.log(num);
// 自己没有，一级一级找上去到全局都没有，就会报错
console.log(a);
}
fun();
}
fn();
- The variable use mechanism is also called the scope search mechanism
- The scope's search mechanism can only look upwards, not downwards
function fn(){
var num = 100;
}
fn();
console.log(num); //发现自己作用域没有，自己身处全局作用域，就没有上一级了，直接报错
3. Variable assignment mechanism
- When you want to assign a value to a variable, you must first find the variable and assign it to it
- Variable assignment rules:
- First search in your own scope, and assign it directly
- If not, go to the upper-level scope to look up, and if there is, directly assign the value
- If you don’t have to go to the upper scope to find, you can assign it directly.
- If there is no window in the global scope, then define this variable as a global variable and assign it to him (
不会报错)
function fn(){
// 声明私有变量 num ，只能在 fun 内部使用，fun 外面不能用
var num1 = 100;
console.log(num1); // 100
}
fn();
console.log(num1); // 报错
function fun(){
// 声明私有变量 num ，只能在 fun 内部使用，fun 外面不能用
num2 = 200;
console.log(num2); // 200
}
fun();
console.log(num2); // 200
// 全局变量 num
var num;
function fn(){
var num;
function fun(){
// 不声明，只赋值
num = 100;
}
console.log(num); // undefined
fun(); // 这个函数执行完后，才给 fn 私有变量 num 赋值
console.log(num); // 100
}
/*fun 调用以后，要给 num 赋值
查看自己的作用域内部没有 num 变量
就会向上一级查找,上一级 fn 有 num 变量
那么就会把 num 赋值给 fn 下的 num 变量
赋值后的 num，由于是 fn 的私有变量，所以不会再给全局变量的 num 赋值了
*/
console.log(num); // undefined
fn();
console.log(num); // undefined
Three, scope pre-analysis explanation
Global pre-analysis
- Will be done when the page opens
- Only parse global content
// 刚打开页面
var a = 100; // 会被解析
function fn(){
// 会被解析
var b = 200;// 不会被解析
}
Local pre-analysis
- Pre-parse when the function is executed
- The pre-analysis inside the function belongs only to the function
// 刚打开页面
var a = 100; // 会被解析
function fn(){
// 会被解析
var b = 200;// 等函数执行后，才会被解析
}
fn(); // 此时函数执行了，开始解析函数内部
Does the form participate variable have the same name?
- When the function is executed, the formal parameter assignment will be performed
- When the function is executed, it will be pre-parsed
- Once the function parameter and the defined private variable have the same name
- Pre-analysis or parameter assignment first?
var a = 100;
function fn(b){
function b(){
}
b();
}
fn(200);
如果预解析在前面，形参在后面
这个 fn 函数执行的时候，先把 b 解析成为一个 函数
然后再给 b 赋值为 200 ，那么就会报错了
如果预解析在后面，形参在前面
这个 fn 函数执行的时候，先把 b 赋值为一个 200
然后预解析的时候，把 b 赋值为 函数，就不会报错
Conclusion: When the function is executed, the formal parameter assignment is performed first, and then the pre-analysis is performed
Fourth, scope pre-analysis case
Interview case 1:
var a = b = 10;
a = 10;
b = 10;
console.log(a); // 10
console.log(b); // 10
Code analysis:
预解析：
1. var a;
代码执行：
1. b = 20
此时变量赋值时，当一直到 window 都没有 b 的时候，会把 b 定义为全局变量
2. a = b
变量使用的是 b ，赋值的是 a
3. a = 10
Interview case 2:
var a = b; // 在这里直接报错，程序中断
a = 10;
b = 10;
console.log(a); // 程序早就中断，不执行
console.log(b); // 程序早就中断，不执行
Code analysis:
预解析：
1. var a;
代码执行：
2. a = b
变量 使用 和 赋值
使用的是 b：b 没有这个变量，所以直接报错
赋值的是 a：
Interview case 3:
fn();
var fn = 100;
function fn(){
fn = 200;
}
console.log(fn); // 100
Code analysis:
预解析：
1. var fn
2. function fn(){
}
预解析结束的时候，fn 是一个函数
代码执行：
3. fn()
fn = 200
给全局的 fn 赋值，赋值为200
4. fn = 100
给全局的 fn 赋值，赋值为100
5. console.log(fn)
100
Interview case 4:
fn(); // 把全局 fn 赋值为 200
fn(); // 把 200 当做一个函数来执行，报错
var fn = 100;
function fn(){
fn = 200;
}
console.log(fn); // 程序早就中断，不执行
Interview case 5:
function fn(){
var num = 100;
function fun(){
var num = num;
console.log(num); // undefined
}
fun();
}
fn();
Code analysis:
fum内部 预解析：
1. var num;
代码执行：
1. num = num;
使用的时候，num 就是 undefined
相当于给 num 变量，赋值为undefined