首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

JavaScript 中的执行上下文和调用栈是什么

在这篇文章里,我会深入地探讨 JavaScript 中最基本概念之一,那就是执行上下文。...然而,在 JavaScript 解释器内部,对每个执行上下文的调用会经历两个阶段: 创建阶段 [当函数被调用, 但内部的代码还没开始执行]: 创建 作用域链....Foo 被声明了两次, 为什么最后它显示为 function 而不是 undefined 或 string?...总结 希望现在你已经理解了 JavaScript 解释器是如何执行你的代码。理解执行上下文和调用栈能够让你清楚地知道你的代码为什么你的代码执行的时候得到的结果和你预期的不一样。...你认为了解JS 解释器的内部工作原理太过多余了还是对你的 JavaScript 知识非常有帮助 ? 了解执行上下文的阶段能帮助你书写更好的 JavaScript 代码吗 ?

71110
您找到你想要的搜索结果了吗?
是的
没有找到

JavaScript 调用

source=cloudtencent 什么是调用栈? 我们写的 JS 代码大多数都是同步模式,也就是从上往下依次执行。...JS 引擎会将整个 script 的代码提取到一个匿名函数(anonymous)中,并且压入调用栈(也就是入栈)开始逐行执行 首先是第一行 global begin,压入调用执行 global begin...在控制台打印完毕后,出栈 接下来就遇到了函数的声明 bar 和 foo ,只有代码的调用才会入栈,声明是不会的 遇到了 foo 函数的调用,压入调用执行 foo 函数,foo 函数第一行是 foo...task 压入调用执行 foo task (控制台打印) 完成后,往下就是调用了 bar 函数,将 bar 函数压入调用栈 在 bar 函数执行过程中将 bar task 入栈 执行 bar task...最后 global end 也压入调用栈 最后将 global end 入栈,执行完毕后出栈。整个匿名函数(anonymous)也执行完成 在浏览器调试工具右侧可以看到调用栈:

44600

JavaScript链式调用

1、什么是链式调用?...这个很容易理解,例如 $('text’).setStyle('color', 'red').show(); 一般的函数调用和链式调用的区别:链式调用完方法后,return this返回当前调用方法的对象...,优点是:链式调用这种风格有助于简化代码的编写工作,让代码更加简洁、易读,同时也避免多次重复使用一个对象变量 2.模仿jquery的链式调用 第一步,定义一个含参数的空对象 (function(){...//下划线:表示私有变量的写法 function _$(els) { };//有参数的空对象 })()//程序启动的时候 里面的代码直接执行了 第二步,准备方法     在_$上定义一个onrReady...};//这个函数的意思:为function对象增加函数,会用链式调用,链式调用有两个参数name,和fn 第四步,扩展类的相应方法 链式的对象增加jquery库提供的操作函数 (function(){

1.6K41

JavaScript执行机制

JavaScript执行机制JavaScript为什么是单线程的呢?...微任务一个 微任务(microtask)就是一个简短的函数,当创建该函数的函数执行之后,并且 只有当 Javascript 调用栈为空,而控制权尚未返还给被 user agent 用来驱动脚本执行环境的事件循环之前...这是因为事件循环会持续调用微任务直至队列中没有留存的,即使是在有更多微任务持续被加入的情况下。...简单的传入一个 JavaScript Function ,以在 queueMicrotask() 方法中处理微任务时供其上下文调用即可;取决于当前执行上下文, queueMicrotask() 以定义的形式被暴露在...执行机制在了解了以上概念之后,我们正式开始介绍JavaScript在浏览器中的执行机制。

32322

JavaScript执行——Promise

它们是两个函数,由JavaScript引擎提供,不用自己部署。...then 方法可以接受两个回调函数作为参数: Promise对象状态改为Resolved时调用 (必选) Promise对象状态改为Rejected时调用 (可选) 基本用法示例 function...表明,在Promise新建后会立即执行,所以 首先输出AAA。然后,then方法指定的回调函数将在当前脚本所有同步任务执行完后才会执行,所以 BBB最后输出。...原因则是Promise属于JavaScript引擎内部任务,而setTimeout则是浏览器API,而引擎内部任务优先级高于浏览器API任务,所以有此结果。...Promise优缺点 优点 缺点 解决回调 无法监测进行状态 链式调用 新建立即执行且无法取消 减少嵌套 内部错误无法抛出

63420

React18的useEffect会执行两次

一、执行两次的useEffect。 前段时间在本地启了一个 React Demo 项目,在编码的过程中遇到一个很奇怪的“Bug”。 其中简化版的代码如下所示。...被打印了 “两次”。 刷新之后依然如此,当时就给我整懵了,第一感觉就是,这怎么可能? 很是纠结一番之后依然没想明白,于是试着去网上搜了一下,发现竟然有人同样遇到过这个问题。...生产环境("production")模式下和原来一样,仅执行一次。 3.之所以执行两次,是为了模拟立即卸载组件和重新挂载组件。 为了帮助开发者提前发现重复挂载造成的 Bug 的代码。...知道了 useEffect 的执行时机,也就能明白为什么 React18 中 useEffect 会执行两次了。...因此,深入了解一下 useEffect 执行机制以及解决其副作用的方式还是有必要的。 相关链接 useEffect 执行两次官方英文文档

7.5K71

Javascript中你必须理解的执行上下文和调用

——爱默生 执行上下文在 JavaScript 是非常重要的基础知识,想要理解 JavaScript执行过程,执行上下文 是你必须要掌握的知识。否则只能是知其然不知其所以然。...执行上下文栈的 5 个关键点: 单线程 同步执行 只有一个全局上下文 任意数量的函数上下文 每个函数调用都会创建一个新的执行上下文,包括自己调用自己 详解执行上下文 到此,我们知道每次调用一个函数时,都会创建一个新的执行上下文...但是在 JavaScript 解释器中,每次调用执行上下文会有两个阶段: 创建阶段 创建作用域链 创建变量,函数,```arguments```列表。...foo 被声明了两次,为什么 foo 显示的是 function 而不是 undefined 或者 string?...虽然 foo 被声明了两次,但是我们在创建阶段中说到,函数是在变量之前创建在变量对象中,当变量对象中名称已经存在时,变量声明什么也不做。

55030
领券