首页 > 文章 > web前端 > js的作用域使用详解

js的作用域使用详解

php中世界最好的语言原创: 2018-04-14 15:09:311278浏览

这次给大家带来js的作用域使用详解，js作用域使用的注意事项有哪些，下面就是实战案例，一起来看一下。

JavaScript是现在很多人都在使用的，对于JavaScript的使用，可能很多人还不是很清楚作用域以及块级作用域，这里文章就给大家具体的说明下，想了解的一起来看看。

一、块级作用域的说明

在学习JavaScript的变量作用域之前，我们应当明确几点：

a、JavaScript的变量作用域是基于其特有的作用域链的。

b、JavaScript没有块级作用域。

c、函数中声明的变量在整个函数中都有定义。

javascript的变量作用域，与平时使用的类C语言不同，例如C#中的代码：

static void Main(string[] args)
{
   if(true)
   {
    int number=10;
   }
  Console.WriteLine(number);
}

这段代码进行编译，是无法通过的，因为"当前上下文不存在number".

因为这里变量的作用域是由花括号限定的，称为块级作用域。

在块级作用域下，所有的变量都在定义的花括号内，从定义开始到花括号结束这个范围内可以使用，出了这个范围就是无法访问，也就是说

if（true）
{
  int number=10;
  Console.WriteLine(number);
}

这样可以访问，因为变量的定义与使用在同一个花括号内。

但是在javascript中没有块级作用域的概念。

二、javascript中的作用域

1、函数限定变量作用域

在javascript中，函数里面定义的变量，，可以在函数里面被访问，但在函数外无法访问，代码：

<script type="text/javascript">
  var num=function()
  {
   var number=10;
  };
  try{
    alert(number);
  }catch(e)
  {
    alert(e);
  } 
</script>

代码运行时，会抛出一个异常，变量number没有定义，是因为定义在函数中的变量无法再函数外使用，在函数内可以任意使用，即使在赋值之前：

<script type="text/javascript">
 var num=function(){
    alert(number);
    var number=10;
    alert(number);
 };
 try{
   num();
 }catch(e){
  alert(e);
 }
</script>

这段代码运行后，不会抛出错误，弹出两次，分别是undefined和10

2.子域访问父域

函数可以限定变量的作用域，那么在函数中的函数就为该作用域的子域，在子域中的代码可以访问到父域中的变量，代码如下：

<script type="text/javascript">
 var func=function(){
    var number=10;
    var sub_func=function(){
      alert(num);
    };
   sub_func();
};
func();
</script>

这段代码执行得到的结果是10，但是在子域中访问父域的代码也是有条件的

<script type="text/javascript">
 var func=function(){
    var number=10;
    var sub_func=function(){
      var num=20;
      alert(num);
    };
   sub_func();
};
func();
</script>

这段代码比前面多了一个"var num=20;",这句代码在子域中，那么子域访问父域的情况就发生了变化，这段代码打印的结果是20，此时子域访问的num是子域中的变量，而不是父域中的。由此可见访问有一定规则可言，在javascript中使用变量，javascript解释器首先在当前作用域中搜索是否有该变量的定义，如果有，就是用这个变量，如果没有就到父域中寻找变量，依次类推，直到最顶级作用域，仍然没有找到就抛出异常"变量未定义"，代码如下：

<script type="text/javascript">
 (function (){
   var num=10;
   (function (){
     var num=20;
     (function(){
     alert(num);
      })();
   })();
  })();
</script>

这段代码执行后打印出20，如果将"var num=20"取掉，那么打印的就是10.同样去掉"var num=10",那么就会出现未定义的错误。

下面介绍下JS作用域与块级作用域

作用域永远都是任何一门编程语言中的重中之重，因为它控制着变量与参数的可见性与生命周期。讲到这里，首先理解两个概念：块级作用域与函数作用域。

什么是块级作用域呢？

任何一对花括号（｛和｝）中的语句集都属于一个块，在这之中定义的所有变量在代码块外都是不可见的，我们称之为块级作用域。

函数作用域就好理解了(*^^*) ，定义在函数中的参数和变量在函数外部是不可见的。

大多数类C语言都拥有块级作用域，JS却没有。请看下文demo:

//C语言 
#include <stdio.h> 
void main() 
{ 
  int i=2; 
  i--; 
  if(i) 
  { 
    int j=3; 
  } 
  printf("%d/n",j); 
}

运行这段代码，会出现“use an undefined variable:j”的错误。可以看到，C语言拥有块级作用域，因为j是在if的语句块中定义的，因此，它在块外是无法访问的。

而JS是如何表现的呢，再看另一个demo:

functin test(){ 
 for(var i=0;i<3;i++){   
 } 
 alert(i); 
} 
test();

运行这段代码，弹出"3"，可见，在块外，块中定义的变量i仍然是可以访问的。也就是说，JS并不支持块级作用域，它只支持函数作用域，而且在一个函数中的任何位置定义的变量在该函数中的任何地方都是可见的。

那么我们该如何使JS拥有块级作用域呢？是否还记得，在一个函数中定义的变量，当这个函数调用完后，变量会被销毁，我们是否可以用这个特性来模拟出JS的块级作用域呢？看下面这个DEMO：

  function test(){ 
 (function (){ 
 for(var i=0;i<4;i++){ 
 } 
 })(); 
 alert(i); 
} 
test();

这时候再次运行，会弹出"i"未定义的错误，哈哈，实现了吧~~~这里，我们把for语句块放到了一个闭包之中，然后调用这个函数，当函数调用完毕，变量i自动销毁，因此，我们在块外便无法访问了。

JS的闭包特性is the most important feature((*^^*) 大家懂的)。在JS中，为了防止命名冲突，我们应该尽量避免使用全局变量和全局函数。那么，该如何避免呢？不错，正如上文demo所示，我们可以把要定义的所有内容放入到一个

（function (){ 
//内容 
})();

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！