谈谈我对JavaScript原型和闭包系列理解(随手笔记8)


Posted in Javascript onDecember 24, 2015

在上篇文章给大家介绍了《谈谈我对JavaScript原型和闭包系列理解(随手笔记6)》, 谈谈我对JavaScript原型和闭包系列理解(随手笔记9)     可以点击了解详情。

执行上下文栈

执行全局代码时,会产生一个执行上下文环境,每次调用函数都又会产生执行上下文环境。当函数调用完成时,这个上下文环境以及其中的数据都会被消除,再重新回到全局上下文环境。处于活动状态的执行上下文环境只有一个。

压栈出栈过程----执行上下文栈:

谈谈我对JavaScript原型和闭包系列理解(随手笔记8)

var a = 10,    //1. 进入全局上下文环境
  fn,
  bar = function(x) {
   var b = 5;
   fn(x + b); //3. 进入fn函数上下文
  };
fn = function(y) {
 var c = 5;
 console.log(y + c);
};
bar(10);    //2. 进入bar函数上下文环境

1、在执行之前,首先创建全局上下文环境

 谈谈我对JavaScript原型和闭包系列理解(随手笔记8)

2、代码执行,执行到bar(10)之前,全局上下文中的变量在执行过程中被赋值。

 谈谈我对JavaScript原型和闭包系列理解(随手笔记8)

3、执行到bar(10)调用bar函数,同时创建该函数内部的执行上下文环境

 谈谈我对JavaScript原型和闭包系列理解(随手笔记8)

4、这时候该执行上下文环境进行压栈,设置为活动状态

 谈谈我对JavaScript原型和闭包系列理解(随手笔记8)

5、bar函数执行到fn(x + b),调用fn函数,创建了fn函数的执行上下文,并压栈,设置为活动状态

 谈谈我对JavaScript原型和闭包系列理解(随手笔记8)

6、fn函数执行完毕,fn环境出栈,被销毁,释放内存,bar函数变为活动态

 谈谈我对JavaScript原型和闭包系列理解(随手笔记8)

7、fn函数执行完毕并销毁,意味着bar也执行完毕了,此时bar函数环境出栈,并销毁。全局环境变为活动态。

 谈谈我对JavaScript原型和闭包系列理解(随手笔记8)

到这里这一段代码的执行过程就完毕了。

根据原作者的描述:

其中上下文环境的变量赋值过程我省略了许多,因为那些并不难,一看就知道。

的确!代码的大概执行过程跑完后,就能很清楚的知道各个执行环境中的变量是个怎样的状态。

讲到这里,我不得不很遗憾的跟大家说:其实以上我们所演示的是一种比较理想的情况。有一种情况,而且是很常用的一种情况,无法做到这样干净利落的说销毁就销毁。这种情况就是伟大的——闭包。要说闭包,咱们还得先从自由变量和作用域说起。

以上内容是小编给大家分享我对JavaScript原型和闭包系列理解(随手笔记8),希望大家喜欢。

Javascript 相关文章推荐
jquery下div 的resize事件示例代码
Mar 09 Javascript
简单谈谈javascript代码复用模式
Jan 28 Javascript
利用vue实现模态框组件
Dec 19 Javascript
js实现复选框的全选和取消全选效果
Jan 03 Javascript
详解axios在node.js中的post使用
Apr 27 Javascript
jQuery异步提交表单实例
May 30 jQuery
详解JSONObject和JSONArray区别及基本用法
Oct 25 Javascript
angular5 子组件监听父组件传入值的变化方法
Sep 30 Javascript
JS如何生成随机验证码
Mar 02 Javascript
js将URL网址转为16进制加密与解密函数
Mar 04 Javascript
vscode调试node.js的实现方法
Mar 22 Javascript
JavaScript enum枚举类型定义及使用方法
May 15 Javascript
js中flexible.js实现淘宝弹性布局方案
Jun 23 #Javascript
正则表达式优化JSON字符串的技巧
Dec 24 #Javascript
jQuery实现移动端滑块拖动选择数字效果
Dec 24 #Javascript
不得不分享的JavaScript常用方法函数集(上)
Dec 23 #Javascript
JQuery实现的按钮倒计时效果
Dec 23 #Javascript
基于jquery实现鼠标左右拖动滑块滑动附源码下载
Dec 23 #Javascript
JS实现的倒计时效果实例(2则实例)
Dec 23 #Javascript
You might like
解析posix与perl标准的正则表达式区别
2013/06/17 PHP
PHP使用pcntl_fork实现多进程下载图片的方法
2014/12/16 PHP
php获得客户端浏览器名称及版本的方法(基于ECShop函数)
2015/12/23 PHP
PHP编写daemon process详解及实例代码
2016/09/30 PHP
php计数排序算法的实现代码(附四个实例代码)
2020/03/31 PHP
php+mysql实现的无限分类方法类定义与使用示例
2020/05/27 PHP
添加到收藏夹代码(兼容几乎所有的浏览器)
2007/01/09 Javascript
jQuery(1.6.3) 中css方法对浮动的实现缺陷分析
2011/09/09 Javascript
JavaScript中如何通过arguments对象实现对象的重载
2014/05/12 Javascript
nodejs教程之制作一个简单的文章发布系统
2014/11/21 NodeJs
JavaScript数组合并的多种方法
2016/05/22 Javascript
使用jquery获取url及url参数的简单实例
2016/06/14 Javascript
浅谈angularJS中的事件
2016/07/12 Javascript
AngularJS 依赖注入详解及示例代码
2016/08/17 Javascript
浅谈javascript中执行环境(作用域)与作用域链
2016/12/08 Javascript
AngularJS中update两次出现$promise属性无法识别的解决方法
2017/01/05 Javascript
BootStrap实现鼠标悬停下拉列表功能
2017/02/17 Javascript
jQuery中layer分页器的使用
2017/03/13 Javascript
Javascript格式化并高亮xml字符串的方法及注意事项
2018/08/13 Javascript
layui递归实现动态左侧菜单
2019/07/26 Javascript
Element DateTimePicker日期时间选择器的使用示例
2020/07/27 Javascript
浅析JavaScript 函数柯里化
2020/09/08 Javascript
详解Python list 与 NumPy.ndarry 切片之间的对比
2017/07/24 Python
Python3 处理JSON的实例详解
2017/10/29 Python
Python实现正整数分解质因数操作示例
2018/08/01 Python
Python多进程池 multiprocessing Pool用法示例
2018/09/07 Python
Python实现的服务器示例小结【单进程、多进程、多线程、非阻塞式】
2019/05/23 Python
Python hexstring-list-str之间的转换方法
2019/06/12 Python
pytorch查看torch.Tensor和model是否在CUDA上的实例
2020/01/03 Python
20行Python代码实现一款永久免费PDF编辑工具的实现
2020/08/27 Python
境外导游求职信
2014/02/27 职场文书
大学生个人自荐信样本
2014/03/02 职场文书
致百米运动员广播稿5篇
2014/10/13 职场文书
总经理岗位职责
2015/02/04 职场文书
Python爬虫之爬取哔哩哔哩热门视频排行榜
2021/04/28 Python
Win11 Dev 预览版25174.1000发布 (附更新修复内容汇总)
2022/08/05 数码科技