谈谈我对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下用层来实现select的title提示属性
Feb 23 Javascript
YUI的Tab切换实现代码
Apr 11 Javascript
script标签属性type与language使用选择
Dec 02 Javascript
JQuery DataTable删除行后的页面更新利用Ajax解决
May 17 Javascript
IE浏览器IFrame对象内存不释放问题解决方法
Aug 22 Javascript
js 左右悬浮对联广告代码示例
Dec 12 Javascript
jQuery validate验证插件使用详解
May 11 Javascript
详解JavaScript模块化开发
Dec 04 Javascript
JS原型与原型链的深入理解
Feb 15 Javascript
微信小程序switch组件使用详解
Jan 31 Javascript
javascript 设计模式之组合模式原理与应用详解
Apr 08 Javascript
vue 弹出遮罩层样式实例
Jul 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
Mysql和网页显示乱码解决方法集锦
2008/03/27 PHP
解析php如何将日志写进syslog
2013/06/28 PHP
教你如何使用php session
2013/10/28 PHP
php页码形式分页函数支持静态化地址及ajax分页
2014/03/28 PHP
php根据日期或时间戳获取星座信息和生肖等信息
2015/10/20 PHP
php实现登录页面的简单实例
2019/09/29 PHP
JS中剪贴板兼容性、判断复制成功或失败
2021/03/09 Javascript
用JavaScript实现仿Windows关机效果
2007/03/10 Javascript
js类中的公有变量和私有变量
2008/07/24 Javascript
javascript快速排序算法详解
2014/09/17 Javascript
JQuery中DOM事件合成用法实例分析
2015/06/13 Javascript
javascript中FOREACH数组方法使用示例
2016/03/01 Javascript
深入理解JS正则表达式---分组
2016/07/18 Javascript
JavaScript定义数组的三种方法(new Array(),new Array('x','y')
2016/10/04 Javascript
解析JavaScript实现DDoS攻击原理与保护措施
2016/12/26 Javascript
jQuery中map函数的两种方式
2017/04/07 jQuery
Vue2.0实现组件数据的双向绑定问题
2018/03/06 Javascript
vue组件详解之使用slot分发内容
2018/04/09 Javascript
Vue使用NProgress进度条的方法
2019/09/21 Javascript
解决Vue router-link绑定事件不生效的问题
2020/07/22 Javascript
在Vue中使用Echarts可视化库的完整步骤记录
2020/11/18 Vue.js
Python给你的头像加上圣诞帽
2018/01/04 Python
python学习开发mock接口
2019/04/28 Python
Python3.5迭代器与生成器用法实例分析
2019/04/30 Python
Python3 实现文件批量重命名示例代码
2019/06/03 Python
Python当中的array数组对象实例详解
2019/06/12 Python
python卸载后再次安装遇到的问题解决
2019/07/10 Python
python使用opencv实现马赛克效果示例
2019/09/28 Python
Python队列、进程间通信、线程案例
2019/10/25 Python
python之MSE、MAE、RMSE的使用
2020/02/24 Python
理肤泉美国官网:La Roche-Posay
2018/01/17 全球购物
化工专业大学生职业生涯规划书
2014/01/14 职场文书
经贸日语专业自荐信
2014/09/02 职场文书
幼儿园见习报告
2014/10/30 职场文书
交通事故被告答辩状
2015/05/22 职场文书
PHP 时间处理类Carbon
2022/05/20 PHP