谈谈我对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 相关文章推荐
JQuery 操作Javascript对象和数组的工具函数小结
Jan 22 Javascript
JavaScript获取页面上某个元素的代码
Mar 13 Javascript
Extjs TimeField 显示正常时间格式的代码
Jun 28 Javascript
JQuery动态创建DOM、表单元素的实现代码
Aug 09 Javascript
使用JQuery和CSS模拟超链接的用户单击事件的实现代码
May 23 Javascript
JS隐藏参数post传值实例
Apr 18 Javascript
JavaScript闭包函数访问外部变量的方法
Aug 27 Javascript
jquery实现点击变换导航样式的方法
Aug 31 Javascript
javascript数组去重常用方法实例分析
Apr 11 Javascript
纯JavaScript实现实时反馈系统时间
Oct 26 Javascript
vue中Axios的封装与API接口的管理详解
Aug 09 Javascript
vue配置接口域名方法总结
May 12 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遍历目录viewDir函数
2009/12/15 PHP
ubuntu12.04使用c编写php扩展模块教程分享
2013/12/25 PHP
PHP中HTML标签过滤技巧
2014/01/07 PHP
jQuery获得IE版本不准确webbrowser的解决方法
2014/02/23 Javascript
JavaScript开发人员的10个关键习惯小结
2014/12/05 Javascript
基于jquery实现图片上传本地预览功能
2016/01/08 Javascript
全面总结Javascript对数组对象的各种操作
2017/01/22 Javascript
Angular2 自定义validators的实现方法
2017/07/05 Javascript
浅谈sass在vue注意的地方
2017/08/10 Javascript
解决option标签selected=&quot;selected&quot;属性失效的问题
2017/11/06 Javascript
浅谈MUI框架中加载外部网页或服务器数据的方法
2018/01/31 Javascript
vue debug 二种方法
2018/09/16 Javascript
JS复杂判断的更优雅写法代码详解
2018/11/07 Javascript
JS实现换肤功能的方法实例详解
2019/01/30 Javascript
微信小程序非跳转式组件授权登录的方法示例
2019/05/22 Javascript
webpack3升级到webpack4遇到问题总结
2019/09/30 Javascript
javascript 高级语法之继承的基本使用方法示例
2019/11/11 Javascript
好用的Python编辑器WingIDE的使用经验总结
2016/08/31 Python
python中类变量与成员变量的使用注意点总结
2017/04/29 Python
python基于http下载视频或音频
2018/06/20 Python
Python简单计算给定某一年的某一天是星期几示例
2018/06/27 Python
Python利用itchat库向好友或者公众号发消息的实例
2019/02/21 Python
在windows下使用python进行串口通讯的方法
2019/07/02 Python
Django REST framework 单元测试实例解析
2019/11/07 Python
python实现低通滤波器代码
2020/02/26 Python
CSS3模块的目前的状况分析
2010/02/24 HTML / CSS
Mytheresa英国官网:拥有160多个奢侈品品牌
2016/10/09 全球购物
全球最大的服务市场:Fiverr
2017/01/03 全球购物
德国自然时尚和有机产品购物网站:Waschbär
2019/05/29 全球购物
求高于平均分的学生学号及成绩
2016/09/01 面试题
商务英语专业毕业生自荐信
2013/11/05 职场文书
母校寄语大全
2014/04/10 职场文书
2014年学校党建工作总结
2014/11/11 职场文书
2015年科协工作总结
2015/05/19 职场文书
2016师德师风学习心得体会
2016/01/12 职场文书
React实现动效弹窗组件
2021/06/21 Javascript