一、 JavaScript声明提前
在JavaScript中如果不创建变量,直接去使用,则报错:
console.log(xxoo);
// 报错:Uncaught ReferenceError: xxoo is not defined
JavaScript中如果创建值而不赋值,则该值为 undefined,如:
var xxoo;
console.log(xxoo);
// 输出:undefined
在函数内如果这么写:
function Foo(){
console.log(xo);
var xo = 'seven';
}
Foo();
// 输出:undefined
上述代码,不报错而是输出 undefined,其原因是:JavaScript的函数在被执行之前,会将其中的变量全部声明,而不赋值。所以,相当于上述实例中,函数在“预编译”时,已经执行了var xo;所以上述代码中输出的是undefined。
二、JavaScript以函数为作用域
1、在JavaScript中每个函数作为一个作用域,在外部无法访问内部作用域中的变量。
function Main(){
var innerValue = 'seven';
}
Main();
console.log(innerValue);
// 报错:Uncaught ReferenceError: innerValue is not defined
三、JavaScript函数的作用域栈
由于JavaScript中的每个函数作为一个作用域,如果出现函数嵌套函数,则就会出现作用域栈(先进后出)。
a = '全局';
function Outer(){
var a = "o";
function inner(){
var a = 'i';
console.log(a);
}
inner();
}
Outer();
如上述代码则出现三个作用域组成的作用域栈,如果出现作用域栈后,那么寻找变量时候就会出现顺序,对于上述实例:
代码从上到下执行的时候,以从外到内的顺序将每个变量入栈。全局变量在栈底部。
当执行console.log(xo)时,其寻找顺序为根据作用栈从内到外的优先级寻找,如果内层没有就逐步向外层查找,直到没找到抛出异常。
JavaScript的函数在被执行之前,会将其中的变量全部声明,并在作用域栈中占据相应的坑位。
四、JavaScript的作用域栈执行前已创建
JavaScript的作用域在被执行之前已经创建,日后再去执行时只需要按照作用域栈去寻找即可。参考二的图一,在函数被执行前作用域已经形成了,只是函数变量未被赋值。
示例一:
a= '全局';
function Outer(){
var a= "O";
function inner(){
console.log(a);
}
return inner;
}
var ret = Func();
ret();
// 输出结果: O
上述代码,在函数被调用之前作用域链已经存在。
由于函数创建时,作用域已经创建,因此最后的作用域结果入上图。ret=inner。因此执行inner()函数,当然首先查找到本层函数的变量a='O' 。
示例二:
a= '全局';
function Outer(){
var a= "O";
function inner(){
console.log(a);
}
a = 'B';
return inner;
}
var ret = Func();
ret();
// 输出结果: B
上述代码和示例一的目的相同,也是强调在函数被调用之前作用域链已经存在。
inner函数中在函数执行钱a变量游“O"被重置为”B",因此最后执行结果为B。
示例三:
a= '全局';
function Bar(){
console.log(a);
}
function Outer(){
var a= "O";
return Bar;
}
var ret = Func();
ret();
// 输出结果: '全局'
上述代码,在函数被执行之前已经创建了两条作用域链(同级函数会创建个平行作用域,共享他们的父级函数的的变量):
当执行et();时,ret代指的Bar函数,而Bar函数的作用域链已经存在:全局作用域 -> Bar函数作用域,所以,执行时会根据已经存在的作用域链去寻找。
其他例子 :
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
function func() { for(i=0;i<3;i++){ setInterval(function () { console.log(i) },1000) } } //每秒输出3个3
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <input type="button" value="按钮1"> <input type="button" value="按钮2"> <input type="button" value="按钮3"> <script> inps = document.getElementsByTagName("input") for(i=0;i<3;i++){ cur_inp = inps[i]; cur_inp.onclick = function () { alert(3) } } //所有的按钮点击都是输出3 </script> </body> </html>