JavaScript中作用域

什么是作用域？

        JavaScript 中有一个被称为作用域(Scope)的特性

        作用域是运行时代码中某些特点部分中变量，函数和对象的可访问性。

        换句话说，作用域决定了代码变量和其他资料的可见性。

   function fun() {
            let a = '内层变量'
            console.log(a);
        }
        fun()

         console.log(a);  //a is not defined

  从上面的例子可以体会到作用域的概念，变量a在全局作用域没有声明，所以在全局作用域下取值会报错。我们可以这样理解：作用域就是一个独立的地盘，让变量不会外泄、暴露出去。也就是说作用域最大的用处就是隔离变量，不同作用域下同名变量不会有冲突。

  ES6之前JavaScript没有块级作用域,只有全局作用域和函数作用域。

  ES6的到来,为我们提供了"块级作用域",可通过新增命令let和const来体现。

 JS三种作用域:

        全局作用域(全局变量):在函数外面let的变量

        局部作用域(局部变量):在函数里面let的变量

        块级作用域(块级变量):在分支或循环大括号中let的变量

 全局作用域/函数作用域  

       声明在函数内部的变量, 和全局作用域相反, 局部作用域一般只在固定的代码片段内可访问到。

       最常见的例如函数内部,所以在一些地方也会看到有人把这种作用域称为函数作用域。

    function outFun() {
            var a = '函数内部的变量';

            function innerFun() {
                console.log(a); //函数内部的变量
            }
            innerFun();
        }
        console.log(a); //a is not defined
        innerFun(); //innerFun is not defined
        outFun(); //   函数内部的变量

全局作用域

    在代码中任意地方都能访问到的对象拥有全局作用域。(即在全局作用域中定义的变量可以在任何地方使用)

    全局作用域在页面打开时创建,在页面关闭时销毁。

语法

   情况一:所有未定义直接赋值的变量自动声明为拥有全局作用域

        function Fun1() {
            a = '未定义直接赋值的变量';
            var b = '内层变量 '
        }
        Fun1();
        console.log(a); //未定义直接赋值的变量 
         console.log(b); //b is not defined

           注意:如果一个变量在声明的时候没有使用关键字。
           例如:num=10,此时这个变量无论写在哪里都是全局变量。
           但是这是非常不规范的，千万不要这么写，否则以后代码可能会出现bug。

   情况二:最外层函数和最外层函数外面定义的变量拥有全局作用域

        var A = '最外层变量'; //最外层变量

        function outFun() { //最外层函数
            var B = '最外层函数的内层变量'

            function innnerFun() { //内层函数
                var c = '内层函数的内部变量'
            }
        }

        console.log(A); //最外层变量
        console.log(B); //B is not defined 
        outFun()
        innerfun() //innerfun is not defined
        console.log(C); //C is not defined

   情况三:所有 window 对象的属性拥有全局作用域

      一般情况下，window 对象的内置属性都拥有全局作用域，例如 window.name、window.location、window.top 等等。

      全局作用域有个弊端：如果我们写了很多行 JS 代码，变量定义都没有用函数包括，那么它们就全部都在全局作用域中。这样就会 污染全局命名空间, 容易引起命名冲突。

// 张三写的代码中
var data = {a: 100}
 
// 李四写的代码中
var data = {x: true}

   这就是为何 jQuery、Zepto 等库的源码，所有的代码都会放在(function(){....})()中。因为放在里面的所有变量，都不会被外泄和暴露，不会污染到外面，不会对其他的库或者 JS 脚本造成影响。这是函数作用域的一个体现。

函数作用域

        声明在函数内部的变量，和全局作用域相反，局部作用域一般只在固定的代码片段内可访问到，最常见的例如函数内部。

       function fn() {
            var a = "1111";

            function fn1() {
                alert(2222);
            }
            fn1();
        }
        alert(a); //a is not defined (a未定义)
        fn1(); //fn1 is not defined  (fn1未定义)

作用域是分层的，内层作用域可以访问外层作用域的变量，反之则不行。

作用域链

     默认情况下,代码处于全局作用域(0级链),当声明一个函数之后就会开辟一个局部作用域(1级)。

      而函数里面又可以声明一个函数,又会形成新的作用域(2级),以此类推形成的结构称之为作用域链。

        // 0级
        let num = 10

        // 1级
        function fn1() {

            let num = 20;

            console.log(num);//20

            //2级
            function fn2() {

                console.log(num); //20
            }
            fn2()
        }
        fn1()  // 20 20
        console.log(num) //10

  变量访问规则:就近原则:

         当你在一个作用域访问变量的之后,首先会看当前作用域有没有声明。

        如果有则访问。没有则往上级作用域查找,有没有声明。

        有则访问，没有则继续往上。

         直到作用域最顶端0级,如果还没有找到,则程序报错。