深入理解es6块级作用域的使用

一.var 声明与变量提升机制

在JavaScript中使用var定义一个变量，无论是定义在全局作用域函数函数的局部作用域中，都会被提升到其作用域的顶部，这也是JavaScript定义变量的一个令人困惑的地方。由于es5没有像其它类C语言一样的块级作用域,因此es6增加了let定义变量，用来创建块级作用域。

我们来看一个var定义变量的示例：

function  setName(){  if(condition){    var name = 'loho';    console.log(name);  }else{    console.log(name);  }}var student = 'eveningwater';setName();

以上代码可以理解成如下:

var student;function setName(){  var name;  if(condition){    name = 'loho';    console.log(name);//loho  }else{   console.log(name);//undefined  }}student = 'eveningwater';setName();

二.块级声明

块级声明意在指定一个块级作用域，使得块级作用域中所定义的变量无法再全局被访问到，块级作用域也被称为词法作用域。

块级作用域存在于两个地方：

函数内部。 指定代码块中。（即"{"和"}"之间的区域）

1.let 声明

let声明同var声明用法一致，唯一的区别在于，let声明将变量限制在一个块内，这样就形成了一个块级作用域，因此也就不会存在变量的提升了。

例如前面的示例，我们可以写成如下:

let stundent = 'eveningwater';function setName(){  if(condition){    let name = 'loho';    console.log(name);//loho  }else{    //如果条件为false执行到这里    console.log(name);//不返回值  }}setName();

2.禁止重声明

在使用let定义变量之前如果已经声明了相同的变量，就会报错。因此不能重复声明变量。如以下示例：

var name = 'eveningwater';//报错,重复声明let name = 'loho';

当然这两个变量必须是在同一个作用域中，如果是不同作用域中，则不会报错。但有可能会遮蔽第一次声明的变量。如以下示例：

var name = 'eveningwater';if(condition){  //不会报错  let name = 'loho';}

3.const声明

使用const标识符所声明的变量必须要初始化，因此这个声明的就是一个常量。如下例：

const name='eveningwater';//正确const name;//错误,未初始化

const声明同let声明一样，也是创建了一个块级作用域，在这个块级作用域之外是无法访问到所声明的变量的。换句话说，就是const所声明的变量不会有变量提升机制。如下例:

if(condition){    const name = 'eveningwater';    console.log(name);//'eveningwater'}//错误console.log(name);

同样的const也不能重复声明，如下例:

var name = 'eveningwater';//错误，不能重复声明const name = 'loho';