📕
余烬的小册
数据结构与算法GitHub
  • 总述
  • 经验记录
    • 经验总结
      • web component
      • 前端性能优化总结与分析
      • 我的长列表优化方案
      • 双向通讯解决方案
      • 🔧基于istanbul实现代码测试覆盖率工具
      • 表单系统(低代码表单)
      • 跨端小程序
      • 设计一个即时聊天功能
      • 跨页面通讯 3658699fe4cb4d0bbe22b0881390bacd
    • 踩坑记录
      • HTML踩坑记录
      • Flutter踩坑记录
      • CSS踩坑记录
  • 源码解析
    • Vue源码解析
      • Vue2源码解析系列-响应式原理
      • Vue2源码解析系列-模板编译
      • Vue2源码解析系列-渲染系统(待更新)
        • Patch
      • Vue2源码解析系列-调度系统(todo)
      • Vue2组件更新流程(todo)
      • 如何学习Vue源码
      • Vue3源码解析系列-响应系统
      • Vue3源码解析系列-渲染系统
      • Vue3源码解析系列-组件化和渲染优化(todo)
      • Vue router源码解析(todo)
    • React源码解析(todo)
    • 微前端
      • qiankun源码解析(todo)
    • Vite源码解析
      • Vite Client源码
      • Vite Server源码(todo)
  • 前端技术
    • javaScript
      • ES6
        • 变量声明
        • 模块化
        • 箭头函数
        • 你不知道的for...of
        • 新的数据结构Set和Map
        • JavaScript异步编程终极解决方案
        • ES6 Class 3a0c0a225a534984aabe9a943c5df975
      • JavaScript Error
      • JavaScript浅拷贝和深拷贝
      • JavaScript闭包
      • JavaScript最佳实践
      • JavaScript设计模式
      • async函数的polyfill
    • 深入理解JavaScript系列
      • JavaScript中的继承
      • JavaScript原始类型和引用类型
      • JavaScript浅拷贝和深拷贝
      • JavaScript手写系列
      • JavaScript之this
      • 词法环境和环境记录
      • JavaScript内存泄漏
      • 执行上下文
      • 从ECMAScript规范中学习this
    • TypeScript
      • TypeScript基础教程
      • Typescript高级操作
      • TypeScript工具类型
      • Typescript手写实现工具类型
      • Typescript总结(思维导图)
    • 浏览器原理
      • 页面渲染原理
      • 浏览器存储
      • JavaScript事件循环
      • 事件循环
      • 跨域
      • DOM事件流
      • 从输入url到页面渲染
      • 判断节点之间的关系及根据节点关系查找节点
      • history API
    • 跨端技术
      • Flutter
        • Flutter布局组件
    • 前端工程化
      • Babel插件开发指南
      • 循环依赖
      • pm2
    • React
      • React 状态管理
      • React组件通讯
      • Redux入门
      • Flux
      • React Hook(todo)
      • Effect
  • 服务器端
    • 计算机网络
      • 应用层
      • 运输层
      • 物理层
      • 数据链路层
      • HTTP缓存
      • HTTPS
      • 网络层
    • NodeJs
      • Node.js
      • nodejs最佳实践
      • 《深入浅出Nodejs》小结
      • mongoose填充(populate)
      • node事件循环
      • Node子进程
      • nestjs从零开始
      • nodejs流
      • Nodejs调试
      • Koa源码解析
    • 服务器
      • 操作系统
      • Linux
      • nginx常用指令
      • nginx常用配置
    • 数据库
      • Mysql常见语法
      • MongoDB Indexes索引
  • 前端安全与性能优化
    • 前端安全
      • 跨站脚本攻击(XSS)
      • 跨站点请求伪造(CSRF)
      • 点击劫持
      • 中间人攻击
      • 越权攻击与JWT
    • 前端性能优化
      • 前端监控系统
      • 前端性能优化总结与分析 7348bba0918645b1899006dc842a64c1
      • 衡量性能的核心指标 0dc15ef127cf4f4a9f1137c377420292
      • 图片懒加载
  • 杂项
    • 其他
      • Git
      • web component框架
      • 实现滚动框的懒加载
      • Stencil指南
    • CSS
      • 定位和层叠上下文
      • BFC
      • 盒模型
      • css选择器
      • css变量
由 GitBook 提供支持
在本页
  • var的缺陷
  • let
  • 什么是块级作用域
  • 块级作用域
  • 不能重复声明
  • 不存在变量提升
  • 暂时性死区
  • 总结
  • const
  • 基础用法
  • 本质
  • 参考
在GitHub上编辑
  1. 前端技术
  2. javaScript
  3. ES6

变量声明

上一页ES6下一页模块化

最后更新于3年前

var的缺陷

在说let和const前,我们先来看看var有哪些让人忍不住吐槽的地方。

传统的var声明的变量是函数级作用域

对于var声明的变量来说,只存在函数级作用域和全局作用域。

这种宽泛的作用域对于if、for的语法不太友好,试想一下以下代码:

你本来是想要获取-1却不小心获取到了在for代码块里声明的第二个i变量。

同时,从上面代码我们也能看到第二个var的缺点,就是在一个作用域里可以重复声明同一个变量

例如在下方代码里,index将会被重复声明,而js并不会报错。

var能重复声明的机制会让你很轻易地破坏原有的变量,在代码很少的时候或许你能谨慎地尽量不重复声明,但是当代码很多的时候,意外地重复声明变量是难以避免的。

此外var还存在着一种令人困惑的机制:变量提升,即变量可以在声明之前使用,值为undefined

js会先把var a 提升到作用域的顶部,然后到原代码位置时才执行赋值操作a = 1。

正是由于var这些反人类的设计,ES6之后出现了新的声明变量的方式let和const

let

let是ES6新增语法,用来声明变量,作为var的替代品

let作为ES6新声明变量的方式,必定是要修复传统var的缺陷。

请记住let和const的主要特性

  • 块级作用域

  • 不能重复声明

  • 没有变量提升

  • 暂时性死区

什么是块级作用域

前面说过var是函数级作用域和全局作用域,那么什么是块级作用域呢?

我们可以先拆分一下: “块级” + “作用域”

作用域我们都熟悉,那么什么是块呢?

所谓的块,就是代码块,有一对大括号包裹的区域。

块级作用域

let声明的变量是块级作用域,换句话来说,就是let声明的变量的作用域在它声明时所在的代码块里

在块(作用域)外无法访问该变量,这与var声明的变量在函数外无法访问函数内声明的变量是一样的。

不能重复声明

在一个作用域里,无法用let重复声明同一个变量。

这样可以尽量避免变量被覆盖的情况。

不存在变量提升

前面说过var的变量提升机制,而let声明的变量则是必须声明后再使用,否则会报错。

暂时性死区

在了解暂时性死区前,先来看这一段有趣的代码

因为var会进行变量提升,所以其实在提升时第二个tmp就覆盖了第一个tmp变量,最终输出都是abc。

但是我们把var换成let试一下

会报错 Uncaught ReferenceError: Cannot access 'tmp' before initialization

因为在if块里面let声明的变量tmp,就相当于“绑定”了这个区域,不再受外部的影响。因此tmp不能在声明前被访问,哪怕是作用域链中有同名变量。这就是暂时性死区

了解之后,我们这样改一下就不会报错了

总结

let是作为var的替代方法被设计的,因此它修复了var许多缺陷,而平时使用let应当牢记一个原则: 先声明再使用

const

基础用法

const也是ES6新语法,用作声明一个常量。

同时const也和let一样,具有块级作用域、不能重复声明等特性。

因为const声明的是常量,因此应当在声明时就赋值(初始化),不能像let一样,先声明再赋值。

被const声明的变量也无法再重新赋值.

本质

const本质上并不是保证值不变,而是保证变量指向的那个内存地址不变。

要理解这句话,你可能需要先理解什么是原始类型和引用类型

在《JavaScript高级程序设计第四版》有一节专门讲了原始类型和引用类型,推荐阅读

js里的变量本质上是指针,指向一块内存地址,对于原始类型来说,变量指向的那块内存保存的就是它的值,因此变量指向的内存地址不变,变量的值也就不会改变;

但是对于引用类型来说(Object),变量指向的内存地址,保存的只是一个指向实际数据的指针,因此const只能保证变量指向的地址是固定的(即总是指向另一个固定的地址),但是不能保证变量指向的那个指针的指向不变,因此也就不能保证引用类型的值不变。

参考

《JavaScript高级程序设计第四版》

网道—ES6