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


Posted in Javascript onApril 27, 2017

本文介绍的是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}。

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
js 3秒后跳转页面的实现代码
Mar 10 Javascript
复制网页内容,粘贴之后自动加上网址的实现方法(脚本之家特别整理)
Oct 16 Javascript
JS或jQuery获取ASP.NET服务器控件ID的方法
Jun 08 Javascript
javascript中caller和callee详解
Aug 10 Javascript
JS实现可点击展开与关闭的左侧广告代码
Sep 02 Javascript
javascript jquery对form元素的常见操作详解
Jun 12 Javascript
js与jquery正则验证电子邮箱、手机号、邮政编码的方法
Jul 04 Javascript
浅谈js多维数组和hash数组定义和使用
Jul 27 Javascript
Js经典案例的实例代码
May 10 Javascript
Vue插槽原理与用法详解
Mar 05 Javascript
Element-Ui组件 NavMenu 导航菜单的具体使用
Oct 24 Javascript
解决VUE双向绑定失效的问题
Oct 29 Javascript
Vue实现购物车功能
Apr 27 #Javascript
js轮播图透明度切换(带上下页和底部圆点切换)
Apr 27 #Javascript
Angular.js中定时器循环的3种方法总结
Apr 27 #Javascript
浅谈js使用in和hasOwnProperty获取对象属性的区别
Apr 27 #Javascript
微信小程序 wx:for的使用实例详解
Apr 27 #Javascript
微信小程序 动态传参实例详解
Apr 27 #Javascript
微信小程序 本地数据读取实例
Apr 27 #Javascript
You might like
php cookies中删除的一般赋值方法
2011/05/07 PHP
PHP错误Allowed memory size of 67108864 bytes exhausted的3种解决办法
2014/07/28 PHP
PHP的命令行命令使用指南
2015/08/18 PHP
PHP+Ajax+JS实现多图上传
2016/05/07 PHP
Javascript调用XML制作连动下拉列表框
2006/06/25 Javascript
用js实现的页面关键字密度查询代码
2007/12/27 Javascript
JSON 学习之JSON in JavaScript详细使用说明
2010/02/23 Javascript
javascript dom 基本操作小结
2010/04/11 Javascript
js判断浏览器类型的方法
2013/08/07 Javascript
jquery删除提示框弹出是否删除对话框
2014/01/07 Javascript
javascript实时显示当天日期的方法
2015/05/20 Javascript
jQuery中 delegate使用的问题
2015/07/03 Javascript
JS实现从网页顶部掉下弹出层效果的方法
2015/08/06 Javascript
js点击文本框后才加载验证码实例代码
2015/10/20 Javascript
JS组件Bootstrap实现下拉菜单效果代码
2016/04/26 Javascript
三种带箭头提示框总结实例
2016/06/14 Javascript
jQuery ajax中使用confirm,确认是否删除的简单实例
2016/06/17 Javascript
ExtJs的Ext.Ajax.request实现waitMsg等待提示效果
2017/06/14 Javascript
Vue.js如何实现路由懒加载浅析
2017/08/14 Javascript
JavaScript 异步调用
2017/10/25 Javascript
springmvc接收jquery提交的数组数据代码分享
2017/10/28 jQuery
Vue监听滚动实现锚点定位(双向)示例
2019/11/13 Javascript
[07:40]DOTA2每周TOP10 精彩击杀集锦vol.4
2014/06/25 DOTA
[01:01:01]完美世界DOTA2联赛循环赛 GXR vs FTD BO2第一场 10.29
2020/10/29 DOTA
详解Python中DOM方法的动态性
2015/04/11 Python
深入解析Python设计模式编程中建造者模式的使用
2016/03/02 Python
使用Python进行二进制文件读写的简单方法(推荐)
2016/09/12 Python
Python实现的爬取豆瓣电影信息功能案例
2019/09/15 Python
python爬虫实现POST request payload形式的请求
2020/04/30 Python
如果让你测试一台高速激光打印机,你都会进行哪些测试
2012/12/04 面试题
财务部岗位职责
2013/11/19 职场文书
道路交通安全实施方案
2014/03/12 职场文书
责任胜于能力演讲稿
2014/05/20 职场文书
创建文明城市倡议书
2015/04/28 职场文书
2016关于预防职务犯罪的心得体会
2016/01/21 职场文书
新课程改革心得体会
2016/01/22 职场文书