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 相关文章推荐
Tab页界面,用jQuery及Ajax技术实现
Sep 21 Javascript
JS获取浏览器语言动态加载JS文件示例代码
Oct 31 Javascript
学习Bootstrap组件之下拉菜单
Jul 28 Javascript
AngularJS 2.0新特性有哪些
Feb 18 Javascript
TypeScript Type Innference(类型判断)
Mar 10 Javascript
js实现千分符和保留几位小数的简单实例
Aug 01 Javascript
Vue实现动态显示textarea剩余字数
May 22 Javascript
javascript数组定义的几种方法
Oct 06 Javascript
解决angularJS中input标签的ng-change事件无效问题
Sep 13 Javascript
谈谈IntersectionObserver懒加载的具体使用
Oct 15 Javascript
微信小程序完美解决scroll-view高度自适应问题的方法
Aug 08 Javascript
一篇超完整的Vue新手入门指导教程
Nov 18 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
ftp类(myftp.php)
2006/10/09 PHP
PHP_Flame(Version:Progress)的原代码
2006/10/09 PHP
PHP删除数组中的特定元素的代码
2012/06/28 PHP
PHP中几种常见的超时处理全面总结
2012/09/11 PHP
深入PHP autoload机制的详解
2013/06/09 PHP
教你如何快捷的使用cmd访问mysql小技巧
2014/05/26 PHP
windows的文件系统机制引发的PHP路径爆破问题分析
2014/07/28 PHP
linux平台编译安装PHP7并安装Redis扩展与Swoole扩展实例教程
2016/09/30 PHP
javascript中"/"运算符常见错误
2010/10/13 Javascript
jquery手风琴特效插件
2015/02/04 Javascript
JS通过ajax动态读取xml文件内容的方法
2015/03/24 Javascript
javascript使用输出语句实现网页特效代码
2015/08/06 Javascript
BootStrap Datetimepicker 汉化的实现代码
2017/02/10 Javascript
利用Node.js对文件进行重命名
2017/03/12 Javascript
React Native时间转换格式工具类分享
2017/10/24 Javascript
React路由管理之React Router总结
2018/05/10 Javascript
vue-image-crop基于Vue的移动端图片裁剪组件示例
2018/08/28 Javascript
微信小程序dom操作的替代思路实例分析
2018/12/06 Javascript
layui递归实现动态左侧菜单
2019/07/26 Javascript
小程序识别身份证,银行卡,营业执照,驾照的实现
2019/11/05 Javascript
js实现中文实时时钟
2020/01/15 Javascript
在Python的Flask框架中使用模版的入门教程
2015/04/20 Python
查看Python安装路径以及安装包路径小技巧
2015/04/28 Python
Python对列表中的各项进行关联详解
2017/08/15 Python
python通过微信发送邮件实现电脑关机
2018/06/20 Python
Python3用tkinter和PIL实现看图工具
2018/06/21 Python
uwsgi+nginx部署Django项目操作示例
2018/12/04 Python
浅谈python 读excel数值为浮点型的问题
2018/12/25 Python
Python搭建代理IP池实现获取IP的方法
2019/10/27 Python
解决keras backend 越跑越慢问题
2020/06/18 Python
简述Linux文件系统通过i节点把文件的逻辑结构和物理结构转换的工作过程
2012/04/17 面试题
教学实习自我评价
2014/01/28 职场文书
意向书范本
2014/07/29 职场文书
六查六看个人剖析材料
2014/10/14 职场文书
穷人该怎么创业?谨记以下几点
2019/07/11 职场文书
关于食品安全的演讲稿范文(三篇)
2019/10/21 职场文书