谈谈我对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 页面刷新location.reload和location.replace的区别小结
Dec 24 Javascript
如何在JavaScript中实现私有属性的写类方式(二)
Dec 04 Javascript
javascript和jquery实现设置和移除文本框默认值效果代码
Jan 13 Javascript
javascript手工制作悬浮菜单
Feb 12 Javascript
jQuery插件zepto.js简单实现tab切换
Jun 16 Javascript
jquery SweetAlert插件实现响应式提示框
Aug 18 Javascript
ES6新数据结构Set与WeakSet用法分析
Mar 31 Javascript
webpack多页面开发实践
Dec 18 Javascript
vue项目创建并引入饿了么elementUI组件的步骤
Apr 11 Javascript
vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component
Apr 30 Javascript
使用JavaScript计算前一天和后一天的思路详解
Dec 20 Javascript
vue全局使用axios的操作
Sep 08 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/08/05 PHP
php处理restful请求的路由类分享
2014/02/27 PHP
PHP实现利用MySQL保存session的方法
2014/08/23 PHP
PHP排序算法之简单选择排序(Simple Selection Sort)实例分析
2018/04/20 PHP
php解析非标准json、非规范json的方式实例
2020/12/10 PHP
js jquery分别实现动态的文件上传操作按钮的添加和删除
2014/01/13 Javascript
JavaScript实现搜索框的自动完成功能(一)
2016/02/25 Javascript
如何消除inline-block属性带来的标签间间隙
2016/03/31 Javascript
Js操作DOM元素及获取浏览器高宽的简单方法
2016/09/08 Javascript
js日期相关函数dateAdd,dateDiff,dateFormat等介绍
2016/09/24 Javascript
浅析JavaScript中break、continue和return的区别
2016/11/30 Javascript
Javascript中的prototype与继承
2017/02/06 Javascript
JS中静态页面实现微信分享功能
2017/02/06 Javascript
JS实现li标签的删除
2019/04/12 Javascript
在vs code 中如何创建一个自己的 Vue 模板代码
2020/11/10 Javascript
vue3.0封装轮播图组件的步骤
2021/03/04 Vue.js
[00:12]2018DOTA2亚洲邀请赛 Sccc亮相SOLO赛,今年他又会有什么样的战绩?
2018/04/06 DOTA
python实现读取命令行参数的方法
2015/05/22 Python
Python fileinput模块使用实例
2015/06/03 Python
简单的python后台管理程序
2017/04/13 Python
Python 用Redis简单实现分布式爬虫的方法
2017/11/23 Python
让你Python到很爽的加速递归函数的装饰器
2019/05/26 Python
Python3+Appium实现多台移动设备操作的方法
2019/07/05 Python
python中dict使用方法详解
2019/07/17 Python
Django 模型类(models.py)的定义详解
2019/07/19 Python
python 根据网易云歌曲的ID 直接下载歌曲的实例
2019/08/24 Python
Python分割训练集和测试集的方法示例
2019/09/19 Python
python中的itertools的使用详解
2020/01/13 Python
python使用信号量动态更新配置文件的操作
2020/04/01 Python
Python Django搭建网站流程图解
2020/06/13 Python
浅谈Python xlwings 读取Excel文件的正确姿势
2021/02/26 Python
Answear匈牙利:来自全球200多个知名时尚品牌
2017/04/21 全球购物
英国最大的海报商店:GB Posters
2018/03/20 全球购物
Solaris操作系统的线程机制
2012/12/23 面试题
MySQL完整性约束的定义与实例教程
2021/05/30 MySQL
Shell脚本一键安装Nginx服务自定义Nginx版本
2022/03/20 Servers