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常用函数 不错
Sep 08 Javascript
jQuery 标题的自动翻转实现代码
Oct 14 Javascript
基于jQuery的可以控制左右滚动及自动滚动效果的代码
Jul 25 Javascript
JavaScript 函数replace深入了解
Mar 14 Javascript
深入document.write()与HTML4.01的非成对标签的详解
May 08 Javascript
JS正则表达式大全(整理详细且实用)
Nov 14 Javascript
javascript解析json实例详解
Nov 05 Javascript
Bootstrap 折叠(Collapse)插件用法实例详解
Jun 01 Javascript
Angular下H5上传图片的方法(可多张上传)
Jan 09 Javascript
详解基于Node.js的微信JS-SDK后端接口实现代码
Jul 15 Javascript
JavaScript实现的原生态Tab标签页功能【兼容IE6】
Sep 18 Javascript
小程序卡片切换效果组件wxCardSwiper的实现
Feb 13 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
单位速度在实战中的运用
2020/03/04 星际争霸
js获取系统的根路径实现介绍
2013/09/08 Javascript
Jquery实现图片左右自动滚动示例
2013/09/25 Javascript
NodeJS制作爬虫全过程
2014/12/22 NodeJs
js实现页面a向页面b传参的方法
2016/05/29 Javascript
jQuery Easyui datagrid/treegrid 清空数据
2016/07/09 Javascript
JavaScript代码里的判断小结
2016/08/22 Javascript
jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)
2016/08/23 Javascript
JS创建对象的写法示例
2016/11/04 Javascript
javascript容错处理代码(屏蔽js错误)
2017/01/20 Javascript
JS+html5制作简单音乐播放器
2020/09/13 Javascript
webpack实现热加载自动刷新的方法
2017/07/30 Javascript
angularjs数组判断是否含有某个元素的实例
2018/02/27 Javascript
详解用Node.js写一个简单的命令行工具
2018/03/01 Javascript
详解使用create-react-app添加css modules、sasss和antd
2018/07/31 Javascript
Node.js模拟发起http请求从异步转同步的5种用法
2018/09/26 Javascript
如何利用Node.js与JSON搭建简单的动态服务器
2020/06/16 Javascript
[03:06]3分钟带你回顾DOTA2完美盛典&完美大师赛
2017/12/06 DOTA
[01:00]一分钟回顾2018DOTA2亚洲邀请赛现场活动
2018/04/07 DOTA
[01:18]PWL开团时刻DAY10——一拳超人
2020/11/11 DOTA
Python中多线程的创建及基本调用方法
2016/07/08 Python
Python正则表达式教程之二:捕获篇
2017/03/02 Python
对Python进行数据分析_关于Package的安装问题
2017/05/22 Python
Python面向对象之私有属性和私有方法应用案例分析
2019/12/31 Python
pytorch方法测试详解——归一化(BatchNorm2d)
2020/01/15 Python
Django框架models使用group by详解
2020/03/11 Python
python 6行代码制作月历生成器
2020/09/18 Python
python实现猜拳游戏项目
2020/11/30 Python
某/etc/fstab文件中的某行如下: /dev/had5 /mnt/dosdata msdos defaults,usrquota 1 2 请解释其含义
2013/09/18 面试题
转党组织关系介绍信
2014/01/08 职场文书
C++程序员求职信范文
2014/04/14 职场文书
《庐山的云雾》教学反思
2014/04/22 职场文书
幼儿园六一儿童节演讲稿
2015/03/19 职场文书
实践论读书笔记
2015/06/29 职场文书
《角的初步认识》教学反思
2016/02/17 职场文书
vue实现无缝轮播效果(跑马灯)
2021/05/14 Vue.js