09-第九章 作用域 js预解析 闭包

一、作用域

top 和 left 在全局作用域是关键字，在函数作用域不是关键字

作用域：脚本的有效范围，作用范围。分两大类：全局(script)和局部（function ）

全局(script)域

1、直接定义在script标签下的变量及函数，他们都作用在一个域，全局作用域，so..

    <script>
        var a = 123;
        alert( window.a );  //123
        function abc(){}
        alert( window.abc );  //function abc(){}
    </script>

2、直接定义在script标签下的变量 称之为全局变量,script标签下的函数，称之为全局函数

3、全局变量及函数 都是window的一个属性,都能通过window.变量名访问

    <script>
        var a = 123;
        alert( window.a );//123
        function abc(){}
        alert( window.abc );//function abc(){}
    </script>

局部（function ）域

任何一个function(){},都会开启一个局部作用域，
定义在function(){} 内部的变量称之为 局部变量

        var a = 20;
        function fn(){
            alert(a);
        }
        //20

4、作用域链 ：局部作用域内部可以访问父级作用域变量及全局作用域变量，也可以访问父级的函数，及全局函数 ( 往上爬 )

        function fn(){
            var a = 10;
        }

5、局部变量会覆盖父级（全局）变量，函数亦如此

        var a = 10;
        function fn(){
            var a = 20;
            alert( a );  //20
        }

6、变量没有声明，直接赋值，也会泄露成为顶层对象的属性！可以在不用的js文件访问到

<script>
        a = 10;
</script>

<script>
        console.log(a)  //  10
</script>

7、delete可以删除没有定义的泄露的变量，不能删除申明过的变量

        let a = 1;
        b = 2;
        delete a;
        delete b;
        console.log(a)  //  1
        console.log(b)  //  b is not a defined

8、在函数里面开启严格模式，函数不是任何对象的属性的时候，默认 this 返回顶层对象，开启严格模式，返回 undefined

        function fn () {
            "use strict";       
            console.log(this)  //  undefined
        }
        fn()

9、严格模式下的 var 声明的不会存在变量提升行为，先使用后声明就报错

10、argument.callee() /kɔː'liː/ 被调用者 相当于调用自己本身

严格模式下的function不能使用argument.callee()会报错

        function fn () {
            "use strict";
            arguments.callee(); //  报错
        }
        fn()

11、开启严格模式 "use strict"

12、函数的 name 返回函数的名字

13、函数的 length 返回形参的长度 返回的 length 不包括带有 默认值的形参 和 剩余参数的形参

        function fn(a, b, c, d = 1, ...res) {
            
        }
        console.log(fn.length); //  3

二、javascript解析

javascript解析 即读取代码过程

javascript解析 是 致上而下
预解析:正式解析前的工作，预解析过程会出现 变量提升，函数提升

        function (){
            alert( b );  //undefined
            var b = 10 ;
        }

1、变量提升：var 声明的变量 在作用域内声明的变量会被提升到作用域的顶部，且对其赋值 undefined ,这个过程称之为变量提升，上面代码等同于下面

还可以访问父级的参数

        function (){
        var b = undefined；
        alert( b );//undefined
        var b = 10 ;
         }

2、函数提升：在作用域内的函数定义 函数会被提升到作用域的顶部，其值为其函数本身,这个过程称之为函数提升，上面代码等同于下面

        function (){
            alert( fn );  //function fn(){}
            //code....
            function fn(){}
        }

3、 var 和 函数 重名函数优先，留下函数，函数和函数重名 后面定义的覆盖前面的 - 后来居高

        alert(a);  //function a(){alert('a2');}
        var a = 123;
        function a(){
            alert('a1');
        }
        function a(){
            alert('a2');
        }
        a()  //报错
        alert(a);  //123

4、不会提升的函数：在作用域内的函数表达式函数不会被提升到作用域的顶部，so ~

    function (){
        alert( fn );  //undefined
        //code....
        var fn = function(){}
    }

5、return 一个匿名函数出去就是一个函数表达式，所以可以直接加括号执行

        function fn () {
            var a = 1
            return function (){
                console.log(1)
            }
        }
        fn()()  //  1

三、案例

        alert(a);   //  function a () { alert(20); }
        var x = 5;
        function a(){
            alert(x);
            var x = 10;
        }
        alert(x);   //  5
        alert(a);   //  function a () { alert(20); }
        var a  = 10;
        alert(a);   //  10
        function a(){
            alert( 20 );
        }
        alert(a);   //  10
        var a = 30;
        alert(a);   //  30
        var a = function a(){
            var a = 20;
            alert(a);   
        }
        alert(a);   //  function a () {var a = 20; alert(a);}
        a();    //  20
        alert(a);   //  function a () {var a = 20; alert(a);}

四、闭包

想保留之前的状态，又不想声明全局变量，又要是局部函数的变量，让下次调用基于前面的状态时，这时候可以使用闭包

1、js垃圾回收机制

js 中的 变量 函数 不再使用后，会被自动 js 垃圾回收机制回收

2、形成闭包条件

条件一： 函数内部嵌套函数
条件二： 内部函数引用外部函数的 变量 参数
使用 return 返回了 此内部函数,上面的 变量 和参数 不会被回收

function fn(x){
    var a = 5;
    function innerFn(){
        console.log(x);
        console.log(a);
    }
   return innerFn;
}
var c = fn(20);
c();// 20 //5

var 声明 实现输出当前点击的序号

闭包实现

        for (var i = 0; i < div.length; i++) {
            
            (function(idx) {
                div[idx].onclick = function() {
                    console.log(idx);
                }
            }(i))
        }

自定义标签属性

        for (var i = 0; i < div.length; i++) {
            div[i].flag = i;
            div[i].onclick = function() {
                console.log(this.flag);
            }
        }

闭包题

image.png

        /*
            1 undefined 对象属性我fun
            m = 1 fun(m, n)
        */
        function fun(n, x){
            console.log(x);
            return {
                fun: function(m){
                    return fun(m, n);
                }
            };
        }

        // var a = fun(0); // n = 0; // undefined
        // a.fun(1); // m = 1; n = 0 // 0
        /*
            执行期
                return fun(m, n);
        */
        // a.fun(2); // 0
        // a.fun(3); // 0

        var b = fun(0).fun(1).fun(2).fun(3); // undefined 0 1 2
        /*
            n = 0; x = undefined    answer：1、 undefined
            m = 1,  n = 0; / n = m = 1; x = n = 0   2、 0;
            m = 2,  n = 0; / n = m = 2; x = (实参(n) = 形参(n)) = 1 answer：3、1
            m = 3,  n = 2; / n = m = 3; x = (实参(n) = 形参(n)) = 2 answer：4、2
        */

        var c = fun(0).fun(1); // undefined 0
        /*
            n = 0; x = undefined    answer: 1、undefined
            return {}
            m = 1, n = 0
            answer: 2、0
        */

        c.fun(2); // 1
        /*
            m = 2, n = 1;
        */
        c.fun(3); // 1
        /*
            m = 3, n = 1
        */