一步步学习javascript基础篇（2）:作用域和作用域链

作用域和作用域链

js的语法用法非常的灵活，且稍不注意就踩坑。这集来分析下作用域和作用域链。我们且从几道题目入手，您可以试着在心里猜想着答案。

问题一、

if (true) {
    var str = "李四";
}
alert(str);//弹出值是？

问题二、

function add(num1, num2) {
    var sum = num1 + num2;
}
add(1,2);
alert(sum) //弹出值是？

问题三、

var str1 = "张三";
var str2 = "李四";
function fun1() {
    var str2 = "王五";
    var str3 = "郑六";
    alert(str1 + str2 + str3); //弹出值是？

} fun1();

问题四、

var num1 = 10;
function fun1() {
    alert(num1);
}
function fun2(fn) {
    var num1 = 12;
    fn();
}
fun2(fun1); //弹出值是？

js中没有块级作用域

答案一：

if (true) {
var str = "李四";
}
alert(str);

我们看到了，弹出值是”李四“。这说明了js中没有块级作用域（这和我们以前接触的其他语言不同）。不仅if里面是这样，for、while...等等都是这样。

如：

for (var i = 0; i < 10; i++) { }
alert(i);

js中只有函数作用域和全局作用域

我们只能从外层内层作用域访问外层作用域，而外层作用域不能访问内层作用域。

答案二：

function add(num1, num2) {
var sum = num1 + num2;
}
add(1,2);
alert(sum)

（没反映？因为报异常了。不信F12看）如此，我们是访问不到sum的。因为sun是属于add函数内的作用域。  我们只能从add函数内访问到全局作用域的变量值。

js中的作用域链

答案三:

var str1 = "张三 ";
var str2 = "李四 ";
function fun1() {
var str2 = "王五 ";
var str3 = "郑六 ";
alert(str1 + str2 + str3);
}
fun1();

str1取全局作用域、str3去fun1函数作用域的。这里有些疑惑的是str2了。这里就引入了作用域链。

一般我们都说，先从自己的作用域取变量，没取到然后去父作用域中取。这句话没错，不过有时候也会产生疑惑或是混淆。如答案四：

var num1 = 10;
function fun1() {
alert(num1);
}
function fun2(fn) {
var num1 = 12;
fn();
}
fun2(fun1);

“先从自己的作用域取变量，没取到然后去父作用域中取”，这里fun1的父作用域是全局作用域，而不是fn()调用时fun2中的作用域。所以我们可以把这句话改成“先从自己的作用域取变量，没取到然后去自定自己的地方的父作用域中取”。

暂且分析到这里了。后续如果有新的理解再补充进来。

---

注意：

• 当循环嵌套时千万不要忘记修改循环条件的变量名如：(这样就死循环了)

for (var i = 0; i < 4; i++) {
    //......
    //......
    for (var i = 0; i < 2; i++) {
        alert("ok")
    }
    //......
    //......
}

这是学习记录，不是教程。文中错误难免，您可以指出错误，但请不要言辞刻薄。

原文链接：http://haojima.net/zhaopei/513.html

本文已同步至目录索引：一步步学习javascript

欢迎上海“程序猿/媛”、"攻城狮"入群：【沪猿】229082941 入群须知