大学生必备JS知识点:this指向问题和三种改变this指向(call,apply和bind)

最新推荐文章于 2023-06-26 16:49:37 发布

今天也在努力学

最新推荐文章于 2023-06-26 16:49:37 发布

阅读量166

点赞数

文章标签： javascript vue.js 开发语言

本文链接：https://blog.csdn.net/m0_62927182/article/details/124767300

版权

1.this指向的几种情景

1.1 this在全局中是window

<script>
   //第一种情况 this在全局中 指向的是window
   console.log(this)  
</script>

1.2 this在function f1()中 f1是谁 this指向谁

   function f1(a){
       console.log(this) //window
   }
   f1(2)
   var o = {
        a: 10,
        b: {
            a: 12,
            fn: function() {
                console.log(this.a); //   结果为多少    undefined   
                console.log(this); //     结果为多少   window
            }
        }
    }
    var j = o.b.fn;
    j();

1.3 事件绑定的function函数的this

<body>
    <button id="btn"> 点击 </button>
</body>

<script>
   var btn1 = document.querySelector('#btn')
   btn1.onclick = function() {
      console.log(this) //就是btn1标签
}

</script>

1.4 事件绑定的箭头函数的this指向window

<body>
    <button id="btn"> 点击 </button>
</body>

<script>
   var btn1 = document.querySelector('#btn')
   btn1.onclick = ()=> {
      console.log(this) //window
}

</script>

1.5 定时器 this如果是匿名函数，那么this指向window

<script>
 setTimeout(() => {
        console.log(this); //window
    }, 123);
</script>

1.6 通过new Function 来定义的函数 this指向window

var f2 = new Function("var a=10; var b=20; console.log(this);return a+b;")
    f2() //window

1.7 如果回调函数是箭头函数，箭头函数的this指向的是上下文的this

<body>
    <button id="btn"> 点击 </button>
</body>
<script>
   var btn1 = document.querySelector('#btn')
   btn1.onmouseenter = function() {
        setInterval(() => {
            console.log(this); //指的是上下文的this 
        }, 1000)
    }
</script>