js执行上下文栈和变量对象
JavaScript执行上下文栈和变量对象
JS是单线程的语言,执行顺序肯定是顺序执行,但是JS 引擎并不是一行一行地分析和执行程序,而是一段一段地分析执行,会先进行编译阶段然后才是执行阶段。
例子一:变量提升
foo; // undefined
var foo = function () {
console.log('foo1');
}
foo(); // foo1,foo赋值
var foo = function () {
console.log('foo2');
}
foo(); // foo2,foo重新赋值
例子二:函数提升
foo(); // foo2
function foo() {
console.log('foo1');
}
foo(); // foo2
function foo() {
console.log('foo2');
}
foo(); // foo2
例子三:声明优先级,函数 > 变量
foo(); // foo2
var foo = function() {
console.log('foo1');
}
foo(); // foo1,foo重新赋值
function foo() {
console.log('foo2');
}
foo(); // foo1
上面三个例子中,第一个例子是变量提升,第二个例子是函数提升,第三个例子是函数声明优先级高于变量声明。
需要注意的是同一作用域下存在多个同名函数声明,那么后面的会替换前面的函数声明。
执行上下文
执行上下文总共有三种类型
- 全局执行上下文:只有一个,浏览器中的全局对象就是 window 对象,
this
指向这个全局对象。 - 函数执行上下文:存在无数个,只有在函数被调用的时候才会被创建,每次调用函数都会创建一个新的执行上下文。
- Eval 函数执行上下文: 指的是运行在
eval
函数中的代码,很少用而且不建议使用。
执行上下文栈
因为JS引擎创建了很多的执行上下文,所以JS引擎创建了执行上下文栈(Execution context stack,ECS)来管理执行上下文。
当 JavaScript 初始化的时候会向执行上下文栈压入一个全局执行上下文,我们用 globalContext 表示它,并且只有当整个应用程序结束的时候,执行栈才会被清空,所以程序结束之前, 执行栈最底部永远有个 globalContext。
ECStack = [ // 使用数组模拟栈
globalContext
];
具体执行过程如下图所示,这部分不清楚点击js执行上下文和执行栈 查看
找不同
有如下两段代码,执行的结果是一样的,但是两段代码究竟有什么不同?
//代码一
var scope = "global scope";
function checkscope(){
var scope = "local scope";
function f(){
return scope;
}
return f();
}
checkscope();
//代码二
var scope = "global scope";
function checkscope(){
var scope = "local scope";
function f(){
return scope;
}
return f;
}
checkscope()();
答案是 执行上下文栈的变化不一样。
第一段代码:
ECStack.push(<checkscope> functionContext);
ECStack.push(<f> functionContext); //这里checkscope函数还没出栈,且函数f入栈
ECStack.pop();
ECStack.pop();
第二段代码:
ECStack.push(<checkscope> functionContext);
ECStack.pop(); //这里checkscope函数已经执行结束,出栈
ECStack.push(<f> functionContext);
ECStack.pop();
函数上下文
在函数上下文中,用活动对象(activation object, AO)来表示变量对象。
活动对象和变量对象的区别在于
- 1、变量对象(VO)是规范上或者是JS引擎上实现的,并不能在JS环境中直接访问。
- 2、当进入到一个执行上下文后,这个变量对象才会被激活,所以叫活动对象(AO),这时候活动对象上的各种属性才能被访问。
调用函数时,会为其创建一个Arguments对象,并自动初始化局部变量arguments,指代该Arguments对象。所有作为参数传入的值都会成为Arguments对象的数组元素。
执行过程
执行上下文的代码会分成两个阶段进行处理
- 1、进入执行上下文
- 2、代码执行
进入执行上下文
很明显,这个时候还没有执行代码
此时的变量对象会包括(如下顺序初始化):
- 1、函数的所有形参 (only函数上下文):没有实参,属性值设为undefined。
- 2、函数声明:如果变量对象已经存在相同名称的属性,则完全替换这个属性。
- 3、变量声明:如果变量名称跟已经声明的形参或函数相同,则变量声明不会干扰已经存在的这类属性。
看例子:
function foo(a) {
var b = 2;
function c() {}
var d = function() {};
b = 3;
}
foo(1);
对于上面的代码,这个时候的AO是
AO = {
arguments: {
0: 1,
length: 1
},
a: 1,
b: undefined,
c: reference to function c(){},
d: undefined
}
形参arguments这时候已经有赋值了,但是变量还是undefined,只是初始化的值
代码执行
这个阶段会顺序执行代码,修改变量对象的值,执行完成后AO如下:
AO = {
arguments: {
0: 1,
length: 1
},
a: 1,
b: 3,
c: reference to function c(){},
d: reference to FunctionExpression "d"
}
在这里变量才会被赋值了。
总结如下:
- 1、全局上下文的变量对象初始化是全局对象
- 2、函数上下文的变量对象初始化只包括 Arguments 对象
- 3、在进入执行上下文时会给变量对象添加形参、函数声明、变量声明等初始的属性值
- 4、在代码执行阶段,会再次修改变量对象的属性值
js执行上下文栈和变量对象的更多相关文章
- 【进阶1-2期】JavaScript深入之执行上下文栈和变量对象(转)
这是我在公众号(高级前端进阶)看到的文章,现在做笔记 https://mp.weixin.qq.com/s/hZIpnkKqdQgQnK1BcrH6Nw 阅读笔记 JS是单线程的语言,执行顺序肯定是顺 ...
- js基础梳理-究竟什么是执行上下文栈(执行栈),执行上下文(可执行代码)?
日常在群里讨论一些概念性的问题,比如变量提升,作用域和闭包相关问题的时候,经常会听一些大佬们给别人解释的时候说执行上下文,调用上下文巴拉巴拉,总有点似懂非懂,不明觉厉的感觉.今天,就对这两个概念梳理一 ...
- js执行上下文与执行上下文栈
一.什么是执行上下文 简单说就是代码运行时的执行环境,必须是在函数调用的时候才会产生,如果不调用就不会产生这个执行上下文.在这个环境中,所有变量会被事先提出来(变量提升),有的直接赋值,有的为默认值 ...
- 一文弄懂js的执行上下文与执行上下文栈
目录 执行上下文与执行上下文栈 变量提升与函数提升 变量提升 函数提升 变量提升与函数提升的优先级 变量提升的一道题目引出var关键字与let关键字各自的特性 执行上下文 全局执行上下文 函数(局部) ...
- 【学习笔记】深入理解js原型和闭包(11)——执行上下文栈
继续上文的内容. 执行全局代码时,会产生一个执行上下文环境,每次调用函数都又会产生执行上下文环境.当函数调用完成时,这个上下文环境以及其中的数据都会被消除,再重新回到全局上下文环境.处于活动状态的执行 ...
- JS高阶---执行上下文栈
大纲: 主体: 注意:*******函数调用时才会产生上下文栈,声明时不会产生********** 顺序: 概念图: 执行上下文栈的顺序---→后进先出 其他概念图: 当前执行的上下文总是在顶部 全局 ...
- 一篇文章看懂JS执行上下文
壹 ❀ 引 我们都知道,JS代码的执行顺序总是与代码先后顺序有所差异,当先抛开异步问题你会发现就算是同步代码,它的执行也与你的预期不一致,比如: function f1() { console.lo ...
- 前端知识体系:JavaScript基础-原型和原型链-理解JavaScript的执行上下文栈,可以应用堆栈信息快速定位问题
理解JavaScript的执行上下文栈,可以应用堆栈信息快速定位问题(原文文档) 1.什么是执行上下文: 简而言之,执行上下文就是当前JavaScript代码被解析和执行时所在环境的抽象概念,Java ...
- JS 执行上下文的一次理解
执行上下文 执行上下文概念 当代码运行时,会产生一个对应的执行环境,在这个环境中,变量会被事先提出来(变量提升),代码从上往下开始执行,就叫做执行上下文. 注:在定义变量是未直接赋值,使用默认值 un ...
随机推荐
- linux(03)基础系统优化
Linux之基础系统优化 Linux基础系统优化 >>> https://www.cnblogs.com/pyyu/p/9355477.html Linux的网络功能相当强悍,一时之 ...
- js 落幕
1.关于路由的跳转 核心是 a 再取出后缀作为参数判断 最后 innerHTML 上 <!DOCTYPE html> <html lang="en"> &l ...
- 错误: 找不到或无法加载主类 com.leyou.LeyouItemApplication Process finished with exit code 1
在IDEA的使用过程中,经常断掉服务或者重启服务,最近断掉服务重启时突然遇到了一个启动报错: 错误:找不到或无法加载主类 猜测:1,未能成功编译: 尝试:菜单--->Build--->Re ...
- Centos7 安装mysql-8.0.18(rpm)
1.前言 当前MySQL最新版本:8.0.18 (听说比5.7快2倍)官方之前表示:MySQL 8.0 正式版 8.0.18 已发布,MySQL 8 要比 MySQL 5.7 快 2 倍,还带来了大量 ...
- Socket-window通讯
#define _WINSOCK_DEPRECATED_NO_WARNINGS #include<WINSOCK2.H> #include<STDIO.H> #include& ...
- 网络yum源配置
系统环境:CentOS7 [1] 首先备份/etc/yum.repos.d/CentOS-Base.repo cp /etc/yum.repos.d/CentOS-Base.repo /etc/yum ...
- [LeetCode] 880. Decoded String at Index 在位置坐标处解码字符串
An encoded string S is given. To find and write the decoded string to a tape, the encoded string is ...
- 消息队列:RabbitMQ安装
1. 安装RabbitMQ之前需要先安装Erlang环境 然后配置环境变量 2. 安装完后 我们进入到我们安装到 sbin目录C:\Program Files\RabbitMQ Server\rabb ...
- 【操作系统之十三】Netfilter与iptables
一.Netfilter Netfilter是由Rusty Russell提出的Linux 2.4内核防火墙框架,该框架既简洁又灵活,可实现安全策略应用中的许多功能,如数据包过滤.数据包处理.地址伪装. ...
- snowflake ID生成器
背景 Snowflake 是 Twitter 内部的一个 ID 生算法, 可以通过一些简单的规则保证在大规模分布式情况下生成唯一的 ID 号码. 其组成为: 第一个 bit 为未使用的符号位. 第二部 ...