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 相关文章推荐
获取当前网页document.url location.href区别总结
May 10 Javascript
Extjs学习笔记之九 数据模型(上)
Jan 11 Javascript
jquery选择器-根据多个属性选择示例代码
Oct 21 Javascript
jQuery实现字符串按指定长度加入特定内容的方法
Mar 11 Javascript
JavaScript DOM元素尺寸和位置
Apr 13 Javascript
Javascript获取数组中的最大值和最小值的方法汇总
Jan 01 Javascript
Bootstrap+jfinal实现省市级联下拉菜单
May 30 Javascript
JS闭包与延迟求值用法示例
Dec 22 Javascript
简单谈谈axios中的get,post方法
Jun 25 Javascript
angular4 共享服务在多个组件中数据通信的示例
Mar 30 Javascript
bootstrap自定义样式之bootstrap实现侧边导航栏功能
Sep 10 Javascript
Vue实现远程获取路由与页面刷新导致404错误的解决
Jan 31 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 和 MySQL 基础教程(一)
2006/10/09 PHP
php XMLWriter类的简单示例代码(RSS输出)
2011/09/30 PHP
php解析url的三个示例
2014/01/20 PHP
PHP+mysql防止SQL注入的方法小结
2019/04/27 PHP
推荐自用 Javascript 缩图函数 (onDOMLoaded)……
2007/10/23 Javascript
jquery ready(fn)事件使用介绍
2013/08/21 Javascript
js处理php输出时间戳对不上号的解决方法
2014/06/20 Javascript
node.js中的console.trace方法使用说明
2014/12/09 Javascript
JS实现点击登录弹出窗口同时背景色渐变动画效果
2016/03/25 Javascript
Vue2.x中的Render函数详解
2017/05/30 Javascript
微信小程序实现页面跳转传值的方法
2017/10/12 Javascript
用React实现一个完整的TodoList的示例代码
2017/10/30 Javascript
Angular 容器部署的方法
2018/04/17 Javascript
微信端调取相册和摄像头功能,实现图片上传,并上传到服务器
2019/05/16 Javascript
vue input输入框关键字筛选检索列表数据展示
2020/10/26 Javascript
Vue 防止短时间内连续点击后多次触发请求的操作
2020/11/11 Javascript
Python中字典的基础知识归纳小结
2015/08/19 Python
Python 转义字符详细介绍
2017/03/21 Python
python实现将读入的多维list转为一维list的方法
2018/06/28 Python
Python读取Excel表格,并同时画折线图和柱状图的方法
2018/10/14 Python
python中的print()输出
2019/04/12 Python
Python之修改图片像素值的方法
2019/07/03 Python
在python中将list分段并保存为array类型的方法
2019/07/15 Python
python爬虫 正则表达式解析
2019/09/28 Python
使用python实现希尔、计数、基数基础排序的代码
2019/12/25 Python
使用python图形模块turtle库绘制樱花、玫瑰、圣诞树代码实例
2020/03/16 Python
马来西亚奢侈品牌购物商城:Valiram 247
2020/09/29 全球购物
杭州时比特电子有限公司SQL
2013/08/22 面试题
大学生农村教师实习自我鉴定
2013/09/21 职场文书
优秀企业获奖感言
2014/02/01 职场文书
《植物妈妈有办法》教学反思
2014/02/25 职场文书
试用期自我鉴定范文
2014/03/20 职场文书
英文请假条
2014/04/11 职场文书
个人先进事迹材料范文
2014/12/29 职场文书
护士辞职信怎么写
2015/02/27 职场文书
工人先锋号事迹材料(2016精选版)
2016/03/01 职场文书