JavaScript块级作用域与函数作用域

一、JavaScript块级作用域

我们都知道，在ECMAScript6之前，JavaScript没有块级作用域。块级作用域是由一对花括号封闭的代码组成，在JavaScript中也叫他们自己的执行环境（请参考我的另一篇博文JavaScript执行环境详解），我们可以通过如下代码来进行验证：

 
 

  
  {
 
 
 
 
    
  
  var 
  
  a 
  
  = 
  
  12
  
  ;
 
 
 
 

  
  }
 
 
 
 

  
  console
  
  .
  
  log
  
  (
  
  a
  
  );     
  
  //12
 
 

在其他编程语言中，在花括号中定义了一个变量a，因为JavaScript没有块级用域这个概念，所以a将被添加到全局作用域里面去，通过console.log（a）就输出到a的值为12。

但是ES6中添加的变量声明let实际上为JavaScript添加了块级作用域：

 
 

  
  {
 
 
 
 

  
      
  
  let
  
   
  
  a
  
   
  
  =
  
   
  
  12
  
  ;
 
 
 
 

  
  }
 
 
 
 

  
  console
  
  .
  
  log
  
  (
  
  a
  
  );     
  
  //undefined
 
 

let在ES6中是一种局部变量的声明方式，在花括号即块级作用域外部并不能访问到内部的变量。

二、JavaScript函数作用域

JavaScript函数作用域不等于块级作用域，这往往是大多数前端开发者容易忽略的地方。当我们定义一个函数，自然就为其创建了一个作用域。

 
 

  
  function scope{
 
 
 
 

  
      
  
  var
  
   
  
  a
  
   
  
  =
  
   
  
  12
  
  ;
 
 
 
 

  
      function innerScope(){
 
 
 
 

  
          var b = 10;
 
 
 
 

  
          console.log(a)    //12
 
 
 
 

  
      }
 
 
 
 

  
  }
 
 
 
 

  
  console
  
  .
  
  log
  
  (
  
  a
  
  );     
  
  //undefined
 
 

通过构造scope函数，然后在其内部定义了变量a和函数innerScope，它们都在函数scope的作用域内，所以在外面并不能访问到函数捏定义的值，但是代码中innerScope函数能访问到变量a的值。