谈谈我对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 相关文章推荐
Javascript Function对象扩展之延时执行函数
Jul 06 Javascript
对象无length属性时IE6/IE7中无法将其转换成伪数组(ArrayLike)
Jul 31 Javascript
JS合并数组的几种方法及优劣比较
Sep 19 Javascript
js获取form的方法
May 06 Javascript
vue动态组件实现选项卡切换效果
Mar 08 Javascript
vue2.0 与 bootstrap datetimepicker的结合使用实例
May 22 Javascript
cocos creator Touch事件应用(触控选择多个子节点的实例)
Sep 10 Javascript
Bootstrap Tooltip显示换行和左对齐的解决方案
Oct 11 Javascript
vue中axios解决跨域问题和拦截器的使用方法
Mar 07 Javascript
angularJS开发注意事项
May 26 Javascript
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 jQuery
在小程序中推送模板消息的实现方法
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
基于php验证码函数的使用示例
2013/05/03 PHP
ThinkPHP实现静态缓存和动态缓存示例代码
2017/05/02 PHP
Yii框架的路由配置方法分析
2019/09/09 PHP
Javascript 判断是否存在函数的方法
2013/01/03 Javascript
判断ie的两种简单方法
2013/08/12 Javascript
jquery获取css中的选择器(实例讲解)
2013/12/02 Javascript
jQuery获取当前对象标签名称的方法
2014/02/07 Javascript
JS鼠标拖拽实例分析
2015/11/23 Javascript
JQuery遍历元素的父辈和祖先的方法
2016/09/18 Javascript
d3.js中冷门却实用的内置函数总结
2017/02/04 Javascript
细说webpack源码之compile流程-rules参数处理技巧(2)
2017/12/26 Javascript
Vue+Jwt+SpringBoot+Ldap完成登录认证的示例代码
2018/05/21 Javascript
Angular ElementRef简介及其使用
2018/10/01 Javascript
jQuery+css last-child实现选择最后一个子元素操作示例
2018/12/10 jQuery
JavaScript实现图片轮播特效
2019/10/23 Javascript
vue 实现强制类型转换 数字类型转为字符串
2019/11/07 Javascript
js+canvas实现图片格式webp/png/jpeg在线转换
2020/08/22 Javascript
Python中的Numeric包和Numarray包使用教程
2015/04/13 Python
python获取一组数据里最大值max函数用法实例
2015/05/26 Python
Python找出list中最常出现元素的方法
2016/06/14 Python
python验证码识别的实例详解
2016/09/09 Python
Python冒泡排序注意要点实例详解
2016/09/09 Python
GDAL 矢量属性数据修改方式(python)
2020/03/10 Python
keras实现theano和tensorflow训练的模型相互转换
2020/06/19 Python
用CSS3的box-reflect来制作倒影效果
2016/11/15 HTML / CSS
如何强制垃圾回收
2015/10/06 面试题
文史专业毕业生自荐信
2013/11/17 职场文书
18岁生日感言
2014/01/12 职场文书
数学国培研修感言
2014/02/13 职场文书
毕业生就业协议书
2014/04/11 职场文书
十佳青年事迹材料
2014/08/21 职场文书
个人授权委托书模板
2014/09/14 职场文书
2016简单的租房合同范本
2016/03/18 职场文书
解决sql server 数据库,sa用户被锁定的问题
2021/06/11 SQL Server
winserver2019安装软件一直卡在应用程序正在为首次使用做准备
2022/06/10 Servers
win7配置本地ftp服务器的图文教程
2022/08/05 Servers