## Scope chain
当执行一段JavaScript代码(全局代码或函数)时,JavaScript引擎会为其创建一个作用域,又称为执行上下文。
After the page is loaded, a global scope will be created first, and then every time a function is executed, a total of corresponding scopes will be established, thus forming a scope chain, each scope has a corresponding scope chain, and the head of the chain is Global scope, the end of the chain is the scope of the current function. The scope of the
chain is to resolve identifiers. When a function is created, this/ arguments/named parameters and all local variables in the function will be added to the current scope. When JavaScript needs to find a variable (this process is called variable resolution), it will first look for the variable attribute from the end of the scope chain (that is, the current scope). If it is not found, it will follow the scope. The chain (that is, the global scope chain) continues to search until the head of the chain is found. If the variable is still not found, it is considered that the variable does not exist in the scope chain of this code, and a total reference error exception is thrown.
The scope chain needs to be clear:
1.1 Variables defined before ES6 pass var ES6 and then define variables with let
1.2. There is no block-level scope before
ES6 , only global scope and local scope ES6 adds a new block-level scope but defines variables through let There is no difference (both are local scope)
1.3. Before ES6, the functions outside the braces are all global scopes.
1.4. Before
ES6, the functions in the braces are all local scopes. Before ES6, the
global scope is also called level 0. Scope
2.2 Definition The scope opened by the function is
1/2/3 ...level scope 2.3 JavaScript will link these scopes together to form a chain, this chain is the scope chain
0---->1---- ->2------>3
2.4. Except for the 0-level scope, the current scope level is equal to the upper level + 1
variable search rules in the scope chain
3.1 In the current search,
if the current scope is found, use the current scope to find 3.2 If the current scope is not found, go to the upper-level scope to find
3.3 and so on until level 0, if the 0-level scope is not found, an error will be reported
Var declares variables in the same scope with the same name, and the later declaration overrides the first declared
let. The variable with the same name cannot be declared in the same scope, and an error will be reported
Pre-parsing rules
1. Promote variable declarations and function declarations to the top of the current scope
2. Put the remaining code in the order of writing to the back.
Note: Variables defined by let will not be promoted (will not be pre-parsed)
The format of the function defined before ES6
say();
//ES6之前的这种定义函数的格式,是会被预解析的,所以可以提前调用
function say(){
console.log("hellow it666")
}
//预解析之后的代码
function say(){
console.log("hellow it666")
}
say();
二:
say();//say is not a function
//如果将函数赋值给一个var定义的变量,那么函数不会被预解析,只有变量会被预解析
var say = function(){
console.log("hellow it666")
}
//预解析之后的代码
var say // undefined
say();
say = function(){
console.log("hellow it666")
}
三:
ES6定义函数
不会被预解析 //say is not defined
let say = () => {
console.log("hellow it666")
}
预解析练习
1.
var num = 123;
fun();
function fun(){
console.log(num)
var num = 666
}
//预解析后
var num
function fun(){
var num //undefined
console.log(num) //undefined
num = 666
}
num = 123;
fun();
2.
var a = 666;
test();
function test(){
var b = 777;
console.log(a);
conso.log(b);
console.log(c);
var a = 888;
let c = 999;
}
//预解析之后
var a;
function test(){
var b;
var a;
b = 777;
console.log(a); //undefined
conso.log(b); //777
console.log(c); //报错
a = 888;
let c = 999;
}
a = 666;
test();
3.
//在ES6之前没有块级作用域 ,所以没有将这两个函数定义到其他函数中
所以这两个是全局作用域
//1.在高级浏览器中,不会对{}中定义的函数进行提升
//只有在低级浏览器中才会正常解析
if(true){
function demo(){
console.log("hellow demo1111")
}
}else{
function demo() {
console.log("hello demo2222")
}
}
4.
//如果变量名称和函数名称同名,那么函数的优先级高于变量
//企业开发中 变量名称和函数名称不能重名
console.log(value);
var value = 123;
function value(){
console.log("fn value");
}
console.log(value)
//预解析之后
function value(){
console.log("fn value");
}
console.log(value);//函数的定义
var value
value = 123;
console.log(value)//123