深入理解jsavascript的作用域
一、 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函数作用域，所以，执行时会根据已经存在的作用域链去寻找。
其他例子 ：
function func() { for(i=0;i<3;i++){ setInterval(function () { console.log(i) },1000) } } //每秒输出3个3
<!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>
