脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JavaScript 变量作用域

JavaScript中的变量作用域介绍

 更新时间：2014年12月31日 09:28:34   投稿：junjie  
这篇文章主要介绍了JavaScript中的变量作用域介绍,本文同时讲解了一个新概念变量的作用域链,需要的朋友可以参考下

对于变量的作用域(scope)，C、Java等语言采取的是“block scope”的方式。与之不同，JavaScript所采取的是“function scope”的方式 — 变量的作用域仅由所处的function决定，与if、for等逻辑块无关。比如，以下这个例子展示了JavaScript中与C、Java等语言不一样的行为：

复制代码 代码如下:

function(){
  var s = 42;//s is visible throughout function
  if (s > 3) {
    var x = "test";//x is visible throughout function
    for(var i=0; i<10; i++){
      console.log(i);
    }
    console.log(i);//i is visible throughout function
  }
  console.log(i);
  console.log(x);
}

在C、Java等“block scope”的语言中，if语句、for语句等逻辑块结束后，在这些逻辑块内部定义的变量将会被销毁。JavaScript与之不同，只要一个变量定义在某function内，那么整个function内的所有代码均可访问到该变量，即使这些代码在变量定义之前：

复制代码 代码如下:

function(){
  console.log(a);//undefined
  var a = "test";
  console.log(a);//test
}

在上述例子中，如果function中a从未被定义，那么console.log(a)将抛出ReferenceError。当function中对a进行定义后，即使这个定义在a变量调用语句之后，对a的调用也属于合法操作(如果对a变量的定义发生在调用语句之后，那么调用语句中a变量的值为undefined)。事实上，在function内用var关键词进行定义的所有变量，其定义操作都会被提至function的开头(赋值操作依然留在var定义的那一行)，这在JavaScript中称之为hoisting。比如，上述代码就等价于：

复制代码 代码如下:

function(){
  var a;
  console.log(a);//undefined
  a = "test";
  console.log(a);//test
}

变量的作用域链

联系JavaScript中变量的储存，可以很好的理解JS中的“function scope”与hoisting。由于变量是储存在全局对象或者函数调用对象上的，因此当在function中定义变量时，无论这个变量定义在function的什么地方，这次function调用所使用的函数调用对象中必然会出现一个与此变量同名的属性。如此一来，function中的任何地方都可以访问到该变量。

涉及到函数调用，JavaScript中还有一个更有趣的概念：变量的作用域链 — 由于变量是储存在全局对象或者函数调用对象上的，因此在访问变量时，可以从多个对象上获取值。以下面的代码为例：

复制代码 代码如下:

var x = "test";
function(){
  //level-1 function
  var x = "temp";
  function(){
    //level-2 function
    var x = "real";
    //try to access x here. x will be "real".
  }
}

在上述代码中2级函数(level-2 function)的内部，当试图访问x变量时，程序可以从3个对象上搜索相应的属性值：调用2级函数所使用的函数调用对象、调用1级函数所使用的函数调用对象、全局对象 — 根据函数定义的嵌套关系，JavaScript将生成一个由全局对象和函数调用对象所组成的对象链。访问变量时，程序将从离访问语句最近的那个对象开始搜索，如果没有搜索到，则在对象链中上一级的对象中继续进行搜索，直至全局对象。

由于这个对象链与变量的作用域有关，因此也叫做“作用域链”。

如果需要临时改变作用域链，将某个对象插入到作用域链的最前端(作为最先访问到的那个函数对象)，可以使用with语句：

复制代码 代码如下:

with(o){
  //code use properties of object o.
}

不过，在JavaScript严格模式下，with语句是被禁用的；即使在非严格模式下，也不推荐使用with语句。

您可能感兴趣的文章:

相关文章

  • SWFUpload多文件上传及文件个数限制的方法

    SWFUpload多文件上传及文件个数限制的方法

    这篇文章主要介绍了SWFUpload多文件上传及文件个数限制的方法,较为详细的分析了SWFUpload组件实现多文件上传的原理、使用方法与相关注意事项,需要的朋友可以参考下
    2016-05-05
  • JavaScript中Map遍历方法代码示例

    JavaScript中Map遍历方法代码示例

    这篇文章主要给大家介绍了关于JavaScript中Map遍历方法的相关资料,Map是一组键值对的结构,具有极快的查找速度,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-11-11
  • JS原型、原型链深入理解

    JS原型、原型链深入理解

    这篇文章主要针对javascript中的原型、原型链深入理解，原型是JavaScript中一个比较难理解的概念，本文为大家解决这个难题，感兴趣的小伙伴们可以参考一下
    2016-02-02
  • javascript相等运算符与等同运算符详细介绍

    javascript相等运算符与等同运算符详细介绍

    不管是java、c++、php都有相等运算符与等同运算符，当然javasript也不例外，下面介绍一下
    2013-11-11
  • json属性名为什么要双引号(个人猜测)

    json属性名为什么要双引号(个人猜测)

    json属性名为什么要双引号？更加规范,利于解析、避免class等关键字引起的不兼容问题,需要的朋友可以参考下
    2014-07-07
  • js中创建对象的几种方式示例介绍

    js中创建对象的几种方式示例介绍

    JavaScript中的所有事物都是对象，本文为大家介绍下JS中创建对象的几种方式，如原始方法、工厂方法等等
    2014-01-01
  • Javascript判断对象是否相等实现代码

    Javascript判断对象是否相等实现代码

    想判断2个js对象，是不是所有完全相同在表单页面应用是很常见的，接下来分享一段判断代码，感兴趣的你可以参考下哈，希望可以帮助到你
    2013-03-03
  • JS实现简单九宫格抽奖

    JS实现简单九宫格抽奖

    这篇文章主要为大家详细介绍了JS实现简单九宫格抽奖，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-06-06
  • 为什么js中不推荐使用eval函数(原因分析)

    为什么js中不推荐使用eval函数(原因分析)

    'eval'函数是javascript中的一个内置函数,它的主要作用是将传入的字符串作为代码来执行,这篇文章主要介绍了为什么js中不推荐使用eval函数,需要的朋友可以参考下
    2023-10-10
  • Redux的基本使用过程步骤详解

    Redux的基本使用过程步骤详解

    这篇文章主要介绍了Redux的基本使用过程详解,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-12-12

最新评论