JS中的this

来源：互联网发布：mac的dock怎么隐藏编辑：程序博客网时间：2024/05/22 07:59

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);

这里写图片描述

0 0