以setTimeout为例，如何用bind和箭头函数改变this指向

最新推荐文章于 2024-04-23 20:50:49 发布

Elylicery

最新推荐文章于 2024-04-23 20:50:49 发布

阅读量1.5k

点赞数 2

分类专栏：问题文章标签： javascript

本文链接：https://blog.csdn.net/sinat_38368658/article/details/109388351

版权

问题专栏收录该内容

19 篇文章

订阅专栏

本文通过一个setTimeout的例子，深入解析JavaScript中this的指向问题。在点击按钮的场景下，分析了this默认指向window的情况，以及如何使用bind和箭头函数来改变this的指向，确保其在异步执行时仍能绑定到预期的对象。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先先明白一个定义：this是指对当前对象的引用

案例

对于如下结构
在这里插入图片描述

<body>
        <h1>Hello ECMAS cript</h1>
        <button id="btn">点我</button>
        <script src="static/2-1.js"></script>
    </body>

代码1

let oBtn = document.querySelector('#btn');
oBtn.addEventListener('click',function(){
  console.log(this);
})

this指的是对当前对象的引用，btn绑定的click事件，所以当前引用应该是btn

当点击按钮时，会看到

在这里插入图片描述

代码2

现在有一个定时器，希望点击后一秒再输出this，我们根据该需求编写如下代码：

let oBtn = document.querySelector('#btn');
oBtn.addEventListener('click',function(){
  setTimeout(function(){
    console.log(this);
  },1000)
})

当点击按钮时，会看到
在这里插入图片描述

可以看到this指向了window，说明当前对象是window，指的是调用的对象，setTimeout是window的一个方法，即上述代码与window.setTimeout(function(){ console.log(this); },1000)等价，所以setTimeout里面的this就指向了window

代码3

但是我们想要获取到obtn对象，在ES5里有3个方法可以改变this指向：即 call apply 和bind。这里使用bind （因为all和apply会让该方法马上执行）。bind里的参数表示希望当前里面的这个作用域指向谁，bind里的参数就写它。（bind里的this指的是oBtn，传递进去后，setTimeout的this就指的是obtn）

let oBtn = document.querySelector('#btn');
oBtn.addEventListener('click',function(){
  setTimeout(function(){
    console.log(this);
  }.bind(this),1000)
})

当点击按钮后，打印出

在这里插入图片描述

捋一下上面的关系：

在这里插入图片描述

代码4

除了使用bind函数改变了this指向，我们还可以使用ES6的箭头函数，代码如下：

let oBtn = document.querySelector('#btn');
oBtn.addEventListener('click',function(){
  console.log(this);
  setTimeout(()=>{
    console.log(this);
  },1000)
})