javascript 执行环境细节分析、原理-12
前言
前面几篇说了执行环境相关的概念,本篇在次回顾下
执行环境(Execution context,简称EC,也称执行上下文 )
定义了变量或者函数有权访问的数据,决定了各自行为,每个执行环境都有一个变量对象,之前我说执行环境可以先理解为 js代码执行时所在的环境,其实把上下文当做是一个对象应该差不多了。注意:每调用一次函数都会创建一个执行上下文,而且将这个上下文压入执行环境栈的顶部,无论是函数内部的函数、还是递归调用等;
全局执行环境是最后的一个执行环境,在web中全局执行环境是window对象,js引擎一开始默认进入全局执行环境
执行环境栈
执行环境栈的作用是为了保证程序能够按照正确的顺序被执行,当执行流进入一个函数时,函数的执行上下文就会被推入这个环境栈中的顶端,当函数执行完毕之后,栈将这个执行上下文弹出,然后把控制权返回给之前的执行上下文。这样实现的原因是由于 Javascript 解释器是单线程的,也就是同一时刻只能发生一件事情,其它等待执行的上下文会在这个环境栈中排队等待。
变量对象
变量对象是与执行上下文相关的数据作用域。它是一个与上下文相关的特殊对象,其中存储了在上下文中定义的变量、函数声明、形参。即一般VO中会包含以下信息:
- var 声明的变量
- 函数声明
- 函数的形参
作用域链
保证对执行环境有权访问的所有变量和函数有序的访问,作用域链的顶端始终都是当前执行环境的变量对象;
如果看完前面几篇,现在在回头看看这些概念是不是有点感觉了;
执行环境分析
开始的时候认为js代码跟html一样都是从上到下开始执行、解析,其实我认为这种说法在js中不太准确,因为js在初始化变量对象的时候存在声明提前的情况。
下面分析下执行环境的一些细节,有错误的地方欢迎指正。
JavaScript是按照代码块来进行编译和执行,代码块之间相互独立,但是变量和方法共享 如下
<script>
console.log("这是代码块一");
</script> <script>
console.log("这是代码块二");
</script>
下面的代码块一中运行报错,但是不影响代码块二中代码的执行,这是因为代码块的独立性,代码块二能调用代码块一中的变量,这是因为代码块中的共享性。
<script>
var str = "Hello JavaScript";
console.log(str_test); //执行结果: 报错 str_test is not defined 。 没有定义这个变量
</script> <script>
console.log(str); //输出Hello JavaScript,因为在代码块一中定义了str
</script>
全局初始化
当第一次加载<script>代码快时,首先创建一个全局对象(Global Object) , 这个对象全局只存在一个,它的属性在任何地方都可以访问,它的存在伴随着应用程序的整个生命周期。全局对象在创建时,将Math,String,Date,document 等常用的JS对象作为其属性。由于这个全局对象不能通过名字直接访问,因此还有另外一个属性window,并将window指向了自身,这样就可以通过window访问这个全局对象了。
//创建一个全局对象
var globalObject = {
Math: {},
String: {},
Date: {},
document: {}, //DOM操作
...
window:this //让window属性指向了自身
}
然后,JS引擎创建一个执行环境栈( Execution Context Stack) ECS ,同时创建一个全局执行环境(Execution Context)EC ,并将这个全局执行环境EC压入执行环境栈中。
var ECStack = []; //定义一个执行环境栈,类似于数组
var EC = {}; //创建一个上下文
ECStack.push(EC); //进入函数,压入执行环境栈
最后,JS引擎还要创建一个与EC关联的全局变量对象(Varibale Object) VO, 并把VO指向全局对象,VO中不仅包含了全局对象的原有属性,还包括在全局定义的变量和函数 ,与此同时,每个函数在编译的时候,都会创建一个内部属性[[scope]],[[scope]]保存着所有父级变量对象,类似一个链表,最后一个是全局对象;之所有[[scope]]可以做到这样我想这大概就是词法作用域吧,在源代码中当你定义(书写)一个函数的时候(并未调用),js引擎也能根据你函数书写的位置,函数嵌套的位置,给你生成一个[[scope]],作为该函数的属性存在(这个属性属于函数的),即使函数不调用,所以说js作用域基于词法作用域(静态作用域)。
ECStack = [ //执行环境栈
EC(G) = { //全局执行环境
VO(G):{ //定义全局变量对象
... //包含全局对象原有的属性
x = 1; //全局变量x
xx = function(){...}; //全局函数xx
A[[scope]] = this; //定义A的scope,并赋值为VO本身
}
}
];
执行函数
首先,JS引擎会创建函数执行环境EC,接着在EC中创建作用域链、变量对象、this指针等属性,然后EC推入执行环境栈的顶部并获取执行权。开始执行代码,EC中的VO 激活成AO,然后将AO推入作用域链的顶端,此时完整的作用域链创建完成。随着代码的执行开始真正意义上给变量对象中的var 声明的变量赋值;具体创建作用域链、变量对象、this指针等细节可以阅读前面几篇《执行环境之作用域链》、《执行环境之变量对象》、《执行环境之this指针》,这里要做补充的一个内容是关于function 中的内部属性[[scope]];
函数内部属性[[scope]]
在《执行环境之作用域链》中曾说过内部属性[[scope]]是保存所有的父级变量对象的一个链表,也在《执行环境之变量对象》每个执行上下文,都存在变量对象。现在问题是如果函数没有调用那么这个函数的内部属性[[scope]]的值是哪里来的呢?如下代码
function a(){
function b(){
function c(){ }
}
}
按照我的说法c.[[scope]]的值应该是[ b.AO,a.AO,globalContext.VO];
在《作用域》中说过词法作用域是在编译阶段就可以决定变量的引用,由程序定义的位置决定,和代码执行顺序无关,用嵌套的方式解析。对于词法作用域我是这里理解的:当源代码中你定义(书写)一个函数的时候(并未调用),js引擎也能根据你函数书写的位置,函数嵌套的位置,给你生成一个[[scope]],作为该函数的属性存在(这个属性属于函数的),即使函数不调用,所以说基于词法作用域(静态作用域)。所以这里我认为内部属性[[scope]]的值就是因为词法作用域;
实例分析
下面我们将分通过执行函数A、执行函数B 分析:
var x = 1; //定义一个全局变量 x
function A(y) {
var x = 2; //定义一个局部变量 x
function B(z) { //定义一个内部函数 B
console.log(x + y + z);
}
return B; //返回函数B的引用
}
var C = A(1); //执行A,返回B
C(1); //执行函数B,输出 4
执行函数A:
ECStack = [ //执行环境栈
EC(A) = { //A的执行环境
[scope]:VO(G), //VO是全局变量对象
AO(A) : { //创建函数A的活动对象
y:1,
x:2, //定义局部变量x
B:function(){...}, //定义函数B
B[[scope]] = this; //this指代AO本身,而AO位于scopeChain的顶端,因此B[[scope]]指向整个作用域链
arguments:[],//平时我们在函数中访问的arguments就是AO中的arguments
this:window //函数中的this指向调用者window对象
},
scopeChain:<AO(A),A[[scope]]> //链表初始化为A[[scope]],然后再把AO加入该作用域链的顶端,此时A的作用域链:AO(A)->VO(G)
},
EC(G) = { //全局执行环境
VO(G):{ //创建全局变量对象
... //包含全局对象原有的属性
x = 1; //定义变量x
A = function(){...}; //定义函数A
A[[scope]] = this; //定义A的scope,A[[scope]] == VO(G)
}
}
];
执行函数B:
函数A被执行以后,返回了B的引用,并赋值给了变量C,执行 C(1) 就相当于执行B(1),JS引擎需要完成以下工作:
首先,还和上面一样,创建函数B的执行环境EC,然后EC推入执行环境栈的顶部并获取执行权。 此时执行环境栈中有两个执行环境,分别是全局执行环境和函数B的执行环境,B的执行环境在栈顶,全局执行环境在栈的底部。(注意:当函数A返回后,A的执行环境就会从栈中被删除,只留下全局执行环境)然后,创建函数B的作用域链,并初始化为函数B的scope所包含的对象,即包含了A的作用域链。最后,创建函数B的活动对象AO,并将B的形参z, arguments对象 和 this对象作为AO的属性。此时ECStack将会变成这样:
ECStack = [ //执行环境栈
EC(B) = { //创建B的执行环境,并处于作用域链的顶端
[scope]:AO(A), //指向函数A的作用域链,AO(A)->VO(G)
var AO(B) = { //创建函数B的活动对象
z:1,
arguments:[],
this:window
}
scopeChain:<AO(B),B[[scope]]> //链表初始化为B[[scope]],再将AO(B)加入链表表头,此时B的作用域链:AO(B)->AO(A)-VO(G)
},
EC(A), //A的执行环境已经从栈顶被删除,
EC(G) = { //全局执行环境
VO:{ //定义全局变量对象
... //包含全局对象原有的属性
x = 1; //定义变量x
A = function(){...}; //定义函数A
A[[scope]] = this; //定义A的scope,A[[scope]] == VO(G)
}
}
];
思考题
var o = {
bruceZhou: 'bruceZhou',
fn: function(){
console.log(fn)
console.log(bruceZhou);
}
}
o.fn();
javascript 执行环境细节分析、原理-12的更多相关文章
- JavaScript执行顺序分析
之前从JavaScript引擎的解析机制来探索JavaScript的工作原理,下面我们以更形象的示例来说明JavaScript代码在页面中的执行顺序.如果说,JavaScript引擎的工作机制比较深奥 ...
- 《浏览器工作原理与实践》<11>this:从JavaScript执行上下文的视角讲清楚this
在上篇文章中,我们讲了词法作用域.作用域链以及闭包,接下来我们分析一下这段代码: var bar = { myName:"time.geekbang.com", printName ...
- javascript中的立即执行函数的原理
形如 ((function Test(a) { //code here... })('Hello')); 被称作立即执行函数. 首先需要了解的是,这并不是一种hack,这是javascript的基本语 ...
- Tars | 第8篇 TarsJava Subset最终代码的执行流程与原理分析
目录 前言 1. SubsetConf配置项的结构 1.1 SubsetConf 1.2 RatioConfig 1.3 KeyConfig 1.4 KeyRoute 1.5 SubsetConf的结 ...
- JavaScript实现DDoS攻击原理,以及保护措施。
DDos介绍 最普遍的攻击是对网站进行分布式拒绝服务(DDoS)攻击.在一个典型的DDoS攻击中,攻击者通过发送大量的数据到服务器,占用服务资源.从而达到阻止其他用户的访问. 如果黑客使用JavaSc ...
- JavaScript中的计时器原理
理解John Resig 在 How JavaScript Timers Work. 原理分析 timer(setInterval,setTimeout)有一个很重要的概念,时间延迟的长短是不稳定的. ...
- JavaScript 执行机制
一.宏任务与微任务 macro-task(宏任务):包括整体代码script,setTimeout,setInterval micro-task(微任务):Promise,process.nextTi ...
- 转载---JavaScript执行机制
很好的一篇文章,原地址 JavaScript执行机制 这一次,彻底弄懂 JavaScript 执行机制 本文的目的就是要保证你彻底弄懂javascript的执行机制,如果读完本文还不懂,可以揍我. 不 ...
- 【THE LAST TIME】彻底吃透 JavaScript 执行机制
前言 The last time, I have learned [THE LAST TIME]一直是我想写的一个系列,旨在厚积薄发,重温前端. 也是给自己的查缺补漏和技术分享. 欢迎大家多多评论指点 ...
随机推荐
- 18、Cocos2dx 3.0游戏开发找小三之cocos2d-x,请问你是怎么调度的咩
重开发人员的劳动成果,转载的时候请务必注明出处:http://blog.csdn.net/haomengzhu/article/details/30478251 Cocos2d 的一大特色就是提供了事 ...
- Java高级开发工程师面试——多线程
来自:Sanesee 链接:http://www.sanesee.com/article/java-engineer-interview-of-thread 1.进程和线程的区别? 进程是一个具有独立 ...
- .NET Core 2.0下载和文档
.NET Core 2.0 RTM 正式版2017/8/14 发布.对应发布 ASP.NET Core 2.0 .EF Core 2.0以及.NET Standard 2.0. 你可以通过 Visua ...
- [LeetCode] 二叉树相关题目(不完全)
最近在做LeetCode上面有关二叉树的题目,这篇博客仅用来记录这些题目的代码. 二叉树的题目,一般都是利用递归来解决的,因此这一类题目对理解递归很有帮助. 1.Symmetric Tree(http ...
- SET与SPLIT
所以说不要以为前一天考了什么后一天就不会考这类的东西了 出题人总是能竭尽所能 打破你的下限qaq naive split 详解blog来自ljz大佬:http://blog.csdn.net/ljz_ ...
- C#中级-Windows Service程序安装注意事项
一.前言 这周除了改写一些识别算法外,继续我的Socket服务编写.服务器端的Socket服务是以Windows Service的形式运行的. 在我完成Windows Service编写后,启动服务时 ...
- Prism for WPF再探(基于Prism事件的模块间通信)
上篇博文链接 Prism for WPF初探(构建简单的模块化开发框架) 一.简单介绍: 在上一篇博文中初步搭建了Prism框架的各个模块,但那只是搭建了一个空壳,里面的内容基本是空的,在这一篇我将实 ...
- lesson - 8 课程笔记 tar / gzip /bzip2 / xz /
作用:为linux的文件和目录创建档案,也可以在档案中改变文件,或者向档案中加入新的文件即用来压缩和解压文件.tar本身不具有压缩功能.他是调用压缩功能实现的 语法:tar[必要参数][选择参数][ ...
- Maven安装教程
一.安装Maven及配置环境变量 1.Maven官网地址:http://maven.apache.org/download.cgi 下载apache-maven-3.5.0-bin.zip文件 2. ...
- u3d之世界坐标系,屏幕坐标系,视口坐标系,如何获取物体距离摄像机的距离
世界坐标系就是unity的左手坐标系 屏幕坐标系是Game视图相机拍摄的场景坐标系,左下角(0,0),右上角(Screen.width,Screen.height),单位是像素.Z的位置是以相机的世界 ...