ES6中setTimeout函数的执行上下文

最新推荐文章于 2023-09-21 14:40:08 发布

原创最新推荐文章于 2023-09-21 14:40:08 发布 · 2.3w 阅读

CC 4.0 BY-SA版权

文章标签：

12 篇文章

订阅专栏

本文探讨了在ES5和ES6中使用setTimeout时this关键字的行为差异。通过具体示例展示了ES5中setTimeout内的函数执行上下文为全局上下文，而ES6的箭头函数则保留了定义时的上下文。

简介：setTimeout，延迟执行函数里的执行上下文

（1）ES5中，setTimeout里面的函数的执行上下文为全局上下文，举例来说：

function log(){
  setTimeout(function(){console.log(this.id)},100)
}
var id=42
log.call({id:21})

//输出的结果为42

我们可以看到setTimeout，被延迟执行的函数，里面的this，指向的是全局作用域，也就是这个函数的上下文为全局上下文。

（2）在ES6的箭头函数中，setTimeout里面，如果执行了一个箭头函数，那么这个函数的执行上下文为定义这个箭头函数所在的函数。

function log(){
  setTimeout(()=>{
     console.log(this.id)
  },100)
}
var id=42;
log.call({id:21})

//这次输出的是21

总结：

因为ES6中，箭头函数的this，规定的指向定义这个箭头函数所在的那个函数。于是这里箭头函数里面的this,就固定bind了{id:21}。