JavaScript ES6 let const

76433橘子
107 阅读5分钟

JavaScript ES6 let const

JavaScript 新的ECMA术语

  • 执行上下文栈 Execution Context Stack 用来进行描述的是执行上下文的栈结构
  • 执行上下文 Execution Context 代码在执行之前的会创建的对应的执行上下文
  • 变量对象 Variable Object 上下文关联的 VO 对象
  • 全局对象 Global Object 全局执行上下文关联的 VO 对象
  • 激活对象 Activation Object 函数执行上下文关联的 VO 对象
  • 作用域链 scope chain 作用域链，用于关联指向上下文的变量查找

词法环境（Lexical Environment）

词法环境就是一种规范类型，用来实现的是嵌套结构中定义的关联的变量和函数等标识符

  • 一个词法环境的话就是由环境记录（Environment Recoird） 和一个外部的词法环境（Lexical Environment）组成
  • 一个词法环境常常用于实现关联的是一个函数声明，代码块语句，try-catch语句

image-20241116232020744.png

image-20241116231722233.png

  • 所以说上面的词法环境的话绑定的就不是一个上下文的什么 VＯ对象了，这个时候实现关联的是我们的 词法环境

    • 也就是说现在的话我们实现的执行的是关联的是词法环境以及外部的词法环境

  • 一个词法环境的话包含了两个部分：一个是词法记录，一个是我们的外部的词法环境，但是这个外部的词法环境可能是 null

    • 比如说，我们的全局的词法环境的外部的词法环境就是 null，因为本身已经是最顶层了

image-20241116233503519.png

LexicalEnvironment 词法环境 和 VariableEnvironment 变量环境

  • LexicalEnvironment 是用来处理 let | const 声明的标识符

    • instantiated 被建立
    • accessed 被访问
    • LexicalBinding 词法绑定
    • evaluated 赋值求值
    • in any way 使用任何方式

  • VariableEnvironment 用来实现处理的是 var 和 function 声明的标识符

image-20241116234050246.png

image-20241116234645870.png

环境记录（Environment Record）

  • 官网阅读

  • 声明式环境记录： 声明环境记录用于定义 ECMAScript 语言语法元素的效果，比如说函数声明，变量声明，直接将标识符绑定与

    • ECMA 语言值关联的 Catch 语句

  • 对象式环境记录：对象环境记录就是实现的是我们的定义 ECMA 元素的效果，WithStatement 它将绑与某些对象的属性关联起来

image-20241116235354374.png

image-20241117000436095.png

JavaScript ES6 let | const 的使用

基本使用

  • 从我们的 ES6 开始就出现了两个新的用来实现的声明变量的关键字了 let|const

  • let 关键字

    • 就是用来实现的是声明我们的变量的的关键字，直观上和 var 是没有什么区别的

      •   var variable = "juwenzhang"
  variable = "76433"
  variable = "水逆信封"
  console.log(variable)  // 水逆信封
  ​
  ​
  let variable2 = "juwenzhang"
  variable2 = "76433"
  variable2 = "水逆信封"
  console.log(variable2)  // 水逆信封

  • const 关键字

    • const 关键字就是表示的是我们的常量的意思 constant
    • 他表示的是一个变量一旦实现了被赋值的操作后，就不能被修改了
    • 如果他赋值的是引用数据类型的话，那么通过引用可以找到对应的对象，修改对象的内容
    • 这个部分的话，多写代码就可以实现我们的区分其中的差别了
    • // 开始定义一个普通的值
const variable3 = "juwenzhang"
console.log(variable3)
// variable3 = "76433"  // 报错
​
const obj = {
    name: "76433",
    age: 18
}
// obj = {}  // 报错
// 但是是可以通过我们底引用来实现修改我们对象的内容的
obj.name = "hahah"
console.log(obj)

  • let 和 const 是不允许在同一个作用域中变量的重复声明

注意事项一

  • 首先使用我们的 let 和 const 是没有作用域提升的

    • 在我们的以前的使用 var 的时候，我们是可以发现一点的是

      • 我们是可以在变量的定义之前实现访问我们的 变量，只不过是 undefined 而已
      • 这个就是因为我们的 VO 模型导致的了
      • console.log(message)  // undefined
var message = "hello world"

    • 但是使用 let 和 const 的时候，我们就只能在变量定义后实现访问

      • 这个现象的话就是因为通过 let 和 const 实现定义的变量还是进行了提前的创建，但是在赋值求值之前不允许被访问
      • 但是只不过的话就是其允许被访问的时机是在变量被求值后才允许被访问
      • 所以说原则上的话是含有作用域提升的，但是只不过的话，表现形式上是没有作用域提升的
      • // console.log(message)  // error
let message = "hello world"
console.log(message)  // hello world

  • 有暂存性死区（TDZ）

    • 从块级作用域顶部到变量完成声明之前，这个变量就一直处于暂时性死区（TDZ: temporal dead zone）

    • 在暂时性死区就是从作用域的开始到变量的确确实实的声明结束，这个过程中都是含有暂时性死区

      • 在这个区域中，变量是不可被访问的

image-20241117011744938.png

image-20241117011829597.png

注意事项二

  • let | const 定义的变量不会添加到 window 上面的（var 声明的变量是会添加到 window 上面的呐！！！）

注意事项三

  • let 和 const 声明的变量是具有块级作用域的
  • 块就是我们的一个 使用 {} 包裹的代码就是代码块
  • {
    let message = "hello world"
}
// console.log(message)  // 报错
  • 在我们的 ES6 之前的话，只是具有全局作用域和函数作用域的
  • 但是现在的话使用 let | const 就具有了块级作用域了
avatar
文章
阅读
粉丝