随笔 - 326, 文章 - 0, 评论 - 0, 阅读 - 16万

错误代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    div {
      width: 200px;
      height: 200px;
      background: #58a;
    }
  </style>
</head>
<body>
  <div id="ad"></div>
  <script>
    let ad = document.querySelector("#ad");
    ad.addEventListener("click",function(){
      setTimeout(function(){
        console.log(this);
        this.style.background = "red";
      },1000)
    })
  </script>
</body>
</html>

运行结果:

报错,原因:输出this的结果window,表名当前的this是执行window的

解决方案一:

使用_this保留当前事件下的this,代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    div {
      width: 200px;
      height: 200px;
      background: #58a;
    }
  </style>
</head>
<body>
  <div id="ad"></div>
  <script>
    let ad = document.querySelector("#ad");
    ad.addEventListener("click",function(){
      let _this = this;
      setTimeout(function(){
        _this.style.backgroundColor = "red";
        // this.style.background = "red";
      },1000)
    })
  </script>
</body>
</html>

解决方案二

使用箭头函数,原因是箭头函数不绑定this,它会捕获其所在（即当前定义的位置）中的this值,作为自己的this值,代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    div {
      width: 200px;
      height: 200px;
      background: #58a;
    }
  </style>
</head>
<body>
  <div id="ad"></div>
  <script>
    let ad = document.querySelector("#ad");
    ad.addEventListener("click",function(){
      setTimeout(() =>{
        this.style.backgroundColor = "red";
      },1000)
    })
  </script>
</body>
</html>