深入理解ES6 001【学习笔记】

块级作用域绑定

之前的变量声明var无论在哪里声明的都被认为是作域顶部声明的,由于函数是一等公民,所以顺序一般是function 函数名()var 变量

块级声明

块级声明用于声明在指定块的作用域之外无法访问的变量。块级作用域存在于:

  • 函数内部
  • 块中(字符和{}之间的区域)

临时死区

javascript引擎在扫描代码发现变量声明时,要么将它们提升至作用域顶部,要么放到TDZ中。访问TDZ的变量会触发运行时错误。只有执行过变量声明后,变量才会从TDZ中移出,然后访问可正常访问。

if(condition){
  console.log(typeof value) // 引用错误
  let value = "blue";
}
// 以下的value并不在TDZ中
console.log(typeof value); // "undefined"
if(condition){
  let value="blue"
}

循环中的块作用域绑定

使用let 变量只存在于for循环中,一旦循环结束,无法访问这个变量

for(let i=0;i<10;i++){
  process(items[i]);
}
// i 在这里不可访问,抛出一个错误
console.log(i);

循环中的函数

var声明让开发者在循环中创建函数变得异常困难,因为变量到了循环之外仍能访问。

var funs = [];
for(var i=0;i<10;i++){
  funs.push(function(){
    console.log(i)
  })
}
funcs.forEach(function(func){
  func(); // 输出10次数字10
})

为了解决这个问题,开发者们在循环中使用立即调用函数表达式,以强制生成计数变量的副本。IIFE表达式为接受的每一个变量i都创建一个副本并存储为变量value。这个变量的值就是相应迭代创建的函数所使用的值,因此调用每个函数

var funs = [];
for(var i=0;i<10;i++){
  funs.push((function(value){
    return function(){
      console.log(i)
    }
  })(i))
}
funcs.forEach(function(func){
  func(); // 输出0,1,2...
})

循环中的let声明

let声明模仿上述所做的一切来简化循环过程,每次迭代循环都分创建一个新变量,并以之前迭代中同名变量的值将其初始化。也适合于for-in for-of for-each

var funs = [];
for(let i=0;i<10;i++){
  funs.push(function(){
    console.log(i)
  })
}
funcs.forEach(function(func){
  func(); // 输出0,1,2...
})

let声明在循环内的行为是标准中专门定义的,它不一定与let的不提升特性相关,理解这一点至关重要。事实上,早期let实现中不包含这一行为。是后来加入的。

循环中使用const

for(const i=0;i<10;i++)会报错,因为i++时试图改变常量i的值。而在for-infor-of中因为没有去试图改原i值的操作。而是新创建了一个变量。所以执行会跟使用let声明一样

全局作用域绑定

letconstvar的另外一区别是它们在全局作用域中的行为。当var被用于全局作用域时,它会创建一个新的全局变量作为全局对象的属性。这意味着var很有可能会无意中覆盖一个已经存在的全局变量。而使用letconst不能覆盖全局变量,而只能遮蔽它。so

let RegExp = 'Hello world'
console.log(window.RegExp === RegExp)

主题测试文章,只做测试使用。发布者:Walker,转转请注明出处:https://joyjs.cn/archives/4308

(0)
Walker的头像Walker
上一篇 2025年3月8日 10:59
下一篇 2025年3月27日 15:01

相关推荐

  • 深入理解ES6 002【学习笔记】

    字符串和正则表达式 字符串和正则表达式 Javascript字符串一直基于16位字符编码(UTF-16)进行构建。每16位的序列是一个编码单元(code unit),代表一个字符。length、charAt()等字符串属性和方法都基于这个编码单元构造的。Unicode的目标是为世界上每一个字符提供全球唯一的标识符。如果我们把字符长度限制在16位,码位数量将不…

    个人 2025年3月8日
    1.1K00
  • 深入理解ES6 008【学习笔记】

    迭代器(Iterator)和生成器(Generator) 这个新特性对于高效的数据处理而言是不可或缺的,你也会发现在语言的其他特性中也都有迭代器的身影:新的for-of循环、展开运算符(...)、甚至连异步编程都可以使用迭代器。 迭代器是一种特殊的对象,它具有一些专门为迭代过程设计的专有接口,所有的迭代器对象都有一个next()方法,每次调用都返回一个结果对…

    个人 2025年3月8日
    68700
  • Nuxt3_扫盲 入门与原理介绍【学习笔记】

    Nuxt 3 入门与原理介绍 💡 什么是 Nuxt 3? Nuxt 3 是基于 Vue 3 和 Vite 打造的全栈前端框架,支持: 服务端渲染(SSR) 静态站点生成(SSG) 单页应用(SPA) 构建全栈应用(支持 API) Nuxt 3 是 Vue 的“加强版”,帮你简化项目结构和开发流程。 🔧 核心原理 功能 Nuxt 如何处理 ✅ 页面路由 自动根…

    个人 2025年4月6日
    1.2K00
  • 深入理解ES6 004【学习笔记】

    扩展对象的功能 普通对象 具有js对象所有默认内部行为的 特异对象 具有某些与默认行为不符的内部行为 标准对象 es6规范中定义的对象,Array/Date等 内建对象 脚本开始执行时存在于javascript执行环境的对象,所有标准对象都是内建对象 对象字面量语法扩展 属性初始值的简写,当一个对象的属性与本地变量同名时,不必再写冒号和值 对象方法的简写语法…

    个人 2025年3月8日
    83000
  • 热爱运动,挑战极限,拥抱自然

    热爱 在这个快节奏的时代,我们被工作、生活的压力所包围,常常忽略了身体的需求。而运动,不仅仅是一种健身方式,更是一种释放自我、挑战极限、与自然共舞的生活态度。无论是滑雪、攀岩、冲浪,还是跑步、骑行、瑜伽,每一种运动都能让我们找到内心的激情,感受到生命的跃动。 运动是一场自我挑战 挑战极限,不仅仅是职业运动员的专属,而是每一个热爱运动的人都可以追求的目标。它可…

    个人 2025年2月26日
    80700

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信
欢迎🌹 Coding never stops, keep learning! 💡💻 光临🌹