谈谈我对JavaScript原型和闭包系列理解(随手笔记9)


Posted in Javascript onDecember 24, 2015

相关阅读:谈谈我对JavaScript原型和闭包系列理解(随手笔记6)   谈谈我对JavaScript原型和闭包系列理解(随手笔记8)

作用域

引用《JavaScript语言精粹和编程实践》上对作用域的定义:

变量作用域又叫变量的可见性。变量作用域完成对信息的隐蔽,也就是处理“割据”问题。

js中是没有块级作用域的(ES6中有一个let,可以在{},if,for里面声明,同时作用域限定在块级。let声明的变量不存在变量提升!这里不谈论这个,因为我也是偶然看到。)。

我们在编写代码的时候,不要在“块”里面声明变量,应该在代码的一开始就声明好,以避免发生歧义。

for(var i = 0; i < 10; i++) { //不好的声明方式
 //...
}
console.log(i);
/*----------------------------------------------*/
var i = 0; //好的声明方式
for(i = 0; i < 10; i++) {
 //....
}
console.log(i);

javascript除了全局作用域之外,还有一个函数作用域。

 我们在声明变量的时候,全局代码在最前端声明,函数中声明变量要在函数体前面声明。同时,声明变量的时候必须用"var"操作符。

var a = 10,  //全局作用域
 b = 20;
function fn() { //fn函数作用域
 var a = 100,
  c = 300;
 function bar() { //bar函数作用域
  var a = 1000,
   d = 4000;
 }
}

全局代码、fn函数和bar函数都会形成一个作用域。作用域有上下级关系,上下级关系是看函数在哪个作用域下创建的。fn函数作用域下创建了bar函数,"fn函数作用域"就是"bar函数的作用域"的上级。

作用域的最大用处就是隔离变量,不同作用域下同名变量不会有冲突

--------------------------------------------------------------------------------

作用域在函数定义的时候就已经确定了,而不是函数调用的时候确定。

 谈谈我对JavaScript原型和闭包系列理解(随手笔记9)

1、程序在加载的时候就已经确定了全局上下文环境,并随着程序的执行而对变量就行赋值。

 谈谈我对JavaScript原型和闭包系列理解(随手笔记9)

2、执行到36行,调用fn(10),创建fn函数的执行上下文环境,压栈,并将此上下文设置为活动状态。

 谈谈我对JavaScript原型和闭包系列理解(随手笔记9)

3、执行到32行,调用bar(100),创建bar(100)函数的执行上下文环境,压栈,并将此上下文设置为活动状态。

 谈谈我对JavaScript原型和闭包系列理解(随手笔记9)

4、bar(100)调用完毕,出栈,bar(100)函数上下文环境被销毁。接着执行33行,调用bar(200),创建bar(200)函数的执行上下文环境,压栈,并将此上下文设置为活动状态。

 谈谈我对JavaScript原型和闭包系列理解(随手笔记9)

5、bar(200)调用完毕,出栈,其上下文环境被销毁。此时的控制权交给了fn(10)上下文环境,其再次变为活动状态。

 谈谈我对JavaScript原型和闭包系列理解(随手笔记9)

6、此时fn(10)调用完毕,出栈,其上下文环境被销毁。控制权交给了全局执行上下文环境。

 谈谈我对JavaScript原型和闭包系列理解(随手笔记9)

到这里这一段代码的执行过程就跑完了。

然后借用一下原作者的完整图:

谈谈我对JavaScript原型和闭包系列理解(随手笔记9)

总结:

作用域只是一个“地盘”,要通过作用域对应的执行上下文环境来获取变量的值。同一个作用域下,不同的调用会产生不同的执行上下文环境,继而产生不同的变量的值。所以,作用域中变量的值是在执行过程中产生的确定的,而作用域却是在函数创建时就确定了。所以,如果要查找一个作用域下某个变量的值,就需要找到这个作用域对应的执行上下文环境,再在其中寻找变量的值。

Javascript 相关文章推荐
用Javascript实现UTF8编码转换成gb2312编码
Dec 22 Javascript
基于jquery的时间段实现代码
Aug 02 Javascript
JavaScript 更严格的相等 [译]
Sep 20 Javascript
4种JavaScript实现简单tab选项卡切换的方法
Jan 06 Javascript
js老生常谈之this,constructor ,prototype全面解析
Apr 05 Javascript
Bootstrap轮播图学习使用
Feb 10 Javascript
使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能
Oct 18 Javascript
JS使用Dijkstra算法求解最短路径
Jan 17 Javascript
Vue CL3 配置路径别名详解
May 30 Javascript
解决使用layui的时候form表单中的select等不能渲染的问题
Sep 18 Javascript
详解Vue的组件中data选项为什么必须是函数
Aug 17 Javascript
解决Element中el-date-picker组件不回填的情况
Nov 07 Javascript
JQuery实现Ajax加载图片的方法
Dec 24 #Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记8)
Dec 24 #Javascript
js中flexible.js实现淘宝弹性布局方案
Jun 23 #Javascript
正则表达式优化JSON字符串的技巧
Dec 24 #Javascript
jQuery实现移动端滑块拖动选择数字效果
Dec 24 #Javascript
不得不分享的JavaScript常用方法函数集(上)
Dec 23 #Javascript
JQuery实现的按钮倒计时效果
Dec 23 #Javascript
You might like
mac下安装nginx和php
2013/11/04 PHP
PHP调用Linux命令权限不足问题解决方法
2015/02/07 PHP
Apache启动报错No space left on device: AH00023该怎么解决
2015/10/16 PHP
Flash对联广告的关闭按钮讨论
2007/01/30 Javascript
JavaScript Chart 插件整理
2010/06/18 Javascript
jquery 查找新建元素代码
2010/07/06 Javascript
JQuery中对服务器控件 DropdownList, RadioButtonList, CheckboxList的操作总结
2011/06/28 Javascript
JS实现仿京东淘宝竖排二级导航
2014/12/08 Javascript
JavaScript DOM元素尺寸和位置
2015/04/13 Javascript
jQuery实现文本框输入同步的方法
2015/06/20 Javascript
Node.js程序中的本地文件操作用法小结
2016/03/06 Javascript
jQuery Mobile动态刷新页面样式的实现方法
2016/05/28 Javascript
分享jQuery网页元素拖拽插件
2020/12/01 Javascript
JS实现的自定义显示加载等待图片插件(loading.gif)
2016/06/17 Javascript
jQuery Ajax 实现在html页面实时显示用户登录状态
2016/12/30 Javascript
jQuery实现Select下拉列表进行状态选择功能
2017/03/30 jQuery
node.js + socket.io 实现点对点随机匹配聊天
2017/06/30 Javascript
Node做中转服务器转发接口
2017/10/18 Javascript
详解es6新增数组方法简便了哪些操作
2019/05/09 Javascript
js之切换全屏和退出全屏实现代码实例
2019/09/09 Javascript
layui多图上传实现删除功能的例子
2019/09/23 Javascript
JavaScript相等运算符的九条规则示例详解
2019/10/20 Javascript
js实现验证码干扰(动态)
2021/02/23 Javascript
python使用socket进行简单网络连接的方法
2015/04/29 Python
利用信号如何监控Django模型对象字段值的变化详解
2017/11/27 Python
python实现拓扑排序的基本教程
2018/03/11 Python
Python生成一个迭代器的实操方法
2019/06/18 Python
Pycharm连接远程服务器并实现远程调试的实现
2019/08/02 Python
django框架中间件原理与用法详解
2019/12/10 Python
python 日志模块 日志等级设置失效的解决方案
2020/05/26 Python
HTML5新增加标签和功能概述
2016/09/05 HTML / CSS
金融事务专业求职信
2014/04/25 职场文书
2014优秀大学生简历自我评价
2014/09/15 职场文书
无刑事犯罪记录证明
2014/09/18 职场文书
写给同学的新学期寄语
2015/02/27 职场文书
Moment的feature导致线上bug解决分析
2022/09/23 Javascript