JavaScript 【变量、作用域和内存问题】执行环境及作用域

以下大部分为学习《JavaScript 高级程序设计》》(第 3 版) 所做笔记。

目录：

1、了解执行环境及作用域

2、没有块级作用域

　　① 声明变量

　　② 查询标识符

 

了解执行环境及作用域

　　执行环境有时也称环境，执行环境定义了变量或函数有权访问其他数据，决定了他们各自的行为。　　

　　每个执行环境都有一个变量对象（variable object），环境中定义的所有变量和函数都保存在这个对象中，这个对象我们无法通过代码去访问它。

　　全局执行环境是最外围的一个执行环境，根据 ES 实现所在的宿主环境不同，表示执行环境的对象也不一样。在 Web 浏览器中，全局执行环境被认为是 window 对象，因此所有全局变量和函数都是作为 window 对象的属性和方法创建的。如下：

<script>
    var a = "xiaoxu";
    function sayA(){
        return a;
    }
    //在Web浏览器中，所有全局变量和函数都是作为 window 对象的属性和方法创建的
    console.log( window.a );        //输出：xiaoxu
    console.log( window.sayA() );   //输出：xiaoxu
</script>

 　　某个执行环节中的所有代码执行完毕后，该环节被销毁，保存在其中的所有变量和函数定义也随之销毁（全局执行环境直到应用程序退出时才会销毁，例如关闭网页或浏览器时）。

　　每个函数都有自己的执行环境。当执行流进入一个函数时，函数的环境就会被推入一个环境栈中。而在函数执行之后，栈将函数执行之后，栈将其环境弹出，把控制权返回给之前的执行环境。

　　当代码在一个环节中执行时，会创建变量对象的一个作用域链。作用域链的用途是保证对执行环境有权访问的所有变量和函数的有序访问。作用域链的前端，始终是当前执行的代码所在环境的变量对象。如果这个环境是函数，则其活动对象作为变量对象。活动对象在最开始时只包含一个变量，即 arguments 对象（ 这个对象在全局环境中是不存在的 ）。作用域链中的下一个变量对象来自包含（外部）环境，而再下一个变量对象则来自下一个包含环境。这样，一直延续到全局执行环境；全局执行环境的变量对象始终是作用域链中的最后一个对象。

　　函数参数也被当作变量来对待，因此其访问规则与执行环境中其他变量相同。

<script>
    var color = "black";
    function changeColor(){
        if( color === "blue" ){
            color = "pink";
        }else{
            color = "white";
        }
    }
    /*changeColor() 的作用域链包含 2 个对象：它自己的变量（其中定义着 arguments 对象）和全局环境的变量对象.可以在函数内部访问 color，
    就是因为可以在这个作用域中找到它。*/
    changeColor();
    console.log( color );   //输出：white
</script>

　　在局部作用域中定义的变量可以在局部作用域中与全局变量互换使用。

<script>
    var num1 = 1;
    function a(){
        var num2 = 2;
        function b(){
            var tempNum = num1;
            num1 = num2;
            num2 = tempNum;
            //这里可以访问 num1、num2、tempColor
        }
        //这里可以访问 num1、num2，不能访问 tempColor
        b();
    }
    //这里只可以访问 num1
    a();
</script>

　　以上代码涉及 3 个执行环境：全局环境、a（）的局部环境和b（）的局部环境。

　　全局环境有一个变量 num1 和一个函数 a( );

　　a( ) 的局部环境中有一个名为 num2 的变量和一个名为 b( ) 的函数。

　　b( ) 的局部环境中有一个名为 tempColor 的变量。

　　下图表示特定的执行环境，其中，内部环境可以通过作用域链访问所有的外部环境，外部环境不能访问内部环境中的任何变量和函数。每个环境都可以向上搜索作用域链，以查询变量和函数名；但任何环境都不能通过向下搜索作用域链而进入另一个执行环境。

　　例如，b() 的作用域链中包含3个对象：b() 的变量对象、a() 的变量对象和全局变量对象。b（）的局部环境开始时会先在自己的变量对象中搜索变量和函数名，如果搜索不到则再搜索上一级作用域链。

 

立即执行函数代码执行完毕后，保存在其中的所有变量和函数定义也随之销毁，所以在全局访问不到立即执行函数里面的变量。

 例： 

(function(){
	var num = 100;
	(function(){
		console.log(num);	//100
	})()
})()
console.log(num);	//报错。ReferenceError: num is not defined

　　

 

没有块级作用域

　　其它类C语言中由花括号封闭的代码块都有自己的作用域（如果用 ES 的话来说，就是它们自己的执行环境），因而支持根据条件来定义变量。

　　但是，在 JS 中，if 语句中的变量声明会将变量添加到当前的执行环境中，不会在 if 语句执行完毕后就被销毁。对 JS 来说，由 for 语句创建的变量即使在 for 循环执行结束后，也依旧会存在于循环外部的执行环境中。

<script>
    if( true ){
        var a = 1;
    }
    console.log( a );   //输出：1

    for( var i=0; i<10; i++ ){
        var b = 1;
    }
    console.log( b );   //输出：1
</script>

 

声明变量

　　使用 var 声明的变量会自动被添加到最接近的环境中。在函数内部，最接近的环境就是函数的局部环境；在函数内部，最接近的环境就是函数的局部环境；在with语句中，最接近的环境就是函数环境。

　　如果初始化变量时没有使用 var 声明，该变量会自动添加到全局环境。

<script>
    function fnA(){
        var a = 1;
        return a;
    }
    fnA();
    console.log( a );   //报错：Uncaught ReferenceError: a is not defined
</script>

<script>
    function fnA(){
        a = 1;
        return a;
    }
    fnA();
    console.log( a );   //输出：1

 

查询标识符

　　当在某个环境中为了读取或写入而引用一个标识符时，必须通过搜索来确定该标识符实际代表什么。搜索过程从作用域链的前端开始，向上逐级查询与给定名字匹配的标识符。在搜索过程中，如果搜索到了定义这个变量的变量对象，则搜索会自动停止。

　　如下，调用 fn( ) 时会引用变量 num, 为了确定 num 的值，先搜索 fn() 的变量对象，查找是否包含一个名为 num 的标识符。如果没有找到，则搜索下一个变量对象（全局环境的变量对象），然后在那里找到了名为 num 的标识符。因为搜索到了定义变量 num 的变量对象，所以搜索过程结束。

<script>
    var num = 1;
    function fn(){
        return num;
    }
    console.log( fn() );    //输出：1
</script>

　　如下，在 fn() 变量对象中找到了包含名为 num 的变量对象，就不继续沿作用域链向上继续搜索了，搜索过程结束。

<script>
    var num = 1;
    function fn(){
        var num = 2;
        return num;
    }
    console.log( fn() );    //输出：2
</script>

    

　　任何位于局部变量 num 的声明之后的代码，如果不使用 window.num 都无法访问全局 num 变量。

<script>
    var num = 1;
    function fn(){
        var num = 2;
        console.log( num );         //输出：2
        console.log( window.num );  //输出：1
    }
    fn();   
</script>