Javascript变量的作用域和作用域链详解


Posted in Javascript onApril 02, 2015

工作这几年,js学的不是很好,正好周末有些闲时间,索性买本《js权威指南》,大名鼎鼎的犀牛书,好好的把js深入的看一看。买过这本书的第一印象就是贼厚,不过后面有一半部分都是参考手册。

一:作用域

说起变量第一个要说到的肯定就是作用域,正是因为不熟悉JS的作用域,往往就会把面向对象的作用域张冠李戴,毕竟有些东西总是习惯性的这样,但是并不是每次照搬都是可以的,那么下一个问题就来了,js到底是什么作用域,当然是函数作用域了,我们的浏览器就是一个被实例化的window对象,如果在window下定义一个name字段,那么name字段就具有window这个函数作用域,也就是在window下都是可以访问的,如果在window下定义一个function ctrip,然后里面再定义一个name,那么这个新定义的name只能在ctrip函数下通用,而老的name继续在window下通用,举个例子。

Javascript变量的作用域和作用域链详解

从图中可以看出两点:

1: 在window下定义了一个name,居然还可以在function下定义一个重名的name,这个在C#里面是不可想象的。

2:在JS下就可以做到眼瞎,它只认自己的作用域,所以就出现了第一个"second",你可能觉得这个没有什么稀奇的地方,这是因为可能你还没有真正理解什么是函数作用域,解析器在执行ctrip的时候,第一件事情就是寻找ctrip下的所有局部变量,然后再执行后续语句,既然是先寻找,那么var name="second"这条语句定义在ctrip中任何位置都是可以的,下面我们把语句调换过来。

Javascript变量的作用域和作用域链详解

可以看到在ctrip函数下,第一个console.log输出的是undefined,这个结果可以证实,确实做了第一件事情是收集到了name这个局部变量,可能有人说为什么没有变成”second“,那是因为初始化操作必须是逐语句执行,所以在ctrip函数中执行console.log(name)时,此时解析器只知道有一个未赋值的变量name,所以就console的时候就是undefined了。

二:作用域链

从上面的这个例子中我们也很清楚的知道了,在function中定义的变量只具有function范围内的作用域,同时我们也看到上面这个例子只是一层嵌套,window是个大的function,里面是一个ctrip的function,同样的道理也可以延伸到多层嵌套,比如三层,四层。。。。N层,这些层就形成了一个链式结构。

Javascript变量的作用域和作用域链详解

从图中可以看到,我在ctrip下再定义了一个plane函数,这样的话就有三层了,输出的结果也是我们希望看到的,每层的name只在自己的作用域范围

内生效,但是下面有一个问题来了,有一天我傻逼了,在定义plane的函数时,把 var name="third" 中的var忘记写了,那么这个时候,plane中的

name到底是什么值呢? 是first还是second呢?

var name="first";

function ctrip(){

  var name="second";

  function plane(){

     name="third";

     console.log(name);

  }

  plane();

  console.log(name);

}

ctrip();

console.log(name);

现在就是考验你是否真的懂了作用域链,仔细想想会发现,当代码执行到plane函数中的name=”third“时,发现plane函数中并没有name这个局部变量,恰好代码又在ctrip这个大函数中,所以解析器就会回溯到ctrip函数中寻找name,发现果然有name,这个时候就把ctrip的name修改成了”third“。

Javascript变量的作用域和作用域链详解

又有一天,我喝多了酒又傻逼了一回,在定义plane函数的时候,把name="third" 错写成了 nam="third"; 丢了一个e,你可以说是酒精的问题,

又不是我代码的问题。那么这个时候解析器该怎么处理呢?同样的道理,在回溯时,发现ctrip没有,再回溯到顶层的window下,发现还是没有,

这个时候解析器做了这样的处理,既然整个链中都没有,你又赋值了,我总不能给你报错,那多尴尬呀,就索性给你在window下隐式的定义一个

nam变量,这个时候nam其实就是全局变量了。我们可以在window顶层console一下nam看看。

Javascript变量的作用域和作用域链详解

好了,关于变量的东西也就这么多了,没什么稀奇的,理解了就没什么意思了。

Javascript 相关文章推荐
JavaScript 字符串处理函数使用小结
Dec 02 Javascript
jQuery.prototype.init选择器构造函数源码思路分析
Feb 05 Javascript
js简易namespace管理器 实例代码
Jun 21 Javascript
JavaScript加入收藏夹功能(兼容IE、firefox、chrome)
May 05 Javascript
c#+jquery实现获取radio和checkbox的值
Sep 12 Javascript
jquery+html5制作超酷的圆盘时钟表
Apr 14 Javascript
小巧强大的jquery layer弹窗弹层插件
Dec 06 Javascript
Javascript从数组中随机取出不同元素的两种方法
Sep 22 Javascript
Angular的$http与$location
Dec 26 Javascript
微信小程序如何获取用户头像和昵称
Sep 23 Javascript
详解vue或uni-app的跨域问题解决方案
Feb 21 Javascript
Vue中强制组件重新渲染的正确方法
Jan 03 Vue.js
JavaScript中连接操作Oracle数据库实例
Apr 02 #Javascript
JavaScript中操作Mysql数据库实例
Apr 02 #Javascript
JavaScript使用ActiveXObject访问Access和SQL Server数据库
Apr 02 #Javascript
JavaScript实现重置表单(reset)的方法
Apr 02 #Javascript
javascript实现百度地图鼠标滑动事件显示、隐藏
Apr 02 #Javascript
jquery实现的省市区三级联动
Apr 02 #Javascript
JavaScript实现的链表数据结构实例
Apr 02 #Javascript
You might like
php 模拟GMAIL,HOTMAIL(MSN),YAHOO,163,126邮箱登录的详细介绍
2013/06/18 PHP
PHP编程中的Session阻塞问题与解决方法分析
2017/08/07 PHP
几款极品的javascript压缩混淆工具
2007/05/16 Javascript
JavaScript浏览器选项卡效果
2010/08/25 Javascript
深入理解JavaScript系列(9) 根本没有“JSON对象”这回事!
2012/01/15 Javascript
一个JS的日期格式化算法示例
2013/07/31 Javascript
js的toUpperCase方法用法实例
2015/01/27 Javascript
jquery 中ajax执行的优先级
2015/06/22 Javascript
JS实现3D图片旋转展示效果代码
2015/09/22 Javascript
深入理解JavaScript函数参数(推荐)
2016/07/26 Javascript
基于JS实现类似支付宝支付密码输入框
2016/09/02 Javascript
bootstrap flask登录页面编写实例
2016/11/01 Javascript
HTML5canvas 绘制一个圆环形的进度表示实例
2016/12/16 Javascript
js实现符合国情的日期插件详解
2017/01/19 Javascript
浅析JS中常用类型转换及运算符表达式
2017/07/23 Javascript
Windows下使用Nodejs运行js的方法
2017/09/02 NodeJs
深入理解Vuex 模块化(module)
2017/09/26 Javascript
JavaScript的setter与getter方法
2017/11/29 Javascript
vue项目部署到Apache服务器中遇到的问题解决
2018/08/24 Javascript
vue router 跳转后回到顶部的实例
2018/08/31 Javascript
解决vue动态为数据添加新属性遇到的问题
2018/09/18 Javascript
react中Suspense的使用详解
2019/09/01 Javascript
vue随机验证码组件的封装实现
2020/02/19 Javascript
python 回调函数和回调方法的实现分析
2016/03/23 Python
Python虚拟环境virtualenv的安装与使用详解
2017/05/28 Python
matplotlib实现显示伪彩色图像及色度条
2019/12/07 Python
python简单的三元一次方程求解实例
2020/04/02 Python
pycharm专业版远程登录服务器的详细教程
2020/09/15 Python
Application Cache未缓存文件无法访问无法加载问题
2014/05/31 HTML / CSS
戴森美国官网:Dyson美国
2016/09/11 全球购物
全球才华横溢工匠的家居装饰、珠宝和礼物:NOVICA
2021/01/22 全球购物
药物学专业学生的自我评价
2013/10/27 职场文书
区级文明单位申报材料
2014/05/15 职场文书
分公司负责人任命书
2014/06/04 职场文书
学校组织向国旗敬礼活动方案(中小学适用)
2014/09/27 职场文书
签约仪式致辞
2015/07/30 职场文书