JavaScript的作用域一直以来是前端开发中比较难以理解的知识点,对于JavaScript的作用域主要记住几句话,走遍天下都不怕...

一、“JavaScript中无块级作用域”

在Java或C#中存在块级作用域,即:大括号也是一个作用域。

  1. public static void main ()
  2. {
  3. if(1==1){
  4. String name = "seven";
  5. }
  6. System.out.println(name);
  7. }
  8. // 报错

Java

  1. public static void Main()
  2. {
  3. if(1==1){
  4. string name = "seven";
  5. }
  6. Console.WriteLine(name);
  7. }
  8. // 报错

C#

在JavaScript语言中无块级作用域

  1. function Main(){
  2. if(1==1){
  3. var name = 'seven';
  4. }
  5. console.log(name);
  6. }
  7. // 输出: seven

补充:标题之所以添加双引号是因为JavaScript6中新引入了 let 关键字,用于指定变量属于块级作用域。

二、JavaScript采用函数作用域

在JavaScript中每个函数作为一个作用域,在外部无法访问内部作用域中的变量。

  1. function Main(){
  2. var innerValue = 'seven';
  3. }
  4.  
  5. Main();
  6.  
  7. console.log(innerValue);
  8.  
  9. // 报错:Uncaught ReferenceError: innerValue is not defined

三、JavaScript的作用域链

由于JavaScript中的每个函数作为一个作用域,如果出现函数嵌套函数,则就会出现作用域链。

  1. xo = 'alex';
  2.  
  3. function Func(){
  4. var xo = "seven";
  5. function inner(){
  6. var xo = 'alvin';
  7. console.log(xo);
  8. }
  9. inner();
  10. }
  11. Func();

如上述代码则出现三个作用域组成的作用域链,如果出现作用域链后,那么寻找变量时候就会出现顺序,对于上述实例:

当执行console.log(xo)时,其寻找顺序为根据作用域链从内到外的优先级寻找,如果内层没有就逐步向上找,直到没找到抛出异常。

四、JavaScript的作用域链执行前已创建

JavaScript的作用域在被执行之前已经创建,日后再去执行时只需要按照作用域链去寻找即可。

示例一:

  1. xo = 'alex';
  2.  
  3. function Func(){
  4. var xo = "seven";
  5. function inner(){
  6.  
  7. console.log(xo);
  8. }
  9. return inner;
  10. }
  11.  
  12. var ret = Func();
  13. ret();
  14. // 输出结果: seven

上述代码,在函数被调用之前作用域链已经存在:

  • 全局作用域 -> Func函数作用域 -> inner函数作用域

当执行【ret();】时,由于其代指的是inner函数,此函数的作用域链在执行之前已经被定义为:全局作用域 -> Func函数作用域 -> inner函数作用域,所以,在执行【ret();】时,会根据已经存在的作用域链去寻找变量。

示例二:

  1. xo = 'alex';
  2.  
  3. function Func(){
  4. var xo = "eirc";
  5. function inner(){
  6.  
  7. console.log(xo);
  8. }
  9. xo = 'seven';
  10. return inner;
  11. }
  12.  
  13. var ret = Func();
  14. ret();
  15. // 输出结果: seven

上述代码和示例一的目的相同,也是强调在函数被调用之前作用域链已经存在:

  • 全局作用域 -> Func函数作用域 -> inner函数作用域

不同的时,在执行【var ret = Func();】时,Func作用域中的xo变量的值已经由 “eric” 被重置为 “seven”,所以之后再执行【ret();】时,就只能找到“seven”。

示例三:

  1. xo = 'alex';
  2. function Bar(){
  3. console.log(xo);
  4. }
  5.  
  6. function Func(){
  7. var xo = "seven";
  8.  
  9. return Bar;
  10. }
  11.  
  12. var ret = Func();
  13. ret();
  14. // 输出结果: alex

上述代码,在函数被执行之前已经创建了两条作用域链:

  • 全局作用域 -> Bar函数作用域
  • 全局作用域 -> Func函数作用域

当执行【ret();】时,ret代指的Bar函数,而Bar函数的作用域链已经存在:全局作用域 -> Bar函数作用域,所以,执行时会根据已经存在的作用域链去寻找。

五、声明提前

在JavaScript中如果不创建变量,直接去使用,则报错:

  1. console.log(xxoo);
  2. // 报错:Uncaught ReferenceError: xxoo is not defined

JavaScript中如果创建值而不赋值,则该值为 undefined,如:

  1. var xxoo;
  2. console.log(xxoo);
  3. // 输出:undefined

在函数内如果这么写:

  1. function Foo(){
  2. console.log(xo);
  3. var xo = 'seven';
  4. }
  5.  
  6. Foo();
  7. // 输出:undefined

上述代码,不报错而是输出 undefined,其原因是:JavaScript的函数在被执行之前,会将其中的变量全部声明,而不赋值。所以,相当于上述实例中,函数在“预编译”时,已经执行了var xo;所以上述代码中输出的是undefined。

五句话搞定JavaScript作用域的更多相关文章

  1. 【】五句话搞定JavaScript作用域

    JavaScript的作用域一直以来是前端开发中比较难以理解的知识点,对于JavaScript的作用域主要记住几句话,走遍天下都不怕... 一.“JavaScript中无块级作用域” 在Java或C# ...

  2. 五句话搞定JavaScript作用域(ES5)

    JavaScript的作用域一直以来是前端开发中比较难以理解的知识点,对于JavaScript的作用域主要记住几句话,走遍天下都不怕... 一.“JavaScript中无块级作用域” 在Java或C# ...

  3. 五句话搞定JavaScript作用域【转】

    JavaScript的作用域一直以来是前端开发中比较难以理解的知识点,对于JavaScript的作用域主要记住几句话,走遍天下都不怕... 一.“JavaScript中无块级作用域” 在Java或C# ...

  4. 160630、五句话搞定JavaScript作用域

    JavaScript的作用域一直以来是前端开发中比较难以理解的知识点,对于JavaScript的作用域主要记住几句话,走遍天下都不怕.   一.“JavaScript中无块级作用域” 在Java或C# ...

  5. 【Python之路】特别篇--五句话搞定JavaScript作用域

    JavaScript的作用域一直以来是前端开发中比较难以理解的知识点,对于JavaScript的作用域主要记住几句话,走遍天下都不怕... 一.“JavaScript中无块级作用域” 在Java或C# ...

  6. 5句话搞定ES5作用域

    JavaScript的作用域一直以来是前端开发中比较难以理解的知识点,对于JavaScript的作用域主要记住几句话,走遍天下都不怕... 一.“JavaScript中无块级作用域” 在Java或C# ...

  7. 五句话搞定Python、JavaScript作用域

    这个银角的看家之作了吧,哈哈哈,剽窃下,原地址在这:点我点我 Python与JavaScript基本相同,但声明提前一项略有不同. JavaScript.Python中无块级作用域 在Java或C#中 ...

  8. 我和小美的撸码日记(3)之中的一个句话搞定MVC表单页数据绑定与提交

    另外献上在<线体验Demo地址>希望大家也能从中得到一些启示. 地址:http://121.40.148.178:8080/ . username:guest,password:12345 ...

  9. 30秒搞定javascript作用域

    引用一下js权威指南的一名话作为开场”JavaScript中的函数运行在它们被定义的作用域里,而不是它们被执行的作用域里.” javascript不存在大括号级的作用域,但他有函数作用域,也就是说变量 ...

随机推荐

  1. python入门一

    python类型 编程语言主要从以下几个角度为进行分类,编译型和解释型.静态语言和动态语言.强类型定义语言和弱类型定义语言. 编译型和解释型 编译型:在程序执行之前,有一个单独的编译过程,将程序翻译成 ...

  2. js学习笔记---事件代理

    事件机制可以分为捕获型和冒泡型.捕获型是事件由父级元素(DOM)传递到子元素.冒泡型正好相反.事件机制默认为冒泡型.事件机制可以通过参数指定. 事件委托可以将我们绑定在document上的事件自动绑定 ...

  3. 基于NPOI的报表引擎——ExcelReport

    前言 其实现在说ExcelReport是报表引擎还为时尚早,但该组件我既然要决心维护下去,这便算是初衷吧! 1.现在,ExcelReport能为你做什么呢? 如果,你有导出数据到Excel的需求,Ex ...

  4. 在WebApi中 集成 Swagger

    1. Swagger(俗称:丝袜哥)是什么东西? Swagger 是一个规范和完整的框架,用于生成.描述.调用和可视化 RESTful 风格的 Web 服务.总体目标是使客户端和文件系统作为服务器以同 ...

  5. [转]Mac OS X El Capitan(10.11)显示隐藏文件命令失效解决方法

    在Mac全新的系统El Capitan中,原先的显示系统中所有的隐藏文件的指令似乎失效了,只有重启以后才能显示,其实还有一个更简单的办法: 先在终端输入: defaults write com.app ...

  6. Node.js学习之简介

    1.简单的说Node.js就是运行在服务端的javaScript: 2.Node.js是一个基于Chrome javaScript运行时建立的一个平台: 3.Node.js是一个事件驱动I/O服务端J ...

  7. 2012 Multi-University #8

    DP+单调队列优化 E One hundred layer 题意:n*m的矩形,从第一层x位置往下走,每一层都可以往左或往右移动最多k步再往下走,问走到n层时所走路径的最大值. 分析:定义,,注意到m ...

  8. SpringMVC注解@RequestMapping全面解析---打酱油的日子

    @RequestMapping 可以出现在类级别上,也可以出现在方法上.如果出现在类级别上,那请求的 url 为 类级别上的@RequestMapping + 方法级别上的 @RequestMappi ...

  9. BFC给我的帮助以及对hasLayout的认识

    布局的时候经常想让一个或几个元素并并排的放在一起,有时给其中的一个浮动,元素是在一行了,可还是都左边重叠了,总是这样那样改来改去,小白的我也是醉了! 今天偶然间看到了了BFC这个东东,虽然现在还是不是 ...

  10. javascript面向对象(三):非构造函数的继承

    本文来自阮一峰 这个系列的第一部分介绍了"封装",第二部分介绍了使用构造函数实现"继承". 今天是最后一个部分,介绍不使用构造函数实现"继承" ...