关于JS中作用域的那些事儿

1、作用域

作用域：是指JavaScript中变量和函数的可访问性范围。

1.1、全局作用域

1. 概念：
   • 不被函数大括号{}包裹的部分：就是全局作用域
   • 全局作用域中声明的变量称为全局变量，全局变量：可以在任何位置被访问
   • 全局变量的生命周期是永久的——在程序中存在的周期是永久的
     • 永久：在程序打开后会创建一个window对象，全局变量会放在window对象上， 程序关闭时，window对象会被销毁，
     • 也就是：只要window对象在，那么全局变量就在，如果全局变量被删除了，那就是window对象被删除了，什么时候
     • 会删除全局变量：关闭页面，只要程序在，全局变量就在，相较于程序而言，全局变量的声明周期就是永久的
2. 示例：

 var a = 10;
 console.log( window );  // 此时的window就是window对象 => 如果要去控制台查看最好声明以a/b开头，方便查找位置

3. 全局变量弊端：
   • 全局变量虽然访问特性非常方便，但是，全局变量也有其缺点，全局变量的存在会让我们的程序更"重"，也就是占用的计算机资源会更多
   • 因为全局变量都会放在window对象上，变量越多，window对象越大，那么越大就会占据更多的性能，会导致程序变卡等等
   • 所以应该谨慎使用全局变量，尽可能多的使用局部变量

1.2、局部作用域

1. 概念：
   • 被函数大括号{}包裹的部分就是局部作用域
   • 局部作用域中，声明的变量称为：局部变量
   • 局部作用域只能在函数大括号{}中生效和访问，在外部无法正确访问
   • 局部变量的生命周期是临时的，临时—在函数执行时被创建，函数执行结束则立即被删除
2. 示例：

function foo(){
   var a = 10;       // 这个变量就是局部变量，可以在函数内部随意使用，但是在外部不能引用
   console.log( a );
}
foo();
console.log( a );     // 外部访问内部的a变量会直接报引用错误，也就是在全局作用域中，无法访问局部作用域里声明的变量    

3. 注意：函数的行参也是局部变量，只能在函数中使用
   • 示例：

function foo( a ){ // 这里的参数a相当于 var a ==> 和局部变量的特性相同，也就意味着，参数只能在函数中使用，在函数外是用不了的
    // 代码块
}

2、示例

在全局作用域声明的变量，局部作用域里是否可以引用

// 回答：可以，因为全局变量可以在任何位置被访问
//示例：
    var a = 30;
    function foo(){
        console.log( a ); // 这里可以正常获取到a的值
    }
    foo();

3、作用域变量访问规则

规则分类：访问规则 和赋值规则

3.1、访问规则

1. 解释：
   • 变量的访问规则也叫做：作用域的查找机制，这种访问规则，我们称为：作用域链
2. 规则内容：当想要获取一个变量的值时，这个行为叫做访问
   • 先在自己的作用域内部查找，如果有：就拿来使用;
   • 如果没有，就向上一级去查找， 如果有：就拿来使用;
   • 如果还没有，再继续向上一层查找，如果有：就拿来使用，以此类推…
   • 如果一直找到全局作用域了，还没有找到想访问的变量，就会报出错误
     • 错误类型：引用错误—变量 is not defined
3. 注意：
   • 作用域的查找机制：只能向上(向外)不能向下
4. 示例：

// 注意：子集函数是可以获取父级函数的变量值的
        var num = 100;
        function foo(){
            var num2 = 200;
            function foo2(){
                var num3 = 300;
                console.log(num3); // 在自己的作用域中查找，找到了变量num3，直接访问其对应的值 => 值为300;
                console.log(num2); // 在自己的作用域中查找，没有变量num2，向上级作用域查找，找到对应的值 => 200;
                console.log(num);  // 在自己的作用域中查找，没有变量num，向上级作用域查找，没有num，继续向上级查找到全局作用域，找到值 => 300
                console.log(a);    // 在自己的作用域中查找，没有变量a，向上级查找，也没有变量a，在向上级查找到全局作用域，还是没有，此时会报错
             }
            foo2();
        }
        foo();

5. 示例2：查找机制只能向上不能向下

function poo(){
    console.log( a ); // 这里是不能向下访问的，也就无法获取a的值
    function innerPoo(){
      var a = 10;
    }
}

3.2、赋值规则

1. 解释：
   • 赋值规则 =赋值运算
   • 当想要给变量赋值的时候，要先找到需要赋值的变量，然后再给这个变量赋值
2. 规则内容：
   • 先在自己的作用域内部查找，如果有：就直接赋值
   • 没有就去上一级作用域查找，如果有：就直接赋值
   • 如果还是没有，再去上一级作用域查找，以此类推…
   • 如果一直找到全局作用域都没，就直接把这个变量定义为全局变量，然后再赋值
     • 但是这种情况尽量不要发生，因为会有很多隐患
3. 示例：

function poo(){
   k = 10; // 在当前作用域查找，没有k变量，就会向上查找，但全局作用域中都未查找到这个变量，则s就会新创建一个变量k并赋值给它，此时k成为了全局变量
}
poo();
console.log( k ); // 此时在外层访问k这个全局变量是可以的，得到值为10

4、练习：判断变量a的值

var a = 10;
function poo(){
    var a = 20;
    console.log( a );  // 当前值为：20，因为优先访问内部的局部变量a
    function pooInner(){
        a = 30;
    }
    pooInner() 
    console.log( a ); // 值为：30，因为上面a = 30，优先赋值给内部的局部变量a
}
poo();
console.log( a );     // 值为：10，因为这里是直接在全局作用域访问的，所以它访问到的是全局变量a