js变量var和let的区别

js变量var和let的区别

在 ES2015 之前，JavaScript 只有两种类型的作用域：全局作用域和函数作用域。
ES2015 引入了两个重要的 JavaScript 新关键词：let 和 const，这两个关键字在 JavaScript 中提供了块作用域（Block Scope）变量（和常量）。

全局作用域：
全局（在函数之外）声明的变量拥有全局作用域。

例子1

var carName = "porsche";

// 此处的代码可以使用 carName

function myFunction() {
  // 此处的代码也可以使用 carName
}

函数作用域：
局部（函数内）声明的变量拥有函数作用域。

例子2

// 此处的代码不可以使用 carName

function myFunction() {
  var carName = "porsche";
  // code here CAN use carName
}

// 此处的代码不可以使用 carName

块作用域：
通过 var 关键词声明的变量没有块作用域，在块 {} 内声明的变量可以从块之外进行访问。
可以使用 let 关键词声明拥有块作用域的变量，在块 {} 内声明的变量无法从块外访问。

例子3

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

例子4

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

重新声明：
使用 var 关键字在块中重新声明变量也将重新声明块外的变量。
使用 let 关键字在块中重新声明变量不会重新声明块外的变量。

例子5

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

例子6

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

允许在程序的任何位置使用 var 重新声明 JavaScript 变量。
在相同的作用域，或在相同的块中， 通过 let 重新声明一个 var 变量或 let 变量都是不允许的，通过 var 重新声明一个 let 变量也是不允许的。

例子7

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

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

例子8

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

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

例子9

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

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

例子10

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

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

在不同的作用域或块中，通过 let 重新声明变量是允许的：

例子11

let x = 6;       // 允许

{
  let x = 7;   // 允许
}

{
  let x = 8;   // 允许
}

HTML 中的全局变量：
使用 JavaScript 的情况下，全局作用域是 JavaScript 环境。
在 HTML 中，全局作用域是 window 对象。
通过 var 关键词定义的全局变量属于 window 对象。
通过 let 关键词定义的全局变量不属于 window 对象。

例子12

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

例子13

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

const
通过 const 定义的变量与 let 变量类似，但不能重新赋值，而且必须在声明时赋值。

例子14

// 不正确
const PI;
PI = 3.14159265359;

例子15

// 正确，在声明时赋值
const PI = 3.14159265359;

例子16

// 不能重新赋值
const PI = 3.141592653589793;
PI = 3.14;      // 会出错
PI = PI + 10;   // 也会出错

例子17

// 块级作用域
var x = 10;
// 此处，x 为 10
{ 
  const x = 6;
  // 此处，x 为 6
}
// 此处，x 为 10