JS进阶系列之执行上下文
function test(){
console.log(a);//undefined;
var a = 1;
}
test();
也许你会遇到过上面这样的面试题,你只知道它考的是变量提升,但是具体的原理又知道吗?所以我觉得很有必要搞明白底层的原理,才能加深理解,其实围绕的就是
执行上下文
的概念。
什么是执行上下文?
当控制器转到可执行的代码时,会进入该代码对应的执行上下文,可以理解为该代码对应的一个执行环境,就叫做执行上下文。
在JavaScript中运行环境有三种,分别是:
- 全局环境:JavaScript代码执行起来,首先就是进入全局环境。
- 函数环境:当函数被调用执行时,就会进入函数中执行。
- eval
所以在一个JavaScript程序中,就会产生多个不同的执行上下文,这时候就需要用到前面提到的栈
数据结构来管理了,我们称之为调用栈
。当代码在执行过程中,遇到上面说的三种情况,就会产生三种执行上下文,然后分别压入调用栈中,等一个执行上下文执行完毕,弹出栈,才能执行下一个执行上下文中的代码,这就是栈结构的特点。
执行上下文的特点
- 单线程,其实javascript就是单线程,所以很好理解。
- 同步执行,同步就是按顺序,不能同时执行。
- 全局上下文只有一个,它在浏览器关闭时才会弹出栈。
- 函数的执行上下文的数目没有限制。
- 每次某个函数被调用时,就会有新的执行上下文,即使是调用的自身函数。
demo01
function f1(){
var n = 999;
function f2(){
alert(n);
}
return f2;
}
var result = f1();
result();//999
我以上面这样一个例子讲解,执行上下文
在调用栈
中的创建过程
执行上下文的生命周期
如图所示,主要分为两个阶段,一个是创建阶段
,一个是执行阶段
。
创建阶段:
- 生成变量对象,后面会讲解
- 建立作用域链
- 确定this指向
执行阶段:
- 变量赋值
- 函数引用
- 执行其他代码
执行完毕后弹栈,等待回收
变量对象和活动对象的区别就在于,执行周期不一样,在创建阶段叫做变量对象,在执行阶段叫做活动对象。
变量对象
变量对象的创建主要有三个阶段:
- 1、创建arguments对象。
- 2、检查function函数声明创建属性。在VO对象中以函数名建立一个属性,属性值为函数的地址。如果函数名的属性已经存在了,那么该属性将会被新的引用所覆盖。
- 3、检查var变量声明创建属性。在VO对象中以变量名建立一个属性,属性值为
undefined
。为了防止同名的属性值会被修改为undefined
,则会直接跳过,原属性值不会被修改。
举个变量提升和函数提升的例子,就明白了
demo02
function test(){
console.log(a);
console.log(foo());
var a = 1;
function foo(){
return 2;
}
}
test();
这是一个典型的变量提升和函数提升的例子,最后会输出undefined和2
,接下来以执行上下文的生命周期来讲解,
创建过程
testEC = {
VO:{},
scopeChain:{},
this:{}
}
VO = {
arguments:{},
foo:<foo reference>,
a:undefined
}
执行阶段
VO->AO
AO={
arguments:{},
foo:<foo reference>,
a:2
}
等同于
function test(){
function foo(){
return 2;
}
var a;
console.log(a);
console.log(foo());
a = 1;
}
test();
通过上面知识的讲解,进一步了解到了变量提升和函数提升的底层原理,对后面知识的学习也做了铺垫。
JS进阶系列之执行上下文的更多相关文章
- javascript系列之执行上下文
原文:javascript系列之执行上下文 写在前面:一 直想系统的总结一下学过的javascript知识,喜欢这门语言也热爱这门语言.未来想从事前端方面的工作,提前把自己的知识梳理一下.前面写了些 ...
- 【 D3.js 进阶系列 】 进阶总结
进阶系列的文章从去年10月开始写的,晃眼又是4个多月了,想在年前总结一下. 首先恭祝大家新年快乐.今年是羊年吧.前段时间和朋友聊天,聊到十二生肖里为什么没猫,我张口就道:不是因为十二生肖开会的时候猫迟 ...
- 【 D3.js 进阶系列 — 4.0 】 绘制箭头
转自:http://www.ourd3js.com/wordpress/?p=660 [ D3.js 进阶系列 — 4.0 ] 绘制箭头 发表于2014/12/08 在 SVG 绘制区域中作图,在绘制 ...
- JS进阶系列-JS执行期上下文(一)
❝ 点赞再看,年薪百万 本文已收录至https://github.com/likekk/-Blog欢迎大家star,共同进步.如果文章有出现错误的地方,欢迎大家指出.后期将在将GitHub上规划前端学 ...
- JS进阶系列之作用域链
在之前写的进阶系列里面,提到了执行上下文在创建阶段,要创建变量对象.确定作用域链还有确定this的指向,本次将重点讲解一下作用域链. JavaScript代码的执行过程 在讲解作用域链之前,首先了解一 ...
- JS进阶系列之内存空间
也许很多人像我一样,觉得JS有垃圾回收机制,内存就可以不管了,以至于在全局作用域下定义了很多变量,自以为JS会自动回收,直到最近,看了阮一峰老师,关于javascript内存泄漏的文章时,才发现自己写 ...
- 【 D3.js 进阶系列 — 1.1 】 其它表格文件的读取
CSV 表格文件是以逗号作为单元分隔符的,其他还有以制表符 Tab 作为单元分隔符的 TSV 文件,还有人为定义的其他分隔符的表格文件.本文将说明在 D3 中怎样读取它们. 1. TSV 表格文件是什 ...
- JavaScript内部原理系列-执行上下文(Execution Context)
概要 本文将向大家介绍ECMAScript的执行上下文以及相关的可执行代码类型. 定义 每当控制器到达ECMAScript可执行代码的时候,控制器就进入了一个执行上下文.执行上下文(简称:EC)是个抽 ...
- 【 D3.js 进阶系列 — 1.2 】 读取 CSV 文件时乱码的解决方法
在 D3 中使用 d3.csv 读取 CSV 文件时,有时会出现乱码问题. 怎么解决呢? 1. 乱码问题 使用 d3.csv 读取 xxx.csv 文件时.假设 xxx.csv 文件使用的是 UTF- ...
随机推荐
- nginx配置基于域名、端口、IP的虚拟主机
1.基于域名的虚拟主机: 绝大多数企业对外提供服务的网站使用的都是基于域名的主机,通过不同的域名区分不同的虚拟主机. 首先我们进入安装nginxd的目录下:/application/nginx-1.6 ...
- Head First Android --- Intent
How to create the intentYou create an intent that specifies an action using the following syntax:whe ...
- linux 下正则匹配时间命名格式的文件夹
用正则表达式匹配时间格式命名的文件夹 ls mypath | grep -E "[0-9]{4}-[0-9]{1,2}" mypath为需要查询的目录 查询出来的文件夹格式为:例 ...
- 反射型XSS+文件上传+CSRF—DVWA
在学习的过程中,想到将几种漏洞进行组合练习,记录下学习过程.大佬请绕过!谢谢!! 测试环境:DVWA,安装方法参考上一篇:https://www.cnblogs.com/aq-ry/p/9220584 ...
- 【夯实PHP基础】微信小程序开发 2017.02.06
本文地址 分享提纲 1. 概述 2. 简易教程 1. 概述 1)[小程序是什么] 微信小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验. 2)[快速体验 ...
- 添加Nginx为系统服务(设置开机启动)
在本节中,我们将创建一个脚本,将Nginx守护进程转换为实际的系统服务. 这有两个作用:守护程序可以使用标准命令控制,更重要的是,它可以在系统启动时自动启动,并在系统关闭时停止. System V s ...
- POI生成Web版Word文件
POI生成Web版Word文件 1 通过URL的输入流实现 2 直接把Html文本写入到Word文件 所谓的使用POI生成Web版Word文件是指利用POI将Html代码插入到 ...
- c++函数库中一些实用的函数
有一些程序,虽然写起来不难,但是可能比较麻烦或容易出错,这时就可以用c++函数库里自带的一些实用的函数. 这里只记录一些不太常见的函数. ------------------------------- ...
- kafka libjvm 报错
kafka集群 kafka-0 出现报错信息 # # A fatal error has been detected by the Java Runtime Environment: # # SIGS ...
- 第一行代码 3-2-2 软件也要拼脸蛋-UI界面-更强大的滚动条- 卡片
<LinearLayout android:orientation="vertical" android:layout_width="match_parent&qu ...