谈谈我对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 this 和 $(this) 的区别
Aug 23 Javascript
jquery 笔记 事件
Nov 02 Javascript
获取offsetTop和offsetLeft值的js代码(兼容)
Apr 16 Javascript
通过JS来判断页面控件是否获取焦点
Jan 03 Javascript
jQuery实现点击按钮文字变成input框点击保存变成文字
May 09 Javascript
JS针对Array的各种操作汇总
Nov 29 Javascript
js实现移动端轮播图效果
Dec 09 Javascript
js实现鼠标跟随运动效果
Aug 02 Javascript
关于laydate.js加载laydate.css路径错误问题解决
Dec 27 Javascript
js实现图片3D轮播效果
Sep 21 Javascript
vue 导航锚点_点击平滑滚动,导航栏对应变化详解
Aug 10 Javascript
vue 获取到数据但却渲染不到页面上的解决方法
Nov 19 Vue.js
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/02 PHP
php通过session防url攻击方法
2014/12/10 PHP
PHP闭包函数传参及使用外部变量的方法
2016/03/15 PHP
Laravel框架Eloquent ORM修改数据操作示例
2019/12/03 PHP
php实现将数组或对象写入到文件的方法小结【三种方法】
2020/04/22 PHP
七种PHP开发环境搭建工具
2020/06/28 PHP
javascript 放大镜效果js组件 qsoft.PopBigImage.v0.35 加入了chrome支持
2009/04/07 Javascript
extJs 文本框后面加上说明文字+下拉列表选中值后触发事件
2009/11/27 Javascript
JAVASCRIPT函数作用域和提前声明 分享
2013/08/22 Javascript
Javascript异步编程模型Promise模式详细介绍
2014/05/08 Javascript
jQuery中;function($,undefined) 前面的分号的用处
2014/12/17 Javascript
JavaScript动态创建link标签到head里的方法
2014/12/22 Javascript
javascript实现简单的鼠标拖动效果实例
2015/04/10 Javascript
jQuery实现转动随机数抽奖效果的方法
2015/05/21 Javascript
浅谈Webpack自动化构建实践指南
2017/12/18 Javascript
layui问题之自动滚动二级iframe页面到指定位置的方法
2019/09/18 Javascript
python中while循环语句用法简单实例
2015/05/07 Python
python通过ftplib登录到ftp服务器的方法
2015/05/08 Python
Django中间件实现拦截器的方法
2018/06/01 Python
Tensorflow 合并通道及加载子模型的方法
2018/07/26 Python
Python之两种模式的生产者消费者模型详解
2018/10/26 Python
Pytorch实现GoogLeNet的方法
2019/08/18 Python
python每5分钟从kafka中提取数据的例子
2019/12/23 Python
nginx搭建基于python的web环境的实现步骤
2020/01/03 Python
python 录制系统声音的示例
2020/12/21 Python
CSS3按钮鼠标悬浮实现光圈效果源码
2016/09/11 HTML / CSS
戴尔英国翻新电脑和电子产品:Dell UK Refurbished Computers
2019/07/30 全球购物
2014年医学生毕业自我鉴定
2014/03/26 职场文书
党员大会主持词
2014/04/02 职场文书
英语课前三分钟演讲稿(6篇)
2014/09/13 职场文书
个人剖析材料及整改措施
2014/10/07 职场文书
2014大学生学生会工作总结
2014/12/19 职场文书
2015年党员岗位承诺书
2015/04/27 职场文书
运动会闭幕式致辞
2015/07/29 职场文书
MySQL 四种连接和多表查询详解
2021/07/16 MySQL
Android开发手册TextInputLayout样式使用示例
2022/06/10 Java/Android