JS ES6中setTimeout函数的执行上下文示例

本文重点探讨setTimeout延迟执行函数内部的执行上下文机制，旨在为读者提供清晰的学习参考与详细内容解析。

ES5中setTimeout的执行上下文

首先分析ES5环境下的情况：在ES5中，setTimeout内部回调函数的执行上下文被设定为全局上下文。具体示例如下：

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

//输出的结果为42

从上述代码可以看出，被setTimeout延迟执行的函数内部，this关键字指向的是全局作用域，即该函数的执行上下文为全局上下文。

ES6箭头函数中的执行上下文

其次考察ES6环境：在ES6的箭头函数中，如果setTimeout内部执行的是箭头函数，那么该函数的执行上下文将绑定为定义该箭头函数的外层函数。

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

//这次输出的是21

总结

核心总结如下：

由于ES6规定箭头函数的this指向定义该箭头函数所在的函数，因此这里箭头函数内部的this被固定绑定为调用log.call时传入的对象{id:21}。

以上就是本文的全部内容，希望这些解析能对大家的学习或工作有所帮助。如有任何疑问，欢迎留言交流，感谢支持。