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 相关文章推荐
javascript tips提示框组件实现代码
Nov 19 Javascript
js实现上传图片之上传前预览图片
Mar 25 Javascript
脚本合并提升javascript性能示例
Feb 24 Javascript
Javascript实现多彩雪花从天降散落效果的方法
Feb 02 Javascript
使用window.prompt()实现弹出用户输入的对话框
Apr 13 Javascript
JavaScript中的acos()方法使用详解
Jun 14 Javascript
jquery UI Datepicker时间控件的使用及问题解决
Apr 28 Javascript
简单实现js上传文件功能
Aug 21 Javascript
vue脚手架搭建项目的兼容性配置详解
Jul 17 Javascript
在vue 中使用 less的教程详解
Sep 26 Javascript
微信小程序如何加载数据库真实数据的实现
Mar 04 Javascript
JavaScript实现与web通信的方法详解
Aug 07 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
2009/06/29 PHP
PHP simple_html_dom.php+正则 采集文章代码
2009/12/24 PHP
PHP上传文件参考配置大文件上传
2015/12/16 PHP
Yii清理缓存的方法
2016/01/06 PHP
PHP7新增运算符用法实例分析
2016/09/26 PHP
利用PHP访问带有密码的Redis方法示例
2017/02/09 PHP
浅析PHP 中move_uploaded_file 上传中文文件名失败
2019/04/17 PHP
Javascript valueOf 使用方法
2008/12/28 Javascript
JQUERY设置IFRAME的SRC值的代码
2010/11/30 Javascript
放弃用你的InnerHTML来输出HTML吧 jQuery Tmpl不详细讲解
2013/04/20 Javascript
使用javascript获取页面名称
2014/12/23 Javascript
最常见的左侧分类菜单栏jQuery实现代码
2016/11/28 Javascript
解析JavaScript模仿块级作用域
2016/12/29 Javascript
详解Web使用webpack构建前端项目
2017/09/23 Javascript
详谈vue+webpack解决css引用图片打包后找不到资源文件的问题
2018/03/06 Javascript
Vue使用mixins实现压缩图片代码
2018/03/14 Javascript
Vue写一个简单的倒计时按钮功能
2018/04/20 Javascript
Vue实现简易翻页效果源码分享
2018/11/08 Javascript
用Cordova打包Vue项目的方法步骤
2019/02/02 Javascript
RxJS的入门指引和初步应用
2019/06/15 Javascript
JavaScript修改注册表实例代码
2020/01/05 Javascript
javascript 原型与原型链的理解及应用实例分析
2020/02/10 Javascript
原生JS实现九宫格抽奖
2020/09/13 Javascript
解决vue安装less报错Failed to compile with 1 errors的问题
2020/10/22 Javascript
Python实现简单的代理服务器
2015/07/25 Python
python opencv之SIFT算法示例
2018/02/24 Python
Python实现带下标索引的遍历操作示例
2019/05/30 Python
Python列表删除元素del、pop()和remove()的区别小结
2019/09/11 Python
TensorFlow绘制loss/accuracy曲线的实例
2020/01/21 Python
Keras Convolution1D与Convolution2D区别说明
2020/05/22 Python
Python定时任务APScheduler原理及实例解析
2020/05/30 Python
python获得命令行输入的参数的两种方式
2020/11/02 Python
大学生饮食连锁店创业计划书
2014/01/17 职场文书
王老吉广告词
2014/03/20 职场文书
800字作文之大雪
2019/12/04 职场文书
Python实战之疫苗研发情况可视化
2021/05/18 Python