谈谈我对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中:empty选择器用法实例
Dec 30 Javascript
javascript 对象数组根据对象object key的值排序
Mar 09 Javascript
jQuery实现切换字体大小的方法
Mar 10 Javascript
jquery利用命名空间移除绑定事件的方法
Mar 11 Javascript
javascript 正则表达式分组、断言详解
Apr 20 Javascript
浅析JavaScript中的平稳退化(graceful degradation)
Jul 24 Javascript
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
Aug 18 jQuery
vue获取dom元素注意事项
Dec 28 Javascript
详解Angular2学习笔记之Html属性绑定
Jan 03 Javascript
微信小程序实现的五星评价功能示例
Apr 25 Javascript
Vue实现移动端拖拽交换位置
Jul 29 Javascript
原生JS中应该禁止出现的写法
May 05 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
php smarty函数扩展
2010/03/15 PHP
PHP初学者常见问题集合 修正版(21问答)
2010/03/23 PHP
PDO::rollBack讲解
2019/01/29 PHP
javascript字典探测用户名工具
2006/10/05 Javascript
5款Javascript颜色选择器
2009/10/25 Javascript
浅析Js中的单引号与双引号问题
2013/11/06 Javascript
用javascript为页面添加天气显示实现思路及代码
2013/12/02 Javascript
jquery ajax jsonp跨域调用实例代码
2013/12/11 Javascript
js中继承的几种用法总结(apply,call,prototype)
2013/12/26 Javascript
jQuery中:header选择器用法实例
2014/12/29 Javascript
Jquery中find与each方法用法实例
2015/02/04 Javascript
JQuery中ajax方法访问web服务实例
2015/07/18 Javascript
js实现不重复导入的方法
2016/03/02 Javascript
Webpack 实现 AngularJS 的延迟加载
2016/03/02 Javascript
基于vuejs+webpack的日期选择插件
2020/05/21 Javascript
JavaScript实现简单的双色球(实例讲解)
2017/07/31 Javascript
JS实现调用本地摄像头功能示例
2018/05/18 Javascript
Bootstrap-table使用footerFormatter做统计列功能
2018/09/07 Javascript
JS+php后台实现文件上传功能详解
2019/03/02 Javascript
JS中封装axios来管控api的2种方式
2019/09/11 Javascript
JS面试题中深拷贝的实现讲解
2020/05/07 Javascript
[01:11]辉夜杯战队访谈宣传片—CDEC.Y
2015/12/26 DOTA
在Python中通过threading模块定义和调用线程的方法
2016/07/12 Python
Python内存管理方式和垃圾回收算法解析
2017/11/11 Python
python3 对list中每个元素进行处理的方法
2018/06/29 Python
Python实现Event回调机制的方法
2019/02/13 Python
解决pycharm 工具栏Tool中找不到Run manager.py Task的问题
2019/07/01 Python
Pytorch Tensor的索引与切片例子
2019/08/18 Python
pytorch 加载(.pth)格式的模型实例
2019/08/20 Python
Python脚本实现Zabbix多行日志监控过程解析
2020/08/26 Python
教师年度考核自我鉴定
2014/01/19 职场文书
计算机专业毕业生自荐信范文
2014/03/06 职场文书
承兑汇票转让证明怎么写?
2014/11/30 职场文书
教师师德工作总结2015
2015/07/22 职场文书
css常用字体属性与背景属性介绍
2022/02/28 HTML / CSS
GPU服务器的多用户配置方法
2022/07/07 Servers