闭包、函数中的this指向、定时器语法

this关键字：

         this是一个使用在作用域内部(块级作用域、函数作用域、全局作用域)的关键字

         this关键字是函数声明时自动生成的一个内部对象,只能在函数内部使用总指向调用它的对象

             (全局很少使用，大部分在函数内部使用)

       this指向：

       根据运行时的不同，this指向的对象有所区别

      在绝大多数情况下，函数的调用方式决定了this的值

      浏览器环境、全局环境下使用this：this指向window对象

        console.log(this); // window

        console.log(this === window); // this

   在函数中使用this：

   不管函数怎么定义，不管函数在哪定义，只看函数的调用(箭头函数除外)

<script>

        // 在函数中使用this：

        // 不管函数怎么定义，不管函数在哪定义，只看函数的调用(箭头函数除外)

       

        // 普通函数(直接调用/全局调用)：this指向window

        // 函数名()

        function fn() {

            console.log(this); // window

        }

        fn() // 普通调用，this指向window

        // 定时器函数:this指向window

        // setTimeout(function(){},0)

        // setInterval(function(){}，0)

        setTimeout(fn,0) // 把fn函数当作定时器处理函数使用

        // 自执行函数: this指向window

        // (function(){})()

        // 以上都是全局函数，this

    </script>

 定时器：

<script>
        //【setTimeout和setInterval的区别】
        // timeout:(体育比赛中的)暂停;超时;
        // interval: 间隔;间隙。

        // 使用setTimeout()开启的定时器,“时间”一到代码就会执行。
        // 即用来指定某个函数或某段代码在多少毫秒之后执行。

        // 使用setInterval(()开启的定时器,“时间间隔”一到代码就会执行一次。
        // 即每隔一段时间执行一个函数。 
        setInterval(function(){
            console.log(4);
        },1000)

        // 使用clearTimeout(()和clearInterval(()可以清除定时器。

        // 【题目:最后的打印顺序是什么?】
        // 第一种情况: console.log(1);
        // setTimeout(function(){
        //     console.log(2);
        // },10)
        // console.log(3);
        // 第二种情况:
        console.log("A");
        setTimeout(function(){
            console.log("B");
        },0)
        console.log("C");

        // setTimeout指定的代码,必须等到本次执行的所有同步代码都执行完,才会执行。
    </script>

闭包：

什么是闭包？

闭包就是有权访问另一个函数作用域中变量的函数可以理解为：

1.闭包是定义在函数中的函数

2.闭包能访问包含函数的变量

3.即使包含函数执行完了, 被闭包引用的变量也得不到释放

<script>

        // 闭包(closure):闭包是一种代码形式，内部函数访问外部函数的局部变量。

        //在JS中，每当创建一个函数，闭包就会在函数创建的同时被创建出来，作为函数内部与外部连接起来的一座桥

        // 举例:js函数A里面有一个函数B,函数B访问了函数A里面定义的局部变量,此时就产生了闭包。

        //      变量所在的函数就是闭包函数,这里A就是闭包函数。

        // 外部函数

        function outer(){

            // 外部函数中的局部变量

            let n =10

            // 内部函数

            function inner(){

                // 内部函数访问外部函数的局部变量

                console.log(n);

            }

            // 将内部函数return出去，这样外部才可以调用

            return inner

        }

        let fn =outer();

        console.log(fn);

       

        fn()

    </script>

闭包的作用

作用：解决了变量污染问题,让变量函数被保护起来

// 代码演示

        let count = 0;

        setInterval(function (){

            console.log(count++);

        },1000)

        // 以上代码中的count是一个使用频率

        // 为了避免和其他位置的代码冲突,可以再使用一个函数把以上的代码包裹起来,起到保护作用。

        function fn(){

            let count = 0

            setInterval(function(){

                console.log(count++);

            },1000)

        }

        fn()

        // 以上代码中,setInterval函数与count构成了闭包

        function fn(){

            let count = 0

            function add(){

                console.log(count++);

            }

            setInterval(add,1000)

        }

        fn()

        // 以上代码中,add+count构成了闭包

 

总结:一个函数内使用了外部的变量,那这个函数和被使用的外部变量一起被称为闭包结构

 在实际开发中,通常会再使用一个函数包裹住闭包结构,以起到对变量保护的作用

作用2：

<script>

        // 可以延长变量的生命周期

        // 变量的声明周期:

        // 全局变量:从声明开始 直到 页面关闭

        // 局部变量:从声明开始 直到 函数执行结束

        // 【全局变量】

        // 全局变量n 写在函数外面

        let n = 10;

        function ck(){

            console.log(n);

        }

        // 函数内部可以访问到全局变量

        ck() //10

        // 【局部变量】

        // function outer(){

            // 局部变量:特点1-只能在函数内部访问

            // 特点2-函数执行结束后就会被销毁

            let b = 20;

            // 内部访问局部变量V

            console.log(b); //20

        //  }

        // outer();

        // 函数作用域外,访问局部变量x

        // console.log(b);

    </script>

作用3：

<script>

        // 提供了有限的访问权限

        function data(){

            let age = 18

            // 读取数值

            function getAge(){

                return age

            }

            // 设置数据

            function setAge(n){

                // 在赋值时，所赋的值进行合理的校验

                if(n>0 && n<100){

                    age = n

                }

            }

            // 返回一个对象到外部 对象带着两个内部函数

            return {

                getAge:getAge,

                setAge:setAge

            }

        }

        let op = data();

        op.setAge(80)

        console.log(op.getAge());

    </script>