this备份上下文

最新推荐文章于 2024-10-18 11:12:30 发布

web大菜鸡

最新推荐文章于 2024-10-18 11:12:30 发布

阅读量126

点赞数

分类专栏： JavaSsript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_53066188/article/details/124454115

版权

JavaSsript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

首先我们看一段代码

<div  id="all" class="all">
        <div id="box1" class="box"></div>
        <div id="box2" class="box"></div>
        <div id="box3" class="box"></div>
    </div>


  function setColorRed(){
            setTimeout(function(){  //延时器调用为windowd对象,window设置样式()
                this.style.backgroundColor = 'red';
            },2000)
        
        }

        let box1 = document.getElementById('box1');
        let box2 = document.getElementById('box2');
        let box3 = document.getElementById('box3');


        box1.onclick = setColorRed; //只要点击事件函数就会执行无需调用函数
        box2.onclick = setColorRed;
        box3.onclick = setColorRed;

这段程序最后执行会报错,因为是延时器调用的,最后this指向为window，window.样式肯定error。

改进

function setColorRed(){
            let self = this;
            setTimeout(function(){  //延时器调用为windowd对象,window设置样式()
                self.style.backgroundColor = 'red';
            },2000)
        
        }

        let box1 = document.getElementById('box1');
        let box2 = document.getElementById('box2');
        let box3 = document.getElementById('box3');


        box1.onclick = setColorRed; //只要点击事件函数就会执行无需调用函数
        box2.onclick = setColorRed;
        box3.onclick = setColorRed;

当点击事件函数执行的时候,this指向dom元素保留到self当中去,因为在延时器中this指向的是全局对象,用备份的this改变样式,而不是受到延时器this为全局对象所影响到.