一、在js中,变量的定义并不是以代码块作为作用域的,而是以函数作为作用域。也就是说,如果变量是在某个函数中定义的,那么,它在函数以外的地方是不可见的。但是,如果该变量是定义在if或者for这样的代码块中,它在代码块之外是可见的。

  二、在js中,术语“全局变量”指的是定义在所有函数之外的变量(也就是定义在全局代码中的变量),与之相对的是“局部变量”,所指的是在某个函数中定义的变量。其中,函数内的代码可以像访问自己的局部变量那样访问全局变量,反之则不行。

  三、下面是具体示例,请注意两点:

    1> 函数f()可以访问变量global。

    2> 在函数f()以外,变量local是不存在的。

    var global = 1;
    function f() {
      var local = 2;
      global ++;
      return global;
    }
    测试结果如下:

    

    还有一点要注意:如果我们声明一个变量事没有使用var语句,该变量就会被默认为全局变量。让我们来看一个示例:

    function f () {
      local = 2;
    }
    undefined
    local;
    VM432:1 Uncaught ReferenceError: local is not defined
    f();
    undefined
    local;
    2

    图:

    

    我们来看上面代码发生了什么:首先,我们在函数f()中定义了一个变量local。在该函数被调用之前,这个变量并不存在。该变量会在函数首次被调用时创建,并被赋予全局作用域。这使得我们可以在该函数以外的地方访问它。

  四、最佳实践:

    1>尽量将全局变量的数量降到最低,以避免命名冲突。

    2>最好总是使用var语句来声明变量。

    3>可以考虑使用“单一var”模式,即,仅在函数体内的第一行使用一个var来定义这个作用域中所有需要的变量。这样一来,我们就能很轻松地找到相关变量的定义,并且在很大程度上避免了不小心污染全局变量的情况。

  五、变量提升

    举例: 

    var a = 123;
    function f(){
     alert(a);
     var a = 1;
     alert(a);
    }
    f();

    图:

    

    你可能会想当然的认为alert()第一次显示的是123(即全局变量a的值),而第二次显示的是1(即局部变量a)。但事实并非如此,第一个alert()实际上显示的是undefined,这是因为函数域始终优先于全局域,所以全局变量a会覆盖掉所有与它同名的全局变量,尽管在alert()第一次被调用时,a还没有被证实定义(即,该值是undefined),但该变量本身已经存在于本地空间了。这种特殊的现象叫做提升

    结果如图:

     

    

    也就是说,当js执行过程进入新的函数时,这个函数内被声明的所有变量所有变量都会被移动(或者说提升)到函数最开始的地方。另外,需要注意,被提升的只有变量的声明,这意味着,只有函数体内声明的这些变量在该函数执行开始时就存在,而与之相关的赋值操作并不会被提升,它还在原来的位置上。譬如,在原来的例子中,局部变量本身被提到了函数开始处,但并没有在开始处就被赋值为1。这个例子可以被等价地改写为:

    

    当然,我们可以采用最佳实践中提到过的单一var模式。在这个例子中,我们可以手动提升变量声明的位置,这样一来代码就不会被js的提升行为所混淆了。

js里变量的作用域的更多相关文章

  1. js之变量和作用域

    JS的变量和其他语言的变量有很大区别.JS变量时“松散型”的,决定它只是在特定时间用于保存特定的一个名字而已.由于不存在变量要保存何种数据类型,变量的值和其数据类型可以在脚本的生命周期内改变. JS两 ...

  2. JS中变量、作用域的本质,定义及使用方法

    全局作用域和局部作用域 全局作用域 局部作用域:函数作用域 全局作用域在全局和局部都可以访问到,局部作用域只能在局部被访问到 var name="cyy"; function fn ...

  3. Js中变量的作用域

    一.理解函数作用域需要理解以下几点:    1.函数变量的作用域有全局变量和局部变量两种,全局变量写在函数的最前面,局部变量写在函数体内,局部变量省略了var 也就默认成为了全局变量!    2.函数 ...

  4. 有关js的变量、作用域和内存问题

    来自<javascript高级程序设计 第三版:作者Nicholas C. Zakas>的学习笔记(四) js共有5种基本数据类型:Undefined.NULL.Boolean.Numbe ...

  5. JS:变量的作用域

    1.作用域: 指一个变量它在哪些代码范围能够被使用,这些地方就是变量的作用域 JS中的两种作用域: 1.全局作用域.2.函数作用域   2.在es5中 函数的代码块内部的代码 可以访问形参变量  也可 ...

  6. Js的变量、作用域与内存

    变量.作用域与内存 1 .原始值与引用值 Undefined.Null.Boolean.Number. String和Symbol.保存原始值的变量是按值(by value)访问的 引用值是保存在内存 ...

  7. js中变量的作用域、变量提升、链式作用域结构

    一:作用域 在ES6之前,javascript没有块级作用域(一对{}即为一个块级作用域),只有全局作用域和函数作用域(局部),因此,对应的有全局变量和局部变量.在函数内部可以访问到全局变量,但在函数 ...

  8. 关于JS中变量的作用域-实例

    先看问题,如下,自己运行一下吧! if (!('_qyzA' in window)) { var _qyzA = 1; } alert(_qyzA);//undefined 分析:首先,所有的全局变量 ...

  9. 关于JS里的函数作用域链的总结

    在JavaScript中,函数的作用域链是一个很难理解的东西.这是因为JavaScript中函数的作用域链和其他语言比如C.C++中函数的作用域链相差甚远.本文详细解释了JavaScript中与函数的 ...

随机推荐

  1. 前端资讯周报 3.6 - 3.12: 对学习Javascript最有帮助的三本书,以及HTML标题的迷思

    每周一我都会分享上一周我订阅的技术站点中,和解决问题的过程中阅读到的值得分享的文章. 毕竟个人的阅读量有限,也欢迎大家留言或者私信给我你们阅读到的,对你们前端技术有帮助的任何内容,题材不限,语言不限. ...

  2. KoaHub平台基于Node.js开发的Koa的调试实用程序

    debug small debugging utility debug tiny node.js debugging utility modelled after node core's debugg ...

  3. JavaEE开发基于Eclipse的环境搭建以及Maven Web App的创建

    本篇博客就完整的来聊一下如何在Eclipse中创建的Maven Project.本篇博客是JavaEE开发的开篇,也是基础.本篇博客的内容干货还是比较多的,而且比较实用,并且都是采用目前最新版本的工具 ...

  4. El表达式的用法个人总结

    EL表达式的好处: 通过EL可以简化在JSP开发中对对象的引用,从而规范页面代码,增加程序的可读性及可维护性. EL表达式的几个特点:  1:可以与jsp标签库结合使用,也可以与javascript语 ...

  5. Linux云自动化运维第四课

    Linux云自动化运维第四课 一.vim 1.vim光标移动 1)在命令模式下 :数字  ###移动到指定的行 G  ###文件最后一行 gg  ###文件第一行 2)在插入模式下 i  ###光标所 ...

  6. vue简易轮播图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 使用idea2017搭建SSM框架

    搭建个SSM框架居然花费了我好长时间!特此记录! 需要准备的环境: idea 2017.1 jdk1.8 Maven 3.3.9  请提前将idea与Maven.jdk配置好,本次项目用的都是比较新的 ...

  8. java设计模式之职责链模式

    责任链模式 设计模式很多时候都是看见名字都知道意思,责任链,见名知义为请求创建一系列处理对象. 此模式基于请求的类型将请求的发送方和接收方分离.通常每个接收器包含对另一个接收器的引用.如果一个对象不能 ...

  9. Kickstart无人值守安装系统

    1.导言 已经或未来将从事Linux系统运维工作的读者,经常会遇到一些机器式的重复的共走,例如:有时间同时上线几十甚至上百台服务器,而且需要我们在短时间内完成系统安装. q  光盘安装系统===> ...

  10. CSS3学习笔记(1)-CSS3选择器

    p{ font-size: 15px; text-indent: 2em; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid ...