谈谈我对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 学习笔记一些小技巧
Mar 28 Javascript
调试JavaScript中正则表达式中遇到的问题
Jan 27 Javascript
js如何判断输入字符串长度
Dec 16 Javascript
JavaScript中利用jQuery绑定事件的几种方式小结
Mar 06 Javascript
JS实现读取xml内容并输出到div中的方法示例
Apr 19 Javascript
详解.vue文件中style标签的几个标识符
Jul 17 Javascript
vue+iview+less 实现换肤功能
Aug 17 Javascript
微信小程序如何获取手机验证码
Nov 04 Javascript
vue.js实现二级菜单效果
Oct 19 Javascript
javascript设计模式 ? 命令模式原理与用法实例分析
Apr 20 Javascript
微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法
May 19 Javascript
vue调用微信JSDK 扫一扫,相册等需要注意的事项
Jan 03 Vue.js
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
DIY实用性框形天线
2021/03/02 无线电
php实现的日历程序
2015/06/18 PHP
浅析XMLHttpRequest的缓存问题
2013/12/13 Javascript
Jquery实现自定义tooltip示例代码
2014/02/12 Javascript
jQuery实现的原图对比窗帘效果
2014/06/15 Javascript
jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果
2015/08/25 Javascript
JavaScript如何获取数组最大值和最小值
2015/11/18 Javascript
jQuery中iframe的操作(点击按钮新增窗口)
2016/04/20 Javascript
jQuery webuploader分片上传大文件
2016/11/07 Javascript
jQuery实现手机上输入后隐藏键盘功能
2017/01/04 Javascript
bootstrap滚动监控器使用方法解析
2017/01/13 Javascript
关于vue单文件中引用路径的处理方法
2018/01/08 Javascript
讲解vue-router之什么是编程式路由
2018/05/28 Javascript
实例详解Vue项目使用eslint + prettier规范代码风格
2018/08/20 Javascript
vue使用localStorage保存登录信息 适用于移动端、PC端
2019/05/27 Javascript
浅谈使用nodejs搭建web服务器的过程
2020/07/20 NodeJs
浅谈flask中的before_request与after_request
2018/01/20 Python
tensorflow实现简单逻辑回归
2018/09/07 Python
关于阿里云oss获取sts凭证 app直传 python的实例
2019/08/20 Python
python-opencv获取二值图像轮廓及中心点坐标的代码
2019/08/27 Python
pytorch多GPU并行运算的实现
2019/09/27 Python
Pycharm创建python文件自动添加日期作者等信息(步骤详解)
2021/02/03 Python
一篇文章带你学习CSS3图片边框
2020/11/04 HTML / CSS
blueseventy官网:铁人三项和比赛泳衣
2021/02/06 全球购物
如何掌握自荐信格式呢
2013/11/19 职场文书
有关打架的检讨书
2014/01/25 职场文书
消防安全检查制度
2014/02/04 职场文书
光信息科学与技术专业职业生涯规划
2014/03/13 职场文书
青年标兵事迹材料
2014/08/16 职场文书
县长群众路线对照检查材料思想汇报
2014/10/02 职场文书
大学生入党自荐书
2015/03/05 职场文书
JavaScript实现淘宝商品图切换效果
2021/04/29 Javascript
OpenCV-Python使用cv2实现傅里叶变换
2021/06/09 Python
mysql备份策略的实现(全量备份+增量备份)
2021/07/07 MySQL
宝塔更新Python及Flask项目的部署
2022/04/11 Python
Elasticsearch6.2服务器升配后的bug(避坑指南)
2022/09/23 Servers