谈谈我对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 相关文章推荐
js 鼠标点击事件及其它捕获
Jun 04 Javascript
基于Jquery的简单图片切换效果
Jan 06 Javascript
editable.js 基于jquery的表格的编辑插件
Oct 24 Javascript
在图片上显示左右箭头类似翻页的代码
Mar 04 Javascript
js 获取元素在页面上的偏移量的方法汇总
Apr 13 Javascript
JavaScript实现随机替换图片的方法
Apr 16 Javascript
JQuery实现鼠标移动图片显示描述层的方法
Jun 25 Javascript
设置jQueryUI DatePicker默认语言为中文
Jun 04 Javascript
学好js,这些js函数概念一定要知道【推荐】
Jan 19 Javascript
jQuery+Ajax实现用户名重名实时检测
Jun 01 jQuery
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
Sep 05 Javascript
原生js实现移动端触摸轮播的示例代码
Dec 22 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递归算法和应用方法介绍
2013/04/15 PHP
destoon实现调用当前栏目分类及子分类和三级分类的方法
2014/08/21 PHP
php实现简单文件下载的方法
2015/01/30 PHP
PHP检测用户是否关闭浏览器的方法
2016/02/14 PHP
基于jquery的划词搜索实现(备忘)
2010/09/14 Javascript
Jquery Change与bind事件代码
2011/09/29 Javascript
javascript中常用编程知识
2013/04/08 Javascript
你必须知道的Javascript知识点之"this指针"的应用
2013/04/23 Javascript
固定表格行列(expression)在IE下适用
2013/07/25 Javascript
Js实现动态添加删除Table行示例
2014/04/14 Javascript
easyui Draggable组件实现拖动效果
2015/08/19 Javascript
Knockoutjs 学习系列(二)花式捆绑
2016/06/07 Javascript
Javascript操作dom对象之select全面解析
2017/04/24 Javascript
Vue 2.0在IE11中打开项目页面空白的问题解决
2017/07/16 Javascript
web前端vue之vuex单独一文件使用方式实例详解
2018/01/11 Javascript
React组件中的this的具体使用
2018/02/28 Javascript
浅谈Angular6的服务和依赖注入
2018/06/27 Javascript
如何安装控制器JavaScript生成插件详解
2018/10/21 Javascript
在微信小程序中保存网络图片
2019/02/12 Javascript
nodejs实现聊天机器人功能
2019/09/19 NodeJs
TypeScript的安装、使用、自动编译的实现
2020/04/10 Javascript
Python中关键字nonlocal和global的声明与解析
2017/03/12 Python
Python中你应该知道的一些内置函数
2017/03/31 Python
浅谈Python中的全局锁(GIL)问题
2019/01/11 Python
解决nohup执行python程序log文件写入不及时的问题
2019/01/14 Python
对python多线程SSH登录并发脚本详解
2019/02/14 Python
TensorFlow实现简单的CNN的方法
2019/07/18 Python
pytorch实现用Resnet提取特征并保存为txt文件的方法
2019/08/20 Python
Pytorch模型转onnx模型实例
2020/01/15 Python
解决Python中报错TypeError: must be str, not bytes问题
2020/04/07 Python
利用CSS3实现平移动画效果示例代码
2016/10/12 HTML / CSS
项目申报专员岗位职责
2014/07/09 职场文书
2014年督导工作总结
2014/11/19 职场文书
2014年体检中心工作总结
2014/12/23 职场文书
运动会报道稿大全
2015/07/23 职场文书
Vue3如何理解ref toRef和toRefs的区别
2022/02/18 Vue.js