前端百题斩【002】——js中6种变量声明方式

写该系列文章的初衷是“让每位前端工程师掌握高频知识点，为工做助力”。这是前端百题斩的第2斩，但愿朋友们关注公众号“执鸢者”，用知识武装本身的头脑。

随着js的发展，目前共6种声明变量的方式，分别为var、let、const、function、class、import，下面分别阐述一下这六种方式。

1 var

在ES5阶段，用var定义变量，此阶段具备如下特色：

1. 没有块的概念，能够跨块访问，不能跨函数访问；
2. 存在变量提高。

// 代码没报错，而是打印出来了undefined，侧面说明了val变量存在变量提高
console.log(val); // undefined
var val = 1;
console.log(val); // 1

2 let

在ES6阶段，出现了块的概念，新增了块级做用域，同时新增了let命令，let声明的变量具备如下特色：

1. let声明的变量只在它所在的代码块有效；
2. 不存在变量提高。let不会像var那样会发生‘变量提高’现象，所以，变量须要先声明后再使用，不然会报错；
3. 暂时性死区。在代码块内，使用let命令声明变量以前，该变量都是不可用的；
4. 不容许重复声明。

// 实验一——只在所在的代码块有效
// 1
{
    let val = 2;
    console.log(val); // 2
}
// 2
{
    let val = 2;
}
console.log(val); // ReferenceError: val is not defined

// 实验2——不存在变量提高 + 暂时性死区
{
    console.log(val); // 报错
    let val = 2;
}

// 实验三——不容许重复声明
{
    let val = 1;
    let val = 2; // SyntaxError: Identifier 'val' has already been declared
}

3 const

在let命令出现的同时，出现了const命令，其用于声明一个只读的常量，具备如下特色：

1. 一旦声明就必须当即初始化；
2. 一旦声明，常量值就不能改变了（指的是内存地址不能改变）；
3. 块做用域内有效；
4. 不存在变量提高；
5. 存在暂时性死区。

对于上述的验证代码能够用参考let的。

对于const，还有一点比较有意思的指的详细阐述一下：const实际上保证的并非变量的值不能改动，而是变量指向的那个内存地址不能改动。对于简单类型的数据而言，值就保存在变量指向的内存地址中，所以等同于常量。但对于复合类型的数据而言，变量指向的内存地址保存的只是一个指针，const只能保证这个指针是固定的，至于指向的数据结构不受控制。那么如何保证复合类型的值如何保证呢？可使用Object.freeze()方法,该方法使对象的原始属性不可变，但仍然能够更改嵌套对象。为了使对象彻底不可变，经过将嵌套对象上的全部属性冻结达到效果。

const constantize = obj => {
  Object.freeze(obj);
  Object.keys(obj).forEach( key => {
    if ( typeof obj[key] === 'object' ) {
      constantize( obj[key] );
    }
  });
};

1.4 function

function命令用于定义一个函数，具备如下特色：

1. 函数声明后不会当即执行，须要调用的时候才执行；
2. 对支持ES5和ES6浏览器环境在块做用域内有必定区别，因此应避免在块级做用域内声明函数。

function test() {
    // ……
}

5 class

ES6语法引入了class关键字，用来定义类，该写法相比于对象原型的方式具备如下特色：

1. 相比于对象原型的方式写法更清晰；
2. 更像面向对象编程的语法（对有面向对象编程经验的同窗更友好）。

class Calculate {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
    
    add() {
        return this.x + this.y;
    }
}

6 import

ES6在语言标准的层面上实现了模块功能，其中import命令就是用于加载模块，而后输出变量，其具备如下特色：

1. import命令接受一对大括号，其里面的变量名必须与被导入的模块对外接口的名称相同；
2. 用as关键字可将输入的变量名重命名；
3. import命令输入的变零都是只读的；
4. import命令具备提高效果，会提高到整个模块的头部，首先执行（由于import命令是在编译阶段执行的，在代码运行以前）；
5. import是静态执行，不能使用表达式和变量；
6. import会执行所加载的模块。

// 随便举个例子
import {add} from './calcluate';

7 有意思的小问题

下面四种状况分别输出什么？为何呢？欢迎各位老铁留言

1. 状况一

for (let i = 0; i < 3; i++) {
  let i = 'abc';
  console.log(i);
}

2. 状况二

for (var i = 0; i < 3; i++) {
  var i = 'abc';
  console.log(i);
}

3. 状况三

for (let i = 0; i < 3; i++) {
  var i = 'abc';
  console.log(i);
}

4. 状况四

for (var i = 0; i < 3; i++) {
  let i = 'abc';
  console.log(i);
}

1.若是以为这篇文章还不错，来个分享、点赞吧，让更多的人也看到

2.关注公众号执鸢者，与号主一块儿斩杀前端百题。