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 面向对象 function类
May 13 Javascript
JS控制文本框textarea输入字数限制的方法
Jun 17 Javascript
JavaScript获取Url里的参数
Dec 18 Javascript
Javascript模仿淘宝信用评价实例(附源码)
Nov 26 Javascript
详解JavaScript的流程控制语句
Nov 30 Javascript
javascript html5实现表单验证
Mar 01 Javascript
Backbone View 之间通信的三种方式
Aug 09 Javascript
Vue.js实现拖放效果的实例
Sep 30 Javascript
jQuery实现动态添加tr到table的方法
Dec 26 Javascript
浅谈vuex之mutation和action的基本使用
Aug 29 Javascript
JS继承与闭包及JS实现继承的三种方式
Oct 15 Javascript
使用axios请求接口,几种content-type的区别详解
Oct 29 Javascript
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数据入库前清理 注意php intval与mysql的int取值范围不同
2010/12/12 PHP
php邮件发送的两种方式
2020/04/28 PHP
Yii2压缩PHP中模板代码的输出问题
2018/08/28 PHP
js格式化时间和js格式化时间戳示例
2014/02/10 Javascript
js实现window.open不被拦截的解决方法汇总
2014/10/30 Javascript
getElementById().innerHTML与getElementById().value的区别
2016/10/27 Javascript
概述jQuery的元素筛选
2016/11/23 Javascript
Vue 页面切换效果之 BubbleTransition(推荐)
2018/04/08 Javascript
Vue递归实现树形菜单方法实例
2018/11/06 Javascript
微信小程序基于picker实现级联菜单
2019/02/15 Javascript
在React中写一个Animation组件为组件进入和离开加上动画/过度效果
2019/06/24 Javascript
LayUi使用switch开关,动态的去控制它是否被启用的方法
2019/09/21 Javascript
Websocket 向指定用户发消息的方法
2020/01/09 Javascript
优化Vue中date format的性能详解
2020/01/13 Javascript
微信小程序单选框自定义赋值
2020/05/26 Javascript
[02:41]DOTA2亚洲邀请赛小组赛第三日 赛事回顾
2015/02/01 DOTA
[04:48]DOTA2亚洲邀请赛林书豪为VGJ加油
2017/04/01 DOTA
Python 模板引擎的注入问题分析
2017/01/01 Python
python中日志logging模块的性能及多进程详解
2017/07/18 Python
python flask中静态文件的管理方法
2018/03/20 Python
更改Python的pip install 默认安装依赖路径方法详解
2018/10/27 Python
用Python识别人脸,人种等各种信息
2019/07/15 Python
Anaconda的安装及其环境变量的配置详解
2020/04/22 Python
Node.js 和 Python之间该选择哪个?
2020/08/05 Python
新加坡网上花店:FlowerAdvisor新加坡
2018/10/05 全球购物
北美主要的汽车零部件零售商:AutoShack.com
2019/02/23 全球购物
Linux的文件类型
2012/03/07 面试题
咨询公司各岗位职责
2013/12/02 职场文书
运动会入场解说词300字
2014/01/25 职场文书
开业庆典策划方案
2014/02/18 职场文书
小学生倡议书范文
2014/05/13 职场文书
ktv好的活动方案
2014/08/17 职场文书
公司市场部岗位职责
2015/04/15 职场文书
演讲稿:态度决定一切
2019/04/02 职场文书
浅谈react useEffect闭包的坑
2021/06/08 Javascript
win10频率超出范围怎么办?win10老显示超出工作频率范围的解决方法
2022/07/07 数码科技