前端禅意花园 前端禅意花园
首页
  • 前端基础

    • html
    • css
    • javaScript
    • ES6
    • typeScript
  • 学习笔记

    • 《JavaScript教程》笔记
    • 《ES6 教程》笔记
    • 《TypeScript从零实现axios》
  • 前端框架

    • Vue
    • React
    • uniapp
    • flutter
    • webpack
  • 学习笔记

    • 《Vue》笔记
nodejs
  • 书籍资源
  • 网站资源
  • 技术文档
  • GitHub技巧
  • 博客搭建
  • 面试
  • 小程序
  • 友情链接
  • 随笔
  • 文章
  • 照片
  • 分类
  • 标签
  • 归档
关于我
GitHub

见路不走

大肚能容容天下难容之事,开口常笑笑天下可笑之人
首页
  • 前端基础

    • html
    • css
    • javaScript
    • ES6
    • typeScript
  • 学习笔记

    • 《JavaScript教程》笔记
    • 《ES6 教程》笔记
    • 《TypeScript从零实现axios》
  • 前端框架

    • Vue
    • React
    • uniapp
    • flutter
    • webpack
  • 学习笔记

    • 《Vue》笔记
nodejs
  • 书籍资源
  • 网站资源
  • 技术文档
  • GitHub技巧
  • 博客搭建
  • 面试
  • 小程序
  • 友情链接
  • 随笔
  • 文章
  • 照片
  • 分类
  • 标签
  • 归档
关于我
GitHub
  • html小菜一碟

  • css无人精通

  • css预编译语言

  • javascript再进一步

  • ECMAScript6一年一更

    • import和export使用
    • let和const
      • ES6声明变量的六种方法
      • let命令
      • const命令
      • 块级作用域
        • 为什么需要块级作用域
        • ES6的块级作用域
        • 块级作用域与函数声明
      • 顶层对象的属性
      • 综上
      • 参考
    • 变量的解构赋值
    • ES6面向对象
    • ES6数组遍历方法详解
    • 聊一聊EventLoop
    • Proxy
  • typeScript走向规范

  • 学习笔记

  • 前端三件套
  • ECMAScript6一年一更
见路不走
2020-08-28

let和const

ES6新增变量声明方式

# ES6声明变量的六种方法

ES5只有两种声明变量的方法:var、function

ES6共有六种声明变量的方法:var、function、let、const、import、class

# let命令

  • 块级作用域

  • 不存在变量提升

  • 暂时性死区:在代码块内,使用let命令声明变量之前,该变量都是不可用的(即使代码块父级作用域已经定义)。

  • 不允许重复声明:let命令不允许在相同作用域内,重复声明同一个变量。

# const命令

  • 只读变量,一旦声明,变量值就不能改变。这意味着,const一旦声明变量,就必须立即初始化,不能留到以后赋值。

  • 块级作用域

  • 不存在变量提升

  • 暂时性死区:在代码块内,使用let命令声明变量之前,该变量都是不可用的(即使代码块父级作用域已经定义)。

  • 不允许重复声明:let命令不允许在相同作用域内,重复声明同一个变量。

本质

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

// 常量foo储存的是一个地址,这个地址指向一个对象。不可变的只是这个地址,即不能把foo指向另一个地址,但对象本身是可变的,所以依然可以为其添加新属性。

const foo = {};

// 为 foo 添加一个属性,可以成功
foo.prop = 123;
foo.prop // 123

// 将 foo 指向另一个对象,就会报错
foo = {}; // TypeError: "foo" is read-only

const a = [];
a.push('Hello'); // 可执行
a.length = 0;    // 可执行
a = ['Dave'];    // 报错
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 块级作用域

# 为什么需要块级作用域

ES5只有全局作用域和函数作用域,没有块级作用域,所以有很多不合理的场景

  1. 内层变量可能会覆盖外层变量
// 由于变量提升的原因导致内层的tmp覆盖了外层的tmp
var tmp = new Date();

function f() {
  console.log(tmp);
  if (false) {
    var tmp = 'hello world';
  }
}

f(); // undefined
1
2
3
4
5
6
7
8
9
10
11
  1. 用于计数的循环变量泄露为全局变量
// 变量i只用来控制循环,但循环结束后它并没有消失,而泄露成了全局变量;
var s = 'hello';

for (var i = 0; i < s.length; i++) {
  console.log(s[i]);
}

console.log(i); // 5
1
2
3
4
5
6
7
8

# ES6的块级作用域

let和const实际上为JavaScript新增了块级作用域。

ES6允许块级作用域任意嵌套。每一层都是一个单独的作用域,外层作用域无法读取内层作用域的变量。块级作用域的出现实际上取代了匿名立即执行函数表达式。

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

# 块级作用域与函数声明

ES5中规定函数只能在顶层作用域和函数作用域中声明,不能在块级作用域声明。但浏览器为了兼容以前的代码,还是在支持在块级作用域之中声明函数。

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

注意

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

  • 允许在块级作用域内声明函数

  • 函数声明方式类似var,即会提升到全局作用域或函数作用域头部

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

注意

ES6块级作用域必须要有大括号,如果没有大括号,JavaScript引擎就认为不存在块级作用域。

严格模式下,let、const、function,都只能声明在当前作用域的顶层。

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

// 第二种写法,不报错
if (true) {
  let x = 1;
}
1
2
3
4
5
6
7
// 不报错
'use strict';
if (true) {
  function f() {}
}

// 报错
'use strict';
if (true)
  function f() {}
1
2
3
4
5
6
7
8
9
10

# 顶层对象的属性

顶层对象,在浏览器环境指的是window对象,在 Node 指的是global对象。

ES5 之中,顶层对象的属性与全局变量是等价的。顶层对象的属性赋值和全局变量的赋值是同一件事

window.a = 1;
a // 1

a = 2;
window.a // 2
1
2
3
4
5

注意

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

ES6 为了改变这一点,一方面规定,为了保持兼容性,var命令和function命令声明的全局变量,依旧是顶层对象的属性;另一方面规定,let命令、const命令、class命令声明的全局变量,不属于顶层对象的属性。

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

let b = 1;
window.b // undefined
1
2
3
4
5
6
7

# 综上

ES6 规定暂时性死区和let、const语句不出现变量提升,主要是为了减少运行时错误,防止在变量声明前就使用这个变量,从而导致意料之外的行为。这样的错误在 ES5 是很常见的,现在有了这种规定,避免此类错误就很容易了。

总之,暂时性死区的本质就是,只要一进入当前作用域,所要使用的变量就已经存在了,但是不可获取,只有等到声明变量的那一行代码出现,才可以获取和使用该变量。

# 参考

阮一峰:《ESMAScript6入门》

#ES6
上次更新: 2020/10/14, 21:10:00
import和export使用
变量的解构赋值

← import和export使用 变量的解构赋值 →

最近更新
01
Proxy
01-04
02
经典语录
12-25
03
自定义轮播图组件
12-25
更多文章>
| Copyright © 2020-2021 前端禅意花园 | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式