谈谈我对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 相关文章推荐
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
Jan 03 Javascript
JSON为什么那样红为什么要用json(另有洞天)
Dec 26 Javascript
JavaScript检查某个function是否是原生代码的方法
Aug 20 Javascript
js制作简易年历完整实例
Jan 28 Javascript
js获取新浪天气接口的实现代码
Jun 06 Javascript
玩转JavaScript OOP - 类的实现详解
Jun 08 Javascript
javascript中Number的方法小结
Nov 21 Javascript
js实现鼠标移动到图片产生遮罩效果
Oct 21 Javascript
动态统计当前输入内容的字节、字符数的实例详解
Oct 27 Javascript
详解使用vuex进行菜单管理
Dec 21 Javascript
JS 创建对象的模式实例小结
Apr 28 Javascript
微信小程序实现简单购物车功能
Dec 30 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
php 编写安全的代码时容易犯的错误小结
2010/05/20 PHP
解决ThinkPHP关闭调试模式时报错的问题汇总
2015/04/22 PHP
php实现的RSS生成类实例
2015/04/23 PHP
Yii2.0 模态弹出框+ajax提交表单
2016/05/22 PHP
详解yii2实现分库分表的方案与思路
2017/02/03 PHP
javascript Firefox与IE 替换节点的方法
2010/02/24 Javascript
判断客户端浏览器是否安装了Flash插件的多种方法
2010/08/11 Javascript
javascript工具库代码
2012/03/29 Javascript
JavaScript高级程序设计(第3版)学习笔记10 再访js对象
2012/10/11 Javascript
jQuery 借助插件Lavalamp实现导航条动态美化效果
2013/09/27 Javascript
利用JS解决ie6不支持max-width,max-height问题的方法
2014/01/02 Javascript
JavaScript正则获取地址栏中参数的方法
2017/03/02 Javascript
jQuery实现菜单栏导航效果
2017/08/15 jQuery
vue组件之间通信方式实例总结【8种方式】
2019/02/22 Javascript
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
2019/05/14 jQuery
Vue清除定时器setInterval优化方案分享
2020/07/21 Javascript
Vue 防止短时间内连续点击后多次触发请求的操作
2020/11/11 Javascript
[00:32]DOTA2上海特级锦标赛 Ehome战队宣传片
2016/03/03 DOTA
centos下更新Python版本的步骤
2013/02/12 Python
python进阶教程之文本文件的读取和写入
2014/08/29 Python
Python学习pygal绘制线图代码分享
2017/12/09 Python
pandas 使用apply同时处理两列数据的方法
2018/04/20 Python
在PyCharm中实现添加快捷模块
2020/02/12 Python
解决python-docx打包之后找不到default.docx的问题
2020/02/13 Python
python GUI库图形界面开发之PyQt5开发环境配置与基础使用
2020/02/25 Python
pycharm设置python文件模板信息过程图解
2020/03/10 Python
最新创业融资计划书
2014/01/19 职场文书
历史专业大学生职业生涯规划书
2014/03/13 职场文书
IT工程师岗位职责
2014/07/04 职场文书
党委书记个人对照检查材料
2014/09/15 职场文书
2014年酒店服务员工作总结
2014/12/08 职场文书
停电通知范文
2015/04/16 职场文书
宾馆安全管理制度
2015/08/06 职场文书
Pytorch使用shuffle打乱数据的操作
2021/05/20 Python
mysql5.7使用binlog 恢复数据的方法
2021/06/03 MySQL
JavaScript中isPrototypeOf函数
2021/11/07 Javascript