Javascript 笔记与总结（1-1）作用域

以语言的角度学习 Js 的底层原理（与 DOM 无关）：① 作用域链 ② 词法分析 ③ 闭包 ④ 面向对象（原型链）

① 作用域链

例1

<script>
    var c = 5;
    function t1(){
        var d = 6;
        function t2(){
            var e = 7;
            alert(c + d + e);
        }
        t2();
    }
    t1();
</script>

弹出：18

首先在函数内寻找变量，如果寻找不到，则往外层寻找，直到全局（window）区域。

 

例2

<script>
    var c = 5;
    function t1(){
        var d = 6;
        function t2(){
            var e = 7;
            var d = 3;
            alert(c + d + e);
        }
        t2();
    }
    t1();
</script>

弹出：15

寻找变量的顺序是由内向外，变量 d 首先找到了 3 ，从而不会继续向外曾寻找变量 d 。

 

例3

<script>
    alert(window.d);
    alert(window.e);

    function t(){
        d = 5;
        var e = 6;
    }
    t();
    
    alert(window.d);
    alert(window.e);    
</script>

依次弹出：undefined，undefined，5，undefined

d 没有加 var ，仅仅是一个赋值操作，寻找 t 域内的函数，没找到，继续寻找 → window，widow.d = 5（第 3 个 alert）

var 是在函数运行的上下文中，声明一个变量，如果不加 var，则是赋值操作，但不要狭隘地理解为 声明了一个全局变量（见例4）。

 

例4

<script>
    function t1(){
        var d;
        function t2(){
            d = 5;
            e = 6;
        }
        t2();
    } 
    t1();
    console.log(d);
    console.log(e); 
</script>

console 中打印出：Uncaught ReferenceError: d is not defined

如果只

 console.log(e); 

则打印出 6

t2 内部没有 d 变量，仅仅是赋值操作，往外层寻找 d 变量，在t1 函数中找到了，于是把变量 d 的值赋给了 5；

e 也仅仅是赋值操作，并没有相应的变量，因此往外找变量，直到找到最外层（window），还是没有找到，只有 window.e = 6

 

如果

console.log(window.d);
console.log(e); 

则打印出：

undefined
6

注意区别：以 window.*** 引用全局变量时，如果寻找不到，则作为某个属性不存在而返回 undefined；若直接以 *** 引用某变量，寻找不到则是报 *** is undefined 错误。

 

 

例5（极容易出错又极基础的面试题）

<script>
    var str1 = 'global';
    function t1(){
        console.log(str1);
        console.log(str2);
        str2 = 'local';
    }
    t1();
</script>

打印出：

global
Uncaught ReferenceError: str2 is not defined

【分析】：

第 4 行在执行时，在 t1 内寻找 str1，没有，于是在 window 上寻找 str1，找到，因此打印'global'

第 5 行在执行时，在 t1 内寻找 str2，没有，于是在 window 上寻找 str2，没有，因此报 str2 is undefined 错误

第 6 行（由于第 5 行出错，实际上执行不到这里），才把全局的 str2 赋值（window.str2 = 'local'）

 

例6（例5 基础上修改：str2 前加 var）

<script>
    var str1 = 'global';
    function t1(){
        console.log(str1);
        console.log(str2);
        var str2 = 'local';
    }
    t1();
</script>

打印出：

global
undefined

加了 var ，则声明了一个变量。

【分析】：

js 代码自上而下执行，但是js 代码的整体运行分：① 词法分析 和 ② 运行期，

在自上而下执行之前，先有词法分析过程。

在该例中

第 1 步：分析t1 函数：

t1{

　　var str2  //分析出 t1 内有 str2 局部变量。此时只是分析有改变量，并没有赋值（未执行），因此 str2 的值是undefined

}

第 2 步：执行 t1 函数：

console.log(str1);    // global

console.log(str2);    // undefined

str2 = 'local';         // 此时str2 的值为 'local'