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

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

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

赞 (0)

相关推荐

  • ES6新数据结构Set与WeakSet用法分析

    本文实例讲述了ES6新数据结构Set与WeakSet用法.分享给大家供大家参考,具体如下: 新数据结构Set与WeakSet 1. Set Set类似于数据,但是成员值都是唯一的.生成Set的方式如下. var s = new Set(); [1,1,3,3,5,5].map( x => s.add(x) ); console.log(s); //Set {1, 3, 5} 没有重复值哟,如果面试官再让你编写数组去重的函数是不是简单多了.或者你可以这样写. var set = new Set(

  • ES6新增数据结构WeakSet的用法详解

    WeakSet和Set类似,同样是元素不重复的集合,它们的区别是WeakSet内的元素必须是对象,不能是其它类型. 特性: 1.元素必须是对象. 添加一个number类型的元素. const ws = new WeakSet() ws.add(1) 结果是报类型错误. TypeError: Invalid value used in weak set 添加一个对象. const ws = new WeakSet() var a = {p1:'1', p2:'2'} ws.add(a) conso

  • ES6 javascript中class类的get与set用法实例分析

    本文实例讲述了ES6 javascript中class类的get与set用法.分享给大家供大家参考,具体如下: 与 ES5 一样, 在 Class 内部可以使用get和set关键字, 对某个属性设置存值函数和取值函数, 拦截该属性的存取行为. class MyClass { constructor() { // ... } get prop() { return 'getter'; } set prop(value) { console.log('setter: ' + value); } }

  • ES6教程之for循环和Map,Set用法分析

    本文实例讲述了ES6教程之for循环和Map,Set用法.分享给大家供大家参考,具体如下: 现在大家先想一想,如果要你遍历一个数组的元素,你会选择如何去做呢?一般都会想起for循环: for (var index = 0; index < myArray.length; index++) { console.log(myArray[index]); } 可惜我得告诉你,这个方法是二十年的人才应该使用的方法,在ES5中已经提出了更为简便的forEach方法,代码如下: myArray.forEac

  • ES6学习笔记之Set和Map数据结构详解

    本文实例讲述了ES6学习笔记之Set和Map数据结构.分享给大家供大家参考,具体如下: 一.Set ES6提供了新的数据结构Set.类似于数组,只不过其成员值都是唯一的,没有重复的值. Set本身是一个构造函数,用来生成Set数据结构. 1 . Set函数可以接受一个数组(或类似数组的对象)作为参数,用来初始化. var s = new Set(); var set = new Set([1, 2, 3, 4, 4]); [...set] // [1, 2, 3, 4] var items =

  • ES6中如何使用Set和WeakSet

    ES6中提供了两新数据结构-Set和WeakSet.Set是类似于数组,但是成员变量的值都是唯一的,没有重复的值.WeakSet也是不重复的值的集合,但是只能用来存放对象. 一.Set使用 (1)Set本身提供了一个构造函数,用来生成Set数据结构. var s = new Set(); [2,2,2,5,8,16,2,1].map(x => s.add(x)) for(i of s){console.log(i)} //2,5,8,16,1 (2)Set()函数可以接受一个数组,作为构造参数,

  • Javascript ES6中对象类型Sets的介绍与使用详解

    介绍 ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准.因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015. Sets 是ES6(ES2015)中一个新的对象类型,用来创建一系列唯一值的集合.集合中的值可以是简单的原始类型如字符串(strings)或整数(integers),也可以是更复杂的对象类型如对象字面量或者数组. 基本方法 下面是基本的set及其方法(add, size, has, forEach, delete, clear

  • ES6使用Set数据结构实现数组的交集、并集、差集功能示例

    本文实例讲述了ES6使用Set数据结构实现数组的交集.并集.差集功能.分享给大家供大家参考,具体如下: Set数据结构是es6中新增的,它类似于数组,但是成员的值唯一,没有重复值. Set本身是一个数据结构,用来生成Set数据节后 Set数据结构的实例有4种遍历方法: keys():返回一个键名的遍历器 values():返回一个键值便利器 entries():返回一个键值对便利器 forEach():使用回调函数遍历每个成员 由于Set数据结构没有键名,只有键值(或者说键名和键值是同一个值),

  • ES6新特性五：Set与Map的数据结构实例分析

    本文实例讲述了ES6新特性五之Set与Map的数据结构.分享给大家供大家参考,具体如下: 1. Set ① 定义:它类似于数组,但是成员的值都是唯一的,没有重复的值.Set本身是一个构造函数,用来生成Set数据结构. var s = new Set(); [2,3,5,4,5,2,2].map(x => s.add(x)) console.log(s); //Set { 2, 3, 5, 4 } ② 属性和方法 Set结构有以下属性. Set.prototype.constructor:构造函数

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

    本文介绍的是setTimeout函数,延迟执行函数里的执行上下文,分享给大家供大家参考学习,来看看详细的内容: (1)ES5中,setTimeout里面的函数的执行上下文为全局上下文,举例来说: function log(){ setTimeout(function(){console.log(this.id)},100) } var id=42 log.call({id:21}) //输出的结果为42 我们可以看到setTimeout,被延迟执行的函数,里面的this,指向的是全局作用域,也就

  • 实例详解JavaScript中setTimeout函数的执行顺序

    实例详解JavaScript中setTimeout函数的执行顺序

    前言 setTimeout,前端工程师必定会打交道的一个函数.它看上去非常的简单,朴实,有着一个很不平凡的名字--定时器.其实网上关于JavaScript中setTimeout的文章很多,但总感觉例子不够直接具体,因此写了个简单的例子并加以解释希望能让大家明白setTimeout是如何执行的.下面话不多说了,来一起看看详细的介绍: 实例代码如下: var time1=new Date().getTime(); console.log(1,time1); setTimeout(function()

  • 一篇文章弄懂javascript中的执行栈与执行上下文

    一篇文章弄懂javascript中的执行栈与执行上下文

    前言 作为一个前端开发人员,弄清楚JavaScript的执行上下文有助于我们理解js中一些晦涩的概念,比如闭包,作用域,变量提升等等. 执行栈 执行栈用于存储代码执行期间创建的所有执行上下文.具有FILO接口,也被称为调用栈. 当JavaScript代码被运行的时候,会创建一个全局上下文,并push到当前执行栈.之后当发生函数调用的时候,引擎会为函数创建一个函数执行上下文并push到栈顶.引擎会先执行调用栈顶部的函数,当函数执行完成后,当前函数的执行上下文会被移除当前执行栈.并移动到下一个上下文

  • ES6中async函数与await表达式的基本用法举例

    目录 一.async 函数 二.await表达式 三.async await ajax 基础使用 补充:async await ajax使用 总结 一.async 函数 概念: async 是一个修饰符,async 定义的函数会默认的返回一个Promise对象resolve(成功值)的值,因此对async函数可以直接进行then操作,返回的值即为then方法的传入函数. 举例: async function demo(){ // 1:当返回值不是promise对象 当调用函数的时候就是已成功的值

  • Python如何调用JS文件中的函数

    Python 调用JS文件中的函数方法如下 1.安装PyExecJS第三方库 2.导入库:import execjs 3.调用JS文件中的方法 Passwd = execjs.compile(open(r"web.js").read().decode("utf-8")).call('loginHandle','steam') 语句解析,open后跟所执行的js文件位置,call后第一个单引号引起来的为所执行的js文件的某个function, 第二个单引号是前面函数的

  • 聊聊JS ES6中的解构

    概述 es6新增了一种从数组或者对象中获取指定元素的方式,这种方式就是我们今天要说的解构. 先来说说数组的解构 在有解构之前呢,我们获取数组中的指定元素通常是根据索引去做的: const arr = [1, 2, 3]; const a = arr[1]; 有了解构之后呢,我们便可以使用如下方式快速的去获取数组中的某个元素: const arr = [1, 2, 3]; const [a, b, c] = arr; console.log(a); console.log(b); console.

  • Python中eval函数的表达式作用示例

    目录 eval 是干嘛的? 语法格式 最简单的表达式栗子 带上 globals 带上 locals 字符串转字典 带上 globals 带上 locals 内置函数栗子 报错的栗子 eval 是干嘛的? 解析字符串表达式并执行,并返回一个值 语法格式 eval(expression[, globals[, locals]]) expression:表达式字符串 globals:必须是一个字典 locals:可以是任何 map 对象 最简单的表达式栗子 栗子一 print(eval("123&qu

  • JS前端中的设计模式和使用场景示例详解

    目录 引言 策略模式 1.绩效考核 2.表单验证 策略模式的优缺点: 代理模式 1.图片懒加载: 2.缓存代理 总结 引言 相信大家在日常学习和工作中都多多少少听说/了解/使用过 设计模式,我们都知道,使用恰当的设计模式可以优化我们的代码,那你是否知道对于前端开发哪些 设计模式 是日常工作经常用到或者必须掌握的呢?本文我将带大家一起学习下前端常见的设计模式以及它们的 使用场景!!! 本文主讲: 策略模式 代理模式 适合人群: 前端人员 设计模式小白/想知道如何在项目中使用设计模式 策略模式 策略

  • oracle中decode函数的使用方法示例

    decode的几种用法 1:使用decode判断字符串是否一样 DECODE(value,if1,then1,if2,then2,if3,then3,...,else) 含义为 IF 条件=值1 THEN RETURN(value 1) ELSIF 条件=值2 THEN RETURN(value 2) ...... ELSIF 条件=值n THEN RETURN(value 3) ELSE RETURN(default) END IF sql测试 select empno,decode(empn

  • IO中flush()函数的使用代码示例

    The java.io.Writer.flush() method flushes the stream. If the stream has saved any characters from the various write() methods in a buffer, write them immediately to their intended destination. Then, if that destination is another character or byte st

随机推荐