js重点——作用域——简单介绍(一)

　　一、作用域

　　　　定义：在js中，作用域为变量，对象，函数可访问的一个范围。

　　　　分类：全局作用域和局部作用域

　　　　全局作用域：全局代表了整个文档document,变量或者函数在函数外面声明，那它的就是全局变量和全局函数。之所以全局变量在这个文档的任何位置都可以访问是因为它是window下的属性，window是一个全局对象，它本身在页面中任何位置可以用，同样它身上的属性在页面的任何位置也是可以用的。

　　　　声明全局作用域的方法：把变量或者是函数放在函数外声明或者变量不用var声明直接赋值(不管是在函数内还是函数外它都是一个全局变量).要避免使用全局变量，声明变量的时候一定要加上var.

    <script>
        var x = 3;  //在函数外，全局变量
        function fn1() {
            var c = 10;  //函数内，局部变量，它的范围仅限于该函数，函数运行完成后，函数内定义的变量将会自动销毁
            c += 3;
            a=18;
            console.log(c); //13 

            x += 10; // 在函数内修改了全局变量后，全局变量就完成了修改，外面调用时，也是修改后的
        }
        fn1();
        console.log(x, "______"); //13 "______"

        b=20;
        console.log(a);// 18  没有用var声明，虽在函数内声明但也是全局变量
        console.log(window);  //可以看到a,b,x
    </script>
    <script>
        console.log(x,a); //13 18  在这也可以访问
    </script> 

　　　　局部作用域：变量在函数内声明，变量为局部作用域。只能在函数内部访问。所以不同函数可以使用相同名称的变量。函数执行完后局部变量会自动销毁。函数可以嵌套，嵌套的函数可以访问父函数里的内容。

　　　　声明局部作用域的方法：var 变量，function 函数名(){}.

    <script>
        function fn() {
            var a = 20;
            var b = 30;
            function fn1() {
                console.log(a + b); //50 嵌套函数可以访问父函数里的内容
            }
            fn1();
        }
        fn();
        // console.log(a,b); //报错  a,b是局部变量，在外面访问不到
        // fn1();//报错  fn1是局部函数，在外面也是问不到的

        //全局变量与局部变量重名
        var s1 = 10;
        function fn1() {
            var s1 = 20;
            s1 += 20;
            window.s1 += 10;  //如果全局变量的名称在函数中和局部变量相同，想要调用全局变量时要在前面加上window前缀
            console.log(s1);  //40
        }
        fn1();
        console.log(s1); //20  在函数内全局变量进行了改变

        var s2 = 10;
        function fn2() {
            console.log(s2); //undefined  函数当中有定义局部变量，函数作用范围内所有位置都是这个局部变量，　　　　　　　　　　　　　　　　　//此函数中下文定义了局部变量s2，但是这里是在定义之前调用的，所以s2的值为undefined
            s2 += 10;
            console.log(s2); //NaN  undefined加数字为NaN
            var s2 = 20;
        }
        fn2();
    </script>

　　二、作用域链

　　　　可以简单的将作用域链理解为变量与函数的查找规则。

　　　　查找规则：如是一个函数需要用到一个变量，那它会先在自己的作用域里去找这个变量，如果自己有那它就直接用自己的，如果自己没有，那它就会一层层向外面找，直到找到外层的变量，找到后就用外层的变量（只会向外，不会向内找）。

    <script>
        var a = 20;
        function fn() {
            console.log(a); //20 先在自己的作用域找，没找去父级身上找，在父级身上找到a为20
        }
        fn();

        function fn1() {
            var a = 13
            console.log(a) //13  //自己作用域里的a为13
        }
        fn1();
    </script>