var、let和const

在ES6（ES2015）出现之前，JavaScript中声明变量就只有通过 var 关键字，函数声明是通过 function 关键字，而在ES6之后，声明的方式有 var 、 let 、 const 、 function 、 class、import共六种一、varvar声明的变量属于函数作用域var声明的变量存在提升（hoisting）var变量可以重复声明1.如果使用关键字 var 声明一个变

麦多馅饼

3660人浏览 · 2022-02-28 17:55:23

麦多馅饼 · 2022-02-28 17:55:23 发布

在ES6（ES2015）出现之前，JavaScript中声明变量就只有通过 var 关键字，函数声明是通过 function 关键字，而在ES6之后，声明的方式有 var 、 let 、 const 、 function 、 class、import共六种

一、var

var 声明的变量属于函数作用域
var 声明的变量存在提升（hoisting）
var 变量可以重复声明

1.如果使用关键字 var 声明一个变量，那么这个变量就属于当前的函数作用域，如果声明是发生在任何函数外的顶层声明，那么这个变量就属于全局作用域。

var a = 123 //此处声明的变量a为全局变量
function foo(){
   var a = 321 // 此处声明的变量a为函数foo的局部变量
   console.log(a) // 321
}
foo()
console.log(a) // 123

2. 提升是指无论 var 出现在一个作用域的哪个位置，这个声明都属于当前的整个作用域，在其中到处都可以访问到。注意只有变量声明才会提升，对变量赋值并不会提升。如下例所示：

console.log(a) // undefined
var a = 123

该代码段跟下列代码段是一样的逻辑：

var a
console.log(a) // undefined
a = 123

而如果对未声明过的变量进行操作，就会报错

console.log(b) // 假设b未声明过，Uncaught ReferenceError: b is not defined

3.如果在声明变量时，省略 var 的话，该变量就会变成全局变量，如全局作用域中存在该变量，就会更新其值。如：

var a = 123 // 此处声明的变量a为全局变量
function foo(){
   a = 321 // 此处的变量a也是全局变量
   console.log(a)// 321
}
foo()
console.log(a) // 123

二、let

ES6 新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。

let 声明的变量具有块作用域（局部变量）的特征。
let 在同一个块级作用域（局部变量），不能重复声明变量。
let 声明的变量不存在变量提升，存在暂时性死区（TDZ）。
let 不影响作用域链。

let 创建变量代码示例

// let关键字使用示例：
let a // 单个声明 
let b,c,d // 批量声明 
let e = 100 // 单个声明并赋值 
let f = 521, g = 'iloveyou', h = [] // 批量声明并赋值

1.let 声明的变量具有块作用域（局部变量）的特征。

// 1. 块儿级作用域（局部变量）
{ let cat = "猫"
  console.log(cat)
}
console.log(cat) // 报错：Uncaught ReferenceError: cat is not defined

2.let 在同一个块级作用域（局部变量），不能重复声明变量。

// 2. 不允许重复声明
let dog = "狗"
let dog = "狗"
// 报错：Uncaught SyntaxError: Identifier 'dog' has already been declared

3.let 声明的变量不存在变量提升，存在暂时性死区（TDZ）。

就是在变量创建之前使用（比如输出：输出的是默认值），let不存在，var存在。

只要块级作用域内存在let命令，它所声明的变量就“绑定”（binding）这个区域，不再受外部的影响。

// 3. 不存在变量提升
// 什么是变量提升：就是在变量创建之前使用（比如输出：输出的是默认值），let不存 在，var存在； console.log(people1) // 可输出默认值 
console.log(people2) // 报错：Uncaught ReferenceError: people2 is not defined
var people1 = "大哥" // 存在变量提升 
let people2 = "二哥" // 不存在变量提升

ES6 明确规定，如果区块中存在let和const命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错。

总之，在代码块内，使用let命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”（temporal dead zone，简称 TDZ）。

4、let 不影响作用域链。

// 4. 不影响作用域链； 
// 什么是作用域链：很简单，就是代码块内有代码块，跟常规编程语言一样，上级代码块中 的局部变量下级可用{ 
    let p = "大哥" 
    function fn(){ 
        console.log(p) // 这里是可以使用的 
    }
    fn()
}

let 案例：点击 div 更改颜色

<!DOCTYPE html> 
<html lang="en"> 
    <head>
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>let案例：点击div更改颜色</title> 
    <link crossorigin="anonymous" href="https://cdn.bootcss.com/twitter- bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
    <style> 
        .item { 
            width: 100px; 
            height: 50px; 
            border: solid 1px rgb(42, 156, 156); 
            float: left; 
            margin-right: 10px; 
        } </style> 
    </head> 
<body>
    <div class="container"> 
        <h2 class="page-header">let案例：点击div更改颜色</h2> 
        <div class="item"></div> 
        <div class="item"></div> 
        <div class="item"></div> 
    </div> <script> 
    // 获取div元素对象 
    let items = document.getElementsByClassName('item'); 
    // 遍历并绑定事件 
    for (let i = 0; i < items.length; i++) { 
        items[i].onclick = function() { 
            // 修改当前元素的背景颜色 
            // this.style.background = 'pink'; 
            // 写法一：常规写法一般无异常 items[i].style.background = 'pink'; // 写法二 
            // 写法二：需要注意的是for循环内的i必须使用let声明    
            // 如果使用var就会报错，因为var是全局变量，
            // 经过循环之后i的值会变成3，items[i]就会下标越界 
            // let是局部变量 
            // 我们要明白的是当我们点击的时候，这个i是哪个值 
            // 使用var相当于是： 
            // { var i = 0; } 
            // { var i = 1; } 
            // { var i = 2; } 
            // { var i = 3; } 
            // 下面的声明会将上面的覆盖掉，所以点击事件每次找到的都是3 
            // 而使用let相当于是： 
            // { let i = 0; } 
            // { let i = 1; } 
            // { let i = 2; } 
            // { let i = 3; } 
            // 由于let声明的是局部变量，每一个保持着原来的值 
            // 点击事件调用的时候拿到的是对应的i } } 
        </script> 
    </body> 
</html>

三、const

const 声明方式，除了具有 let 的上述特点外，其还具备一个特点，即 const 定义的变量，一旦定义后，就不能修改，即 const 声明的为常量。

声明必须赋初始值；
标识符一般为大写（习惯）；
不允许重复声明；
变量标识符不允许修改；
块儿级作用域（局部变量）；

1.声明必须赋初始值

2.标识符一般为大写（习惯）

// 1. 声明必须赋初始值；
const CAT

3.不允许重复声明；

// 3. 不允许重复声明； 
const CAT = "喵喵"
const CAT = "旺财"

4.变量标识符不允许修改；

// 4. 值不允许修改
const CAT = 喵喵"
CAT = "旺财"

const实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动。对于简单类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址，因此等同于常量。但对于复合类型的数据（主要是对象和数组），变量指向的内存地址，保存的只是一个指向实际数据的指针，const只能保证这个指针是固定的（即总是指向另一个固定的地址），至于它指向的数据结构是不是可变的，就完全不能控制了。因此，将一个对象声明为常量必须非常小心。

const obj = {a:1,b:2}
console.log(obj.a) // 1
obj.a = 3
console.log(obj.a) // 3

5.块儿级作用域（局部变量）；

// 5. 块儿级作用域（局部变量）； 
{ 
    const CAT = "喵喵"
    console.log(CAT)
}
console.log(CAT);

注意：声明对象类型使用 const，非对象类型声明选择 let；

总结：

var 声明的变量属于函数作用域，let 和 const 声明的变量属于块级作用域；
var 存在变量提升现象，而 let 和 const 没有此类现象；
var 变量可以重复声明；而在同一个块级作用域，let 变量不能重新声明，const 变量不能修改。

四、块级作用域与函数声明

let实际上为 JavaScript 新增了块级作用域，ES6 允许块级作用域的任意嵌套。

{{{{
  {let insane = 'Hello World'}
  console.log(insane); // 报错
}}}};

上面代码使用了一个五层的块级作用域，每一层都是一个单独的作用域。第四层作用域无法读取第五层作用域的内部变量。

内层作用域可以定义外层作用域的同名变量。

{{{{
  let insane = 'Hello World';
  {let insane = 'Hello World'}
}}}};

块级作用域的出现，实际上使得获得广泛应用的匿名立即执行函数表达式（匿名 IIFE）不再必要了。

// IIFE 写法
(function () {
  var tmp = ...;
  ...
}());

// 块级作用域写法
{
  let tmp = ...;
  ...
}

函数能不能在块级作用域之中声明？

ES5 规定，函数只能在顶层作用域和函数作用域之中声明，不能在块级作用域声明。但是，浏览器没有遵守这个规定，为了兼容以前的旧代码，还是支持在块级作用域之中声明函数，因此下面两种情况实际都能运行，不会报错。

// 情况一
if (true) {
  function f() {}
}

// 情况二
try {
  function f() {}
} catch(e) {
  // ...
}

ES6 引入了块级作用域，明确允许在块级作用域之中声明函数。ES6 规定，块级作用域之中，函数声明语句的行为类似于let，在块级作用域之外不可引用。

function f() { console.log('I am outside!'); }

(function () {
  if (false) {
    // 重复声明一次函数f
    function f() { console.log('I am inside!'); }
  }

  f();
}());

上面代码在 ES5 中运行，会得到“I am inside!”，因为在if内声明的函数f会被提升到函数头部，实际运行的代码如下。

// ES5 环境
function f() { console.log('I am outside!'); }

(function () {
  function f() { console.log('I am inside!'); }
  if (false) {
  }
  f();
}());

ES6 就完全不一样了，理论上会得到“I am outside!”。因为块级作用域内声明的函数类似于let，对作用域之外没有影响。但是，如果你真的在 ES6 浏览器中运行一下上面的代码，是会报错的。

// 浏览器的 ES6 环境
function f() { console.log('I am outside!'); }

(function () {
  if (false) {
    // 重复声明一次函数f
    function f() { console.log('I am inside!'); }
  }

  f();
}());
// Uncaught TypeError: f is not a function

上面的代码在 ES6 浏览器中，都会报错。

原来，如果改变了块级作用域内声明的函数的处理规则，显然会对老代码产生很大影响。为了减轻因此产生的不兼容问题，ES6 在附录 B里面规定，浏览器的实现可以不遵守上面的规定，有自己的行为方式。

允许在块级作用域内声明函数。
函数声明类似于var，即会提升到全局作用域或函数作用域的头部。
同时，函数声明还会提升到所在的块级作用域的头部。

注意，上面三条规则只对 ES6 的浏览器实现有效，其他环境的实现不用遵守，还是将块级作用域的函数声明当作let处理。

根据这三条规则，浏览器的 ES6 环境中，块级作用域内声明的函数，行为类似于var声明的变量。上面的例子实际运行的代码如下。

// 浏览器的 ES6 环境
function f() { console.log('I am outside!'); }
(function () {
  var f = undefined;
  if (false) {
    function f() { console.log('I am inside!'); }
  }

  f();
}());
// Uncaught TypeError: f is not a function

考虑到环境导致的行为差异太大，应该避免在块级作用域内声明函数。如果确实需要，也应该写成函数表达式，而不是函数声明语句。

// 块级作用域内部的函数声明语句，建议不要使用
{
  let a = 'secret';
  function f() {
    return a;
  }
}

// 块级作用域内部，优先使用函数表达式
{
  let a = 'secret';
  let f = function () {
    return a;
  };
}

另外，还有一个需要注意的地方。ES6 的块级作用域必须有大括号，如果没有大括号，JavaScript 引擎就认为不存在块级作用域。

// 第一种写法，报错
if (true) let x = 1;

// 第二种写法，不报错
if (true) {
  let x = 1;
}

上面代码中，第一种写法没有大括号，所以不存在块级作用域，而let只能出现在当前作用域的顶层，所以报错。第二种写法有大括号，所以块级作用域成立。

函数声明也是如此，严格模式下，函数只能声明在当前作用域的顶层。

// 不报错
'use strict';
if (true) {
  function f() {}
}

// 报错
'use strict';
if (true)
  function f() {}

五、顶层对象的属性

顶层对象，在浏览器环境指的是window对象，在 Node 指的是global对象。ES5 之中，顶层对象的属性与全局变量是等价的。

window.a = 1;
a // 1

a = 2;
window.a // 2

上面代码中，顶层对象的属性赋值与全局变量的赋值，是同一件事。

顶层对象的属性与全局变量挂钩，被认为是 JavaScript 语言最大的设计败笔之一。这样的设计带来了几个很大的问题，首先是没法在编译时就报出变量未声明的错误，只有运行时才能知道（因为全局变量可能是顶层对象的属性创造的，而属性的创造是动态的）；其次，程序员很容易不知不觉地就创建了全局变量（比如打字出错）；最后，顶层对象的属性是到处可以读写的，这非常不利于模块化编程。另一方面，window对象有实体含义，指的是浏览器的窗口对象，顶层对象是一个有实体含义的对象，也是不合适的。

ES6 为了改变这一点，一方面规定，为了保持兼容性，var命令和function命令声明的全局变量，依旧是顶层对象的属性；另一方面规定，let命令、const命令、class命令声明的全局变量，不属于顶层对象的属性。也就是说，从 ES6 开始，全局变量将逐步与顶层对象的属性脱钩。

var a = 1;
// 如果在 Node 的 REPL 环境，可以写成 global.a
// 或者采用通用方法，写成 this.a
window.a // 1

let b = 1;
window.b // undefined

六、globalThis对象

JavaScript 语言存在一个顶层对象，它提供全局环境（即全局作用域），所有代码都是在这个环境中运行。但是，顶层对象在各种实现里面是不统一的。

浏览器里面，顶层对象是window，但 Node 和 Web Worker 没有window。
浏览器和 Web Worker 里面，self也指向顶层对象，但是 Node 没有self。
Node 里面，顶层对象是global，但其他环境都不支持。

同一段代码为了能够在各种环境，都能取到顶层对象，现在一般是使用this关键字，但是有局限性。

全局环境中，this会返回顶层对象。但是，Node.js 模块中this返回的是当前模块，ES6 模块中this返回的是undefined。
函数里面的this，如果函数不是作为对象的方法运行，而是单纯作为函数运行，this会指向顶层对象。但是，严格模式下，这时this会返回undefined。
不管是严格模式，还是普通模式，new Function('return this')()，总是会返回全局对象。但是，如果浏览器用了 CSP（Content Security Policy，内容安全策略），那么eval、new Function这些方法都可能无法使用。

综上所述，很难找到一种方法，可以在所有情况下，都取到顶层对象。下面是两种勉强可以使用的方法。

// 方法一
(typeof window !== 'undefined'
   ? window
   : (typeof process === 'object' &&
      typeof require === 'function' &&
      typeof global === 'object')
     ? global
     : this);

// 方法二
var getGlobal = function () {
  if (typeof self !== 'undefined') { return self; }
  if (typeof window !== 'undefined') { return window; }
  if (typeof global !== 'undefined') { return global; }
  throw new Error('unable to locate global object');
};

ES2020 在语言标准的层面，引入globalThis作为顶层对象。也就是说，任何环境下，globalThis都是存在的，都可以从它拿到顶层对象，指向全局环境下的this。

垫片库global-this模拟了这个提案，可以在所有环境拿到globalThis。

资料参考阮一峰

参考博主JavaScript中var、let和const的区别_Jealyn的个人博客-CSDN博客_let和const的区别

学习视频尚硅谷