JS中的作用域问题

JS解析器解析步骤

第一步：寻找代码中定义的变量，函数，参数（预解析，这也是在声明变量前使用变量不报错的原因）
第二部：逐行解读代码

Tips

1. 定义在script中的变量，称为全局变量，函数则称为全局函数，当变量名与函数名一致时会保留函数
2. 当有多个script时，先解析第一个，执行完毕后，再解析执行下一个
3. 函数调用时会启动新的JS解析器（函数内的解析器）
4. 作用域链：在函数作用域如果没有找到所需的变量，则向他的父级作用于查找，如果没有，一直查找到最外层的作用域，额，如果还没有那就报错
5. 在函数作用域和其父级作用域中都没找对某个变量的定义时，所以会在父级作用域中定义该变量（例如：var a = 2），这也就是隐式变量的创建，创建的变量为全局变量

理解了下面的练习，作用域这块就掌握的差不多了

练习1：

alert(a);//输出为函数体：function a(){alert(2);}
var a = 1;
function a(){
    alert(2);
}
alert(a);//1

预解析：
var a，function a，当变量名与函数名一致时会保留函数，a为函数
代码解析：
alert(a);此时a的值为预解析里a的值，即函数a
var a = 1;重新给a赋值为1
alert(a);此时a为1

练习2：

var a = 3;
alert(a);
function a(){
    alert(4);
}
alert(a);

预解析：
var a，function a，保留函数a
代码解析：
var a = 3；
alert(a);输出3
alert(a);输出3

练习3：

<script>
    var a = 1;
</script>
<script>
    alert(a);//1
</script>

当有多个script时，先解析第一个，执行完毕后，再解析执行下一个

练习4：

<script>
    alert(a);程序执行报错，因为找不到a
</script>
<script>
    var a = 1;
</script>

练习5：

var a = 1;
function fn(){
    alert(a);//undefined
    var a = 2;//局部变量
    alert(a);//2
}
fn();
alert(a);//1

预解析：var a，functiton fn
函数内预解析：var a，
代码解析：
var a = 1;
fn(){
alert(a);在函数内预解析里此时a的值为undefined
var a = 2;给a赋值为2，这个a为局部变量，在当前函数里有效
alert(a);输出局部变量2
}
alert(a);这个a为全局变量1

练习6：

var a = 1;
function fn(a){
    alert(a);//undefined
    var a = 2;//局部变量
    alert(a);//2
}
fn();
alert(a);//1

练习7：

//作用域链：在函数作用域如果没有找到所需的变量，则向他的父级作用于查找，如果没有，一直查找到最外层的作用域，额，如果还没有那就报错
var a = 1;
function fn(){
    alert(a);//1，局部解析器里找不到会往父级解析器里找
    a = 2;//全局变量中的那个a
    alert(a);//2
}
fn();
alert(a);//2

练习8：

var a = 1;//实参
function fn(a){//形参
    alert(a);//1
    a = 2;//形参值变为2，并不影响实参
    alert(a);//2
}
fn(a);
alert(a);//1

练习9：

function fn(){
    a = 2;//在函数作用域和其父级作用域中都没找到a，所以会在父级作用域中创建变量var = 2，这也就是隐式变量的创建，创建的变量为全局变量
    alert(a);//2
}
fn();
alert(a);//2

练习10：

fn();
function fn(){
    alert("hello");
}
fn();
var fn = function(){
    alert("interesting");
}
fn();
function fn(){
    alert("welcome");
}
fn();

预解析：
三个同名函数，解析时会保留最后一个，即输出"welcome"的那个
代码解析：
fn();当然是调用预解析里保留的那个，"welcome"
fn();乍一看，可能以为fn会被覆盖，然后输出"hello"，其实并没有，因为根本没有赋值语句
fn();这下他会被覆盖了，因为是var fn = function(){}，所以输出为"interesting"
fn();因为上一步的覆盖，所以还会输出"interesting"