JavaScript 声明变量的三种方式

---

前言

JavaScript中有三种声明变量的方式，它们之间有许多区别，今天在这里总结一下。

---

一、var

var声明作用域

函数作用域：使用var操作符定义的变量会成为包含它的函数的局部变量，当函数退出时变量也将被销毁。

function test() {
  var msg = "hi"; //局部变量
}
test();
console.log(msg);//msg is not defined

在函数内部定义变量时省略var操作符，可以创建一个全局变量，该变量将成为window对象的属性。（不建议这么做）

function test() {
  msg = "hi"; //全局变量
}
test();
console.log(msg);// hi
cons

在全局作用域使用var声明的变量将会成为window对象的属性

var msg = "msg";
console.log(window.msg); // msg

声明提升

使用var声明的变量会自动提升到函数作用域顶部。（先使用后声明）

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

上面的代码相当于

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

同一作用域下可重复声明变量

后边的声明会覆盖前边的声明。

function test() {
  var msg = "mi";
  var msg = "hi";
  console.log(msg);
}
test(); // hi

二、let

作用域

let声明的范围是块级作用域。个人认为一个{}就是一个块级作用域。

function test() {
  if (true) {
    let msg = "hi";
  }
  console.log(msg);
}
test(); // ReferenceError: msg is not defined

let在全局作用域声明变量时不会成为window对象的属性，不过let声明仍然在全局作用域中发生，且相应变量会在页面的生命周期内存续。

let msg = "msg";
console.log(window.msg); // undefined

不能声明提升

let声明的变量不会再作用域中被提升。

暂时性死区：在解析代码时，JavaScript引擎也会注意出现在块后面的let声明，只不过在此之前不能以任何方式来引用未声明的变量。在let声明之前的执行瞬间被称为“暂时性死区”。

function test() {
  console.log(msg);
  let msg = "hi";
}
test(); //ReferenceError: Cannot access 'msg' before initialization

for循环中声明变量

使用var在循环中声明迭代变量会渗透到循环体外部。而使用let不会，JavaScript引擎在后台会为每个迭代循环声明一个新的迭代变量。

for (var i = 0; i < 3; i++) {
  setTimeout(() => {
    console.log(i); // 3 3 3
  }, 1000);
}
console.log(i); // 3

for (let i = 0; i < 3; i++) {
}
console.log(i); //  ReferenceError: i is not defined

for (let i = 0; i < 3; i++) {
  setTimeout(() => {
    console.log(i); // 0 1 2
  }, 1000);
}

三、const

const声明变量时必须同时初始化变量，且其一经赋值就不能再改变。

const age = 12;
age = 5;//TypeError: Assignment to constant variable.

如果const变量引用的是一个对象，那么修改这个对象内部的属性并不违反const的限制。

const person = {};
person.age = 6;

不能用const来声明迭代变量（因为迭代变量会自增）。不过可以声明不被修改的for循环变量。

for (const i = 0; i < 4; i++){} // TypeError: Assignment to constant variable

for (const i of [1, 2, 3, 4]) {
  console.log(i); // 1 2 3 4
}

---

总结

1. 在项目开发中，能不用就不能用。
2. const 由于可以涨浏览器运行时强制保持不变，也可以让静态代码分析工具提前发现合法的复制操作。所以const优先，let次之