JS this与闭包详解-优快云博客

本文链接：https://blog.youkuaiyun.com/u010865433/article/details/49804773

JS中的this和闭包

this

this 指的是 function 运行时的上下文！
在JS中方法是一级对象！

this的简单使用和指定运行上下文

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript">
        var obj = {
            func:function(){
                console.info("此方法的this ---> " + this);
            }
        }
        //调用obj的func()方法
        //此时方法的this就是所属对象
        obj.func();

        var func2 = obj.func;
        //承接得到obj中方法
        //若无所属对象，则为window 宿主对象
        func2();


        console.info('call方法指定函数运行的上下文');

        //指定函数运行的上下文
        window.color = 'red';
        var obj1 = {
            color:'blue'
        }
        function sayColor() {
            console.info('this--> ' + this + ' color -->' + this.color);
        }

        //Function 对象的call方法,参数为可选参数
        //call(x，y1，y2...),x为指定函数的运行上下文，y1，y2为函数的实参
        sayColor.call(window);
        sayColor.call(obj1);


        console.info('apply方法指定函数运行的上下文');

        //Function 对象apply方法，跟两个参数，第一个为函数运行的上下文，后一个为实参数组
        function say(message) {
            //设置缺省值
            console.info((this.name ||'无名氏' )+' 说 '+ (message||'nothing'));
        }
        window.name = '窗口';
        function Person(name) {
            this.name = name;
        }
        var person = new Person('kan');

        say.apply(window,['看不见的笑，我怎么睡得着']);
        say.apply(person,['还有没有结果']);



    </script>
</head>
<body>
    <h1 style="text-align:center">Js中this</h1>
</body>
</html>

这里写图片描述

闭包

默认情况下，函数的执行的上下文和 调用它的函数的上下文 的相同，也可通过Function的bind方法改变函数的执行上下文！

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>动态时间</title>
    <script>
        window.onload = function () {
            //1.动态更新时间,全局函数默认this为window
            //var lableTime = document.getElementById("time");
            //console.info(lableTime);
            //function showTime() {
            //    console.info('function 的执行上下文 ' + this);
            //    //此时函数的执行的上下文和 调用函数setInterval 的上下文 的一样，都是window对象
            //    console.info(this);
            //    lableTime.innerHTML = new Date().toLocaleString();
            //}
            //setInterval(showTime,1000);

            //2.当函数的运行上下文为一个对象时

            var obj = {
                lableTime: document.getElementById("time"),
                showTime: function showTime() {
                    console.info('function 的执行上下文 ' + this);

                    console.info(this);
                    if (!!this.lableTime) {
                        this.lableTime.innerHTML = new Date().toLocaleString();
                    }
                }
            }
            //默认情况下，函数的执行的上下文和 调用函数setInterval 的上下文 的一样，都是window对象
            // setInterval(obj.showTime, 1000);
            //但是这里需要改变函数的上下文，调用Function的bind方法
            setInterval(obj.showTime.bind(obj), 1000);

        }
    </script>
</head>
<body>
    <h2 id="time" align="center"></h2>
</body>
</html>

错误解析

setInterval(obj.showTime, 1000);

因为showTime是对象obj的一个方法，所以它的默认this指向obj，而通过setInterval调用它，则它的this指向调用方法的this，即window，而window下面没有labelTime属性，所以程序出错，不能运行

这里写图片描述

修正，通过bind方法改变函数的运行上下文

 setInterval(obj.showTime.bind(obj), 1000);

这里写图片描述