JS高级 - let/const

coderklaus
215 阅读4分钟

let/const

在ES5中我们声明变量都是使用的var关键字，从ES6开始新增了两个关键字可以声明变量：let、const

关键字说明
let用于声明一个变量
constconst关键字是constant的单词的缩写，表示常量、衡量的意思
即const用于定义常量，也就是说保存的数据一旦被赋值，就不能被修改
但是如果赋值的是引用类型，那么可以通过引用找到对应的对象，修改对象的内容

let/const 与 var之间的区别

  1. let、const在同一个作用域内不允许重复声明变量
    • 无论这个变量是使用var/let/const 中那个关键字进行声明的
    • 只要在当前环境记录中存在该变量，就不可以重复进行声明
var name = 'Klaus'
let name = 'Klaus' // error -> name已经被声明

  1. let/const 并不会作用域提升

    • 在执行上下文的词法环境创建出来的时候，变量事实上已经被创建了，只是这个变量是不能被访问的

    • 作用域提升的定义是在声明变量的作用域中，如果这个变量可以在声明之前被访问，那么我们可以称之为作用域提升

    • 所以虽然let/const在词法环境被创建的时候就已经被定义，但是其无法访问，所以可以认为let/const不会存在作用域提升

  2. let/const 存在暂时性死区(TDZ)

    • 从块作用域的顶部一直到变量声明完成之前，这个变量处在暂时性死区（TDZ，temporal dead zone）
    • TDZ取决于执行顺序（时间），而不是编写代码的位置
    • TDZ形成后，则该作用域内这个标识符在真正被赋值之前是不能被访问的
let msg = 'global msg'

function foo() {
  console.log(msg) // error -> msg在foo函数内部形成了TDZ
  let msg = 'foo msg'
}
  1. let/const定义的变量不会被挂载到globalThis上

image.png

从上图可以得知，使用let/const定义的变量会被挂载到声明式环境记录中，而使用function和var定义的变量会被挂载到对象环境记录中

而在全局中，对象环境记录就是GO对象，也就是globalThis对象

var msg = 'var variable'
let username = 'Klaus'

function foo() {
  debugger
}

foo()

image.png

对于全局环境记录逻辑上应该是一个单一的环境记录类型

但是在实际实现中，全局环境记录是一种比较特殊的环境记录

其值是一个由声明式环境记录和对象式环境记录组成的合成环境记录

其中全局对象式环境记录就是对应的GO对象

同时全局环境记录也取代了GO，成为了GC标记清除算法中的新的root对象

  1. let/const 会形成块级作用域

在ES6中新增了块级作用域，并且通过let、const、function、class声明的标识符是具备块级作用域的限制的

所谓块级作用域就是使用{}包裹起来的代码

{
  // 这里是块级作用域
}

let age = 23
if (age > 18) {
  // 我们将限制条件和块级作用域组合后
  // 可以形成条件判断语句
}

const num = 10
for(let i = 0; i < num; i++) {
  // 我们将循环条件和块级作用域组合后
  // 可以形成循环语句
}

function foo() {
  // function 和 块级作用域组合后
  // 可以形成一种特殊的作用域 - 函数作用域
}

// 在ES6之前 只有全局作用域和函数作用域
// ES6即以后，新增了一种新的作用域 即块级作用域

// foo() // error

{
  const name = 'Klaus'
  let age = 23
  class Person {}
  function foo() {
    console.log('foo')
  }
}

// 在块级作用域外部是无法使用let/const/class定义的变量的
// console.log(name) // error
// console.log(age) // error
// const per = new Person()

// function有一点特殊
// 为了兼容旧版本代码
// 我们可以在块级作用域后访问function声明的函数对象
// 但是我们不可以在块级作用域前访问function声明的函数对象
foo()

块级作用域内存体现

var msg = 'global msg'
const name = 'Klaus'
function foo() {}

{
  var height = 1.88
  let address = 'shanghai'
}

image.png

avatar
文章
阅读
粉丝