五句话搞定JavaScript作用域
JavaScript的作用域一直以来是前端开发中比较难以理解的知识点,对于JavaScript的作用域主要记住几句话,走遍天下都不怕...
一、“JavaScript中无块级作用域”
在Java或C#中存在块级作用域,即:大括号也是一个作用域。
- public static void main ()
- {
- if(1==1){
- String name = "seven";
- }
- System.out.println(name);
- }
- // 报错
Java
- public static void Main()
- {
- if(1==1){
- string name = "seven";
- }
- Console.WriteLine(name);
- }
- // 报错
C#
在JavaScript语言中无块级作用域
- function Main(){
- if(1==1){
- var name = 'seven';
- }
- console.log(name);
- }
- // 输出: seven
补充:标题之所以添加双引号是因为JavaScript6中新引入了 let 关键字,用于指定变量属于块级作用域。
二、JavaScript采用函数作用域
在JavaScript中每个函数作为一个作用域,在外部无法访问内部作用域中的变量。
- function Main(){
- var innerValue = 'seven';
- }
- Main();
- console.log(innerValue);
- // 报错:Uncaught ReferenceError: innerValue is not defined
三、JavaScript的作用域链
由于JavaScript中的每个函数作为一个作用域,如果出现函数嵌套函数,则就会出现作用域链。
- xo = 'alex';
- function Func(){
- var xo = "seven";
- function inner(){
- var xo = 'alvin';
- console.log(xo);
- }
- inner();
- }
- Func();
如上述代码则出现三个作用域组成的作用域链,如果出现作用域链后,那么寻找变量时候就会出现顺序,对于上述实例:
当执行console.log(xo)时,其寻找顺序为根据作用域链从内到外的优先级寻找,如果内层没有就逐步向上找,直到没找到抛出异常。
四、JavaScript的作用域链执行前已创建
JavaScript的作用域在被执行之前已经创建,日后再去执行时只需要按照作用域链去寻找即可。
示例一:
- xo = 'alex';
- function Func(){
- var xo = "seven";
- function inner(){
- console.log(xo);
- }
- return inner;
- }
- var ret = Func();
- ret();
- // 输出结果: seven
上述代码,在函数被调用之前作用域链已经存在:
- 全局作用域 -> Func函数作用域 -> inner函数作用域
当执行【ret();】时,由于其代指的是inner函数,此函数的作用域链在执行之前已经被定义为:全局作用域 -> Func函数作用域 -> inner函数作用域,所以,在执行【ret();】时,会根据已经存在的作用域链去寻找变量。
示例二:
- xo = 'alex';
- function Func(){
- var xo = "eirc";
- function inner(){
- console.log(xo);
- }
- xo = 'seven';
- return inner;
- }
- var ret = Func();
- ret();
- // 输出结果: seven
上述代码和示例一的目的相同,也是强调在函数被调用之前作用域链已经存在:
- 全局作用域 -> Func函数作用域 -> inner函数作用域
不同的时,在执行【var ret = Func();】时,Func作用域中的xo变量的值已经由 “eric” 被重置为 “seven”,所以之后再执行【ret();】时,就只能找到“seven”。
示例三:
- xo = 'alex';
- function Bar(){
- console.log(xo);
- }
- function Func(){
- var xo = "seven";
- return Bar;
- }
- var ret = Func();
- ret();
- // 输出结果: alex
上述代码,在函数被执行之前已经创建了两条作用域链:
- 全局作用域 -> Bar函数作用域
- 全局作用域 -> Func函数作用域
当执行【ret();】时,ret代指的Bar函数,而Bar函数的作用域链已经存在:全局作用域 -> Bar函数作用域,所以,执行时会根据已经存在的作用域链去寻找。
五、声明提前
在JavaScript中如果不创建变量,直接去使用,则报错:
- console.log(xxoo);
- // 报错:Uncaught ReferenceError: xxoo is not defined
JavaScript中如果创建值而不赋值,则该值为 undefined,如:
- var xxoo;
- console.log(xxoo);
- // 输出:undefined
在函数内如果这么写:
- function Foo(){
- console.log(xo);
- var xo = 'seven';
- }
- Foo();
- // 输出:undefined
上述代码,不报错而是输出 undefined,其原因是:JavaScript的函数在被执行之前,会将其中的变量全部声明,而不赋值。所以,相当于上述实例中,函数在“预编译”时,已经执行了var xo;所以上述代码中输出的是undefined。
五句话搞定JavaScript作用域的更多相关文章
- 【】五句话搞定JavaScript作用域
JavaScript的作用域一直以来是前端开发中比较难以理解的知识点,对于JavaScript的作用域主要记住几句话,走遍天下都不怕... 一.“JavaScript中无块级作用域” 在Java或C# ...
- 五句话搞定JavaScript作用域(ES5)
JavaScript的作用域一直以来是前端开发中比较难以理解的知识点,对于JavaScript的作用域主要记住几句话,走遍天下都不怕... 一.“JavaScript中无块级作用域” 在Java或C# ...
- 五句话搞定JavaScript作用域【转】
JavaScript的作用域一直以来是前端开发中比较难以理解的知识点,对于JavaScript的作用域主要记住几句话,走遍天下都不怕... 一.“JavaScript中无块级作用域” 在Java或C# ...
- 160630、五句话搞定JavaScript作用域
JavaScript的作用域一直以来是前端开发中比较难以理解的知识点,对于JavaScript的作用域主要记住几句话,走遍天下都不怕. 一.“JavaScript中无块级作用域” 在Java或C# ...
- 【Python之路】特别篇--五句话搞定JavaScript作用域
JavaScript的作用域一直以来是前端开发中比较难以理解的知识点,对于JavaScript的作用域主要记住几句话,走遍天下都不怕... 一.“JavaScript中无块级作用域” 在Java或C# ...
- 5句话搞定ES5作用域
JavaScript的作用域一直以来是前端开发中比较难以理解的知识点,对于JavaScript的作用域主要记住几句话,走遍天下都不怕... 一.“JavaScript中无块级作用域” 在Java或C# ...
- 五句话搞定Python、JavaScript作用域
这个银角的看家之作了吧,哈哈哈,剽窃下,原地址在这:点我点我 Python与JavaScript基本相同,但声明提前一项略有不同. JavaScript.Python中无块级作用域 在Java或C#中 ...
- 我和小美的撸码日记(3)之中的一个句话搞定MVC表单页数据绑定与提交
另外献上在<线体验Demo地址>希望大家也能从中得到一些启示. 地址:http://121.40.148.178:8080/ . username:guest,password:12345 ...
- 30秒搞定javascript作用域
引用一下js权威指南的一名话作为开场”JavaScript中的函数运行在它们被定义的作用域里,而不是它们被执行的作用域里.” javascript不存在大括号级的作用域,但他有函数作用域,也就是说变量 ...
随机推荐
- python入门一
python类型 编程语言主要从以下几个角度为进行分类,编译型和解释型.静态语言和动态语言.强类型定义语言和弱类型定义语言. 编译型和解释型 编译型:在程序执行之前,有一个单独的编译过程,将程序翻译成 ...
- js学习笔记---事件代理
事件机制可以分为捕获型和冒泡型.捕获型是事件由父级元素(DOM)传递到子元素.冒泡型正好相反.事件机制默认为冒泡型.事件机制可以通过参数指定. 事件委托可以将我们绑定在document上的事件自动绑定 ...
- 基于NPOI的报表引擎——ExcelReport
前言 其实现在说ExcelReport是报表引擎还为时尚早,但该组件我既然要决心维护下去,这便算是初衷吧! 1.现在,ExcelReport能为你做什么呢? 如果,你有导出数据到Excel的需求,Ex ...
- 在WebApi中 集成 Swagger
1. Swagger(俗称:丝袜哥)是什么东西? Swagger 是一个规范和完整的框架,用于生成.描述.调用和可视化 RESTful 风格的 Web 服务.总体目标是使客户端和文件系统作为服务器以同 ...
- [转]Mac OS X El Capitan(10.11)显示隐藏文件命令失效解决方法
在Mac全新的系统El Capitan中,原先的显示系统中所有的隐藏文件的指令似乎失效了,只有重启以后才能显示,其实还有一个更简单的办法: 先在终端输入: defaults write com.app ...
- Node.js学习之简介
1.简单的说Node.js就是运行在服务端的javaScript: 2.Node.js是一个基于Chrome javaScript运行时建立的一个平台: 3.Node.js是一个事件驱动I/O服务端J ...
- 2012 Multi-University #8
DP+单调队列优化 E One hundred layer 题意:n*m的矩形,从第一层x位置往下走,每一层都可以往左或往右移动最多k步再往下走,问走到n层时所走路径的最大值. 分析:定义,,注意到m ...
- SpringMVC注解@RequestMapping全面解析---打酱油的日子
@RequestMapping 可以出现在类级别上,也可以出现在方法上.如果出现在类级别上,那请求的 url 为 类级别上的@RequestMapping + 方法级别上的 @RequestMappi ...
- BFC给我的帮助以及对hasLayout的认识
布局的时候经常想让一个或几个元素并并排的放在一起,有时给其中的一个浮动,元素是在一行了,可还是都左边重叠了,总是这样那样改来改去,小白的我也是醉了! 今天偶然间看到了了BFC这个东东,虽然现在还是不是 ...
- javascript面向对象(三):非构造函数的继承
本文来自阮一峰 这个系列的第一部分介绍了"封装",第二部分介绍了使用构造函数实现"继承". 今天是最后一个部分,介绍不使用构造函数实现"继承" ...