JS 执行上下文的一次理解
执行上下文
执行上下文概念
- 当代码运行时,会产生一个对应的执行环境,在这个环境中,变量会被事先提出来(变量提升),代码从上往下开始执行,就叫做执行上下文。
注:在定义变量是未直接赋值,使用默认值 undefined。
在 JavaScript 的世界里,运行环境有三种,分别是:
- 全局环境:代码首先进入的环境
- 函数环境:函数被调用时执行的环境
- Eval的代码 - 在Eval函数内运行的代码
执行上下文特点
单线程,在主进程上运行
同步执行,从上往下按顺序执行
全局上下文只有一个,浏览器关闭时会被弹出栈
函数的执行上下文没有数目限制
函数每被调用一次,都会产生一个新的执行上下文环境
执行上下文栈
执行全局代码时,会产生一个执行上下文环境,每次调用函数都又会产生执行上下文环境。当函数调用完成时,这个上下文环境以及其中的数据都会被消除,再重新回到全局上下文环境。处于活动状态的执行上下文环境只有一个。
执行上下文生命周期
执行上下文共分3个阶段,分别是:
创建阶段
1. 生成变量对象(全局对象)
2. 建立作用域链
3. 确定 this 指向
执行阶段
1.变量调用赋值
2.函数引用,创建新的执行上下文环境
3.执行其他代码
销毁阶段
执行完毕退出执行栈,等待回收被销毁
变量对象
变量对象是与执行上下文相关的数据作用域,存储了上下文中定义的变量和函数声明。
变量对象式一个抽象的概念,在不同的上下文中,表示不同的对象:
- 全局执行上下文的变量对象
全局执行上下文中,变量对象就是全局对象。
在顶层js代码中,this指向全局对象,全局变量会作为该对象的属性来被查询。在浏览器中,window就是全局对象。
- 函数执行上下文的变量对象
函数上下文中,变量对象VO就是活动对象AO。
初始化时,带有arguments属性。
函数代码分成两个阶段执行
进入执行上下文时,此时变量对象包括
形参
函数声明,会替换已有变量对象
变量声明,不会替换形参和函数
函数执行
列子
var a = 1, b, fn = function() {
console.log(a)
var a = 3,b = 2;
bar(b)
}
var bar = function(x) {
return x + 4;
}
fn()
- 执行结果 undefined
- JS 是单线程,从上到下执行每一行代码
- 创建变量a并赋值1,变量b 没有赋值,使用 undefined 默认值,fn 赋值函数,bar 赋值函数
- 调用 fn(), fn 进入执行栈,创建新的 fn 内部执行上下文。打印 a 此时 在 fn作用域内,定义了一个新的变量 a,但是在使用a是 a并没有赋值,所以 打印a, 输出:undefined。代码向下执行,a,b分别赋值。调用函数bar()
- 函数bar进入执行栈,开始执行, 返回结果,出栈内部等待销毁回收。
- fn() 退出执行栈,等待销毁回收
- 回到全局执行环境(全局上下文)
JS 执行上下文的一次理解的更多相关文章
- JS执行上下文(执行环境)详细图解
JS执行上下文(执行环境)详细图解 先随便放张图 我们在JS学习初期或者面试的时候常常会遇到考核变量提升的思考题.比如先来一个简单一点的. console.log(a); // 这里会打印出什么? v ...
- 一篇文章看懂JS执行上下文
壹 ❀ 引 我们都知道,JS代码的执行顺序总是与代码先后顺序有所差异,当先抛开异步问题你会发现就算是同步代码,它的执行也与你的预期不一致,比如: function f1() { console.lo ...
- 深入理解js——执行上下文
什么是"执行上下文"?暂且不下定义,先看一段代码: 第一句报错,a未定义,很正常.第二句.第三句输出都是undefined,说明浏览器在执行console.log(a)时,已经知道 ...
- js 执行上下文理解
前端基础进阶(三):变量对象详解http://www.jianshu.com/p/330b1505e41d 1.创建阶段 a.生成变量对象 1.创建arguments对象 2.functio ...
- js执行上下文(由浅入深)
每一个函数都有自己的执行上下文EC(执行环境 execution context),并且每个执行上下文中都有它自己的变量对象VO(Variable object),用于存储执行上下文中的变量 .函数声 ...
- 【repost】 原生JS执行环境与作用域深入理解
首先,我们要知道执行环境和作用域是两个完全不同的概念. 函数的每次调用都有与之紧密相关的作用域和执行环境.从根本上来说,作用域是基于函数的,而执行环境是基于对象的(例如:全局执行环境即window对象 ...
- 前端高质量知识(二)-JS执行上下文(执行环境)详细图解Script
先随便放张图 我们在JS学习初期或者面试的时候常常会遇到考核变量提升的思考题.比如先来一个简单一点的. console.log(a); // 这里会打印出什么? var a = 20; PS: 变量提 ...
- 原型模式故事链(4)--JS执行上下文、变量提升、函数声明
上一章:JS的数据类型 传送门:https://segmentfault.com/a/11... 好!话不多少,我们就开始吧.对变量提升和函数声明的理解,能让你更清楚容易的理解,为什么你的程序报错了~ ...
- js执行上下文与执行上下文栈
一.什么是执行上下文 简单说就是代码运行时的执行环境,必须是在函数调用的时候才会产生,如果不调用就不会产生这个执行上下文.在这个环境中,所有变量会被事先提出来(变量提升),有的直接赋值,有的为默认值 ...
随机推荐
- python反序列化1(__reduce__)
part1:不求甚解的复现 对于服务端源码: 编写恶意序列化对象生成程序: 将生成的恶意序列化对象输入服务端user,使其执行系统命令.(上面那俩其实都行) part2:原理解释 b'xxx'是 ...
- [对对子队]会议记录5.27(Scrum Meeting12)
今天已完成的工作 朱俊豪 工作内容:寻找电池模型和BGM,修改关卡选择场景 相关issue:优化初步导出版本 相关签入:perf:地图界面优化 feat:更新系列资源(星星,大电池) 何瑞 ...
- Noip模拟83 2021.10.26
T1 树上的数 有手就能在衡中$OJ$上过,但是$WaitingCoders$不行,就是这样 必须使用$O(n)$算法加上大力卡常,思路就是找子树内没更新的更新,更新过了直接$return$ 1 #i ...
- Docker 安装 MySQL8
1. 环境准备 创建挂载数据目录和配置文件 mkdir -p /mnt/mysql/data /etc/mysql/conf touch /etc/mysql/conf/my.cnf 2. 拉取镜像 ...
- 看动画学算法之:双向队列dequeue
目录 简介 双向队列的实现 双向队列的数组实现 双向队列的动态数组实现 双向队列的链表实现 双向链表的时间复杂度 简介 dequeue指的是双向队列,可以分别从队列的头部插入和获取数据,也可以从队列的 ...
- 密码学基础:AES加密算法
[原创]密码学基础:AES加密算法-密码应用-看雪论坛-安全社区|安全招聘|bbs.pediy.com 目录 基础部分概述: 第一节:AES算法简介 第二节:AES算法相关数学知识 素域简介 扩展域简 ...
- Shadertoy 教程 Part 4 - 绘制多个2D图形和混入
Note: This series blog was translated from Nathan Vaughn's Shaders Language Tutorial and has been au ...
- cesium制作自己的骑行轨迹
制作自己的骑行轨迹 马上国庆节了,计划骑车回家,突然想到把所有的骑行线路汇总一下,无奈码表和APP不支持这样的操作,出于职业病,在此操作一下. 我用的是黑鸟码表,可以导出fit运动轨迹,但是fit还需 ...
- yaml基本用法
简介 YAML 是 "YAML Ain't Markup Language"(YAML 不是一种标记语言)的递归缩写.在开发的这种语言时,YAML 的意思其实是:"Yet ...
- ABP Framework 5.0 RC.1 新特性和变更说明
.Net 6.0 发布之后,ABP Framework 也在第一时间进行了升级,并在一个多星期后(2021-11-16)发布了 5.0 RC.1 ,新功能和重要变更基本已经确定. 5.0版本新特性 新 ...