变化莫测的this指向

最新推荐文章于 2024-07-26 20:46:33 发布

WoSNBBcsdn

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量130

点赞数

分类专栏：学习文章标签： js javascript html

本文链接：https://blog.csdn.net/wosnbbcsdn/article/details/106430276

版权

学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  .box,
  .box1 {
    width: 100px;
    height: 100px;
    background: #09f;
    position: relative;
    left: 0;
    transition: 1s;
  }
</style>

<body>
  <div class="box"></div>

  <div class="box1"></div>
  <script>
    let box = document.querySelector('.box');
    box.onclick = move;
    let box1 = document.querySelector('.box1');
    box1.onclick = move;

    function move() {
      this.style.left = '100px';
      console.log(this)
      // 
    }
    // move();
    // 函数自调用指向的是window
    // 这只是非严格模式下
    // 严格模式下是undefined;
    // 严格模式下window.move() 指向window
    var abc = 10;
    //  函数或者变量都是存在在window下的
    // 变量放在obj里面管理起来，减少内存消耗
    var obj = {
      a: 10,
      b: function () {
        console.log(this);
      },
      c:{
        fn:function(){
          console.log(this);
        }
      }
    }
    obj.b(); //指向obj 这个时候函数只指向上一层object
    window.obj.b(); //指向obj 这个时候函数只指向上一层object
    obj.c.fn();
    var abc = obj.c.fn;
    abc();
    // window.abc(); 调用环境为全局
    // 函数内部的this,只有在被调用的时候才知道其指向
    // 上面这种调用是把c下的fn取出来放在window上面
    // 所以这里是window
  </script>
</body>

</html>