JS作用域,作用域,作用链详解
前言
通过本文,你大概明白作用域,作用域链是什么,毕竟这也算JS中的基本概念。
一.作用域(scope)
什么是作用域,你可以理解为你所声明变量的可用范围,我在某个范围内申明了一个变量,且这个变量能在这个范围内可用, 那么我可以说此范围就是该变量的作用域。
作用域一般分为局部作用域和全局作用域。
怎么理解呢,先说局部作用域。假设我在A范围内用var申明了一个变量a,变量a只能在范围A内使用,超出A范围就调用不到,那么这样的变量a就是局部变量,范围A就是所说的局部作用域。
function A(){
var a = ;
console.log(a);
}
A();//
console.log(a);//报错,A未定义
假设我们在全局范围(没在任何函数体内)申明了变量b,你可以在任何局部作用域内去使用它,那么我们一般称b为全局变量,包含b的范围就是全局作用域,b随处可用,没任何限制。
var b = ;
function B(){
console.log(b);
}
B();//
console.log(b);//
我们在上面说,在A范围内用var申明变量a,a为局部变量,当我们不用var申明时,即使在一个局部作用域内,它依旧属于全局变量。
function A(){
a = ;
console.log(a);
}
A();//
console.log(a);//
只要一个变量申明前面未加任何申明符,那此变量就是全局变量,我们很少这样去做,因为很难保证后期维护不会导致变量申明重名,这样的做法容易造成全局污染。
顺带一提,在函数体内,局部变量的优先级高于同名的全局变量(函数形参也是局部变量),如下:
var a = ;
function A(a){
console.log(a);
}
A();//
当然,函数的局部变量会被已存在的局部变量所覆盖:
function A(a){
var a = ;
console.log(a);
}
A();//
有一点需要注意的是,我们在实际开发中往往会遇到作用域嵌套,其实只要清楚作用域间变量是否能使用,是否会被覆盖的关系,就会很清晰了。
var a = ;
function A(){
var a = ;
function B(){
var a = ;
console.log(a);
}
return B();
}
A();//
二.变量提升
准确来说,在ES6中新增的申明符let已经解决了变量提升这种不严谨的问题,我在这里简单提提,之前也有一篇博文是专门介绍变量提升的。
什么是变量提升呢,就是说,一个变量在对应的作用域内是随处可见的,意思是,就算使用在前,申明在后,它依旧能够使用,不会报错。
具体想了解看这篇文章吧--申明提前,变量申明提前,函数申明提前,申明提前的先后顺序
三.作用域链
我们在上面说,作用域也存在嵌套的问题,那么我们可以这样去理解作用域链,当我们需要某个变量的值时,我们先去理它最近的作用域去找,如果找不套,就找它的上级作用域,依次类推,直到找到全局,如果全都未定义,那就抛出一个错误,如下。
var a =
function A(){
function B(){
console.log(a);
}
return B();
}
A();//1
可以说,作用链的寻找过程是从内向外的过程,而不是从外到内,可以站在局部作用域去调用全局作用域的属性,反过来是不允许的。
OK,概念大概说到这里吧,嗯,还是来几道题目巩固下。
题目一
var a=;
function A(){
alert(a);
};
function B(){
var a=;
A();
}
B();//
为什么输出10,而不是20?js中变量的作用域链与定义时的环境有关,与执行时无关。
我们调用函数B后,函数B又调用了函数A,函数A里面没定义变量a但是要用a,函数A只是被B调用且不传参,因此函数A无权使用函数B的局部变量a,而我们在上方还有一个全局变量a,因此这里输出10.
var a=;
function A(a){
alert(a);
};
function B(){
var a=;
A(a);
}
B();//
这样就可以输出20了,函数B调用函数A的同时传入参数a,函数B提供了变量a,那就输出20了。
题目二
function aaa(){
a=;
}
alert(a);//报错
想到了一个问题,这里就将题目稍作修改了。我们在前面说,在局部作用域内,不用var 申明一个变量,它也是全局变量,随处可见,那为何在外输出它会报错呢?
函数是个很奇怪的东西,可以这样理解,一个函数当没被调用,它其实是不可见的,它里面的所有变量也不可见,即使a确实是全局变量没错,它还是在是否可见上受到了函数的限制,调用后就可见了。
function A(){
a=;
}
A()
alert(a);//
那我们改成这样呢?
alert(a);//报错
function A(){
a=;
}
A();
alert(a)
不是说函数调用后里面的变量a就随便用了吗,怎么上面的又报错了?因为代码都有自己的执行顺序,要知道第一次alert a,此时函数还未被调用,所以就报错了,有点绕,试着理解。
就整理这么多吧,希望有所帮助。
本文思路参考了 博文
JS作用域,作用域,作用链详解的更多相关文章
- 你不知道的JavaScript--Item15 prototype原型和原型链详解
用过JavaScript的同学们肯定都对prototype如雷贯耳,但是这究竟是个什么东西却让初学者莫衷一是,只知道函数都会有一个prototype属性,可以为其添加函数供实例访问,其它的就不清楚了, ...
- ext.js的mvc开发模式详解
ext.js的mvc开发模式详解和环境配置 在JS的开发过程中,大规模的JS脚本难以组织和维护,这一直是困扰前端开发人员的头等问题.Extjs为了解决这种问题,在Extjs 4.x版本中引入了MVC开 ...
- JS中的event 对象详解
JS中的event 对象详解 JS的event对象 Event属性和方法:1. type:事件的类型,如onlick中的click:2. srcElement/target:事件源,就是发生事件的 ...
- js中鼠标滚轮事件详解
js中鼠标滚轮事件详解 (以下内容部分内容参考了http://adomas.org/javascript-mouse-wheel/ ) 之前js 仿Photoshop鼠标滚轮控制输入框取值中已使用 ...
- Android JNI作用及其详解
Android JNI作用及其详解 Java Native Interface (JNI)标准是Java平台的一部分,它允许Java代码和其他语言写的代码进行交互.JNI 是本地编程接口,它使得在 J ...
- 微信JS接口汇总及使用详解
这篇文章主要介绍了微信JS接口汇总及使用详解,十分的全面.详尽,包含分享到朋友圈,分享给朋友,分享到QQ,拍照或从手机相册中选图,识别音频并返回识别结果,使用微信内置地图查看位置等接口,有需要的小伙伴 ...
- “全栈2019”Java异常第十五章:异常链详解
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java异 ...
- js中中括号,大括号使用详解
js中中括号,大括号使用详解 一.总结 一句话总结:{ } 是一个对象,[ ] 是一个数组 1.js大括号{}表示什么意思? 对象 { } 大括号,表示定义一个对象,大部分情况下要有成对的属性和值,或 ...
- js对象浅拷贝和深拷贝详解
js对象浅拷贝和深拷贝详解 作者:i10630226 字体:[增加 减小] 类型:转载 时间:2016-09-05我要评论 这篇文章主要为大家详细介绍了JavaScript对象的浅拷贝和深拷贝代码,具 ...
随机推荐
- Tomcat数据源配置方法总结
最近接触的数据表管理项目,涉及到了数据源配置,所以整理了一下配置方法: JNDI数据源统一都是在Tomcat下server.xml中配置的,根据应用范围的差别又分为一下几种方式: 第一种:配置单个应用 ...
- http://vjudge.net/contest/view.action?cid=51142#problem/C 精度转换的一道题。。。
C - Get-Together at Den's Time Limit:1000MS Memory Limit:65536KB 64bit IO Format:%I64d & ...
- 8.css内容移出与精灵图
定位的盒子居中显示 ★:margin:0 auto; 只能让标准流的盒子居中对齐. ★定位的盒子居中:先左右走父元素盒子的一半50%,在向左走子盒子的一半(margin-left:负值.) 标签包含 ...
- sql server rdl report 如何用动态sql
我做rdl report 一般用存储过程,可是今天遇到个问题,需要用动态sql,rdl report数据集不能绑定字段 查了一下谷歌,解决如下: declare @CarrierList table ...
- 文件寄生——寻找宿主的不归路(NTFS文件流实际应用)
咱们今天来研究下NTFS文件流: NTFS文件系统实现了多文件流特性,NTFS环境一个文件默认使用的是未命名的文件流,同时可创建其他命名的文件流,windows资源管理器默认不显示出文件的命名文件流, ...
- webstorm “Unterminated statement”
使用webstorm的时候,写console.log,或者一些其他语句的时候 偶尔会出现这种提示,不是报错,就是看着别扭,应该是写法规范问题. 解决办法: 在下面空一行就行了
- MySQL赋权
MySQL 赋予用户权限命令的简单格式可概括为:grant 权限 on 数据库对象 to 用户 一.grant 普通数据用户,查询.插入.更新.删除 数据库中所有表数据的权利.grant select ...
- 冰与火之歌居然是在 DOS 系统上写出来的
简评:<权力的游戏>第八季(最终季)终于开播了!这部美剧的原著小说有一个很有趣的冷知识 -- 它是在运行 DOS 系统的计算机上写出来的.其实不少老粉都已经知道这个典故,不过听到老爷子的亲 ...
- Tools - 文本编辑器Notepad++
00 - NotePad++ 官网 01 - Notepad++修改主题 依次点击设置---语言格式设置---选择主题,在显示界面中修改相关设置(背景色.前景色.字体等). 02 - Notepad+ ...
- 机器学习-Matplotlib绘图(柱状图,曲线图,点图)
matplotlib 作为机器学习三大剑客之一 ,比热按时无比强大的 matplotlib是绘图库,所以呢我就分享一下简单的绘图方式 #柱状图 #导报 柱状图 import matplotlib. ...