JavaScript中var变量、let变量和const变量的区别

JavaScript中var变量、let变量和const变量的区别

本来JS中只有全局作用域和函数作用域

• 全局作用域：全局声明的变量可以在JS程序的任何位置访问
• Li函数作用域：局部声明的变量只能在它们声明的函数内访问

let和const这两个关键词是ES2015被引入的，这两个关键词在JS中提供了一种新的域变量——块作用域变量——只在块内作用

var关键词声明的变量没有块作用域，所以在｛｝块内声明是可以从快外访问变量的

{
  var x = 10;
}
// 此处可以使用 x

但是如果使用let关键词或者const关键词声明的变量拥有块作用域，在｛｝块内声明的变量只能在块内访问

{
  let x = 10;
}
// 此处不可以使用 x

var和let和const的区别？

1. 在HTML中，全局作用域是window对象，所以说通过var关键词定义的全局变量属于window对象

var carName = "porsche";
// 此处的代码可使用 window.carName

但通过let关键词定义的全局变量不属于window对象

let carName = "porsche";
// 此处的代码不可使用 window.carName

2. 允许在程序的任何位置使用var重新声明JS变量

var x = 10;
// 现在，x 为 10
var x = 6;
// 现在，x 为 6

但在相同的作用域或相同的块中，不允许通过let重新声明一个var变量，不允许通过let重新声明一个let变量，不允许通过var重新声明一个let变量，不允许通过var重新声明或者重新赋值给一个const变量，不允许通过let重新声明或者重新赋值给一个const变量

var x = 10;       // 允许let x = 6;       // 不允许
{
  let x = 10;   // 允许
  let x = 6;   // 不允许
}

let x = 10;       // 允许
var x = 6;       // 不允许

const x = 2;       // 允许
const x = 3;       // 不允许
x = 3;             // 不允许
var x = 3;         // 不允许
let x = 3;         // 不允许

如果是不同的作用域或块就可以

let x = 6;       // 允许

{
  let x = 7;   // 允许
}

{
  let x = 8;   // 允许
}

const x = 2;       // 允许

{
  const x = 3;   // 允许
}

{
  const x = 4;   // 允许
}

3. 通过var声明的变量会提升到顶端，通过let或者const声明的变量不会被提升到顶端----会导致ReferenceError（非法引用错误）

使用let关键词和const关键词的好处？
如果使用var关键词声明变量，再在块内重新声明变量会带来问题----会更新变量的值

var x = 10;
// 此处 x 为 10
{
  var x = 6;
  // 此处 x 为 6
}
// 此处 x 为 6

但是let和const不会更新这个值

var x = 10;
// 此处 x 为 10
{
  let x = 6;
  // 此处 x 为 6
}
// 此处 x 为 10

在这里插入代码片var x = 10;
// 此处，x 为 10
{
  const x = 6;
  // 此处，x 为 6
}
// 此处，x 为 10

注：
const定义的变量和let类似，但是const定义的变量必须在声明的时候赋值且不能重新赋值—会发生类型错误

在这里插入代码片const PI;
PI = 3.14159265359;//错误
const PI = 3.14159265359;//正确

参考于W3School–JavaScript 提升（Hoisting）