深入理解ES6学习笔记之块级作用域绑定


Posted in Javascript onAugust 19, 2017

众所周知,js中的var声明存在变量提升机制,因此ESMAScript 6引用了块级作用域来强化对变量生命周期的控制
let const 声明不会被提升,有几个需要注意的点

1、不能被重复声明

假设作用域中已经存在某个标识符(无论该标识符是通过var声明还是let、const变量声明),此时再使用let或const关键定声明会抛错

var count=10
let count=20// 此处则会抛出错误,因为同一作用域内不能重复声明

如果当前作用域内嵌另一个作用域,便可在内嵌的作用域中用let声明同名变量

var count=10
if(true){
  let count=20
}

2、const声明的常量必须进行初始化

像下面这样声明就会报错

const name;//语法错误,常量未初始化

3、不可以为const定义的常量再赋值,真正的本质是const声明不允许修改绑定,但允许修改值(也就是说const声明对象后,可以修改该对象的属性值)

const person={
 name:'angela'
}
//可以修改对象属性的值
person.name='yun'
// 修改绑定则会抛出语法错误
person={
 'name':'Shining'
}

4、临时性死区(Temporal Dead Zone)

JavaScript引擎在扫描代码发现变量声明时,要么将它们提升至作用域顶部(遇到var声明),要么将声明放到TDZ中(遇到let和const声明),访问TDZ中的变量会触发运行时错误,只有执行过变量声明语句后,变量才会从TDZ中移出,才能正常访问
如下代码就因为在if块级作用域内执行console.log时value已经在TDZ中了,以前typeof是一个相对不易出错的操作符,但其实也无法阻挡引擎抛出错误

在声明前访问块级绑定会导致错误,因为绑定在临时死区中

if (true) {
 console.log(typeof value)//引用错误
 let value = 'blue'
}

而在let声明的作用域外对该变量使用typeof则不会报错

console.log(typeof value)
if (true) { 
 let value = 'blue'
}

5、块级作用域绑定

之前在循环中创建函数都有些不可言状

var funcs = []
for (var i = 0; i < 10; i++) {
 funcs.push(function () {
  console.log(i)
 })
}
funcs.forEach(function (func) {
 func()
})

因为循环内部创建的函数全部都保留了对相同变量的引用,循环结束时变量i的值为10,所以结果会输出10次10

于是大家会在循环中使用立即调用函数表达式,以强制生成计数器变量的副本,以便输出1、2、3......

var funcs = []
for (var i = 0; i < 10; i++) {

 funcs.push((function (value) {
  return function () {
   console.log(value)
  }
 })(i))

}
funcs.forEach(function (func) {
 func()
})

有了let,立即调用函数表达式则可以简化,其实每次迭代循环都会创建一个新变量,并以之前迭代中同名变量的值将其初始化

var funcs = []
for (let i = 0; i < 10; i++) {
//其实是每次循环的时候let声明都会创建一个新变量i并将其初始化为i的当前值,所以在循环内部创建的每个函数都能得到属于它们自己的i的副本
 funcs.push(function () {
  console.log(i)
 })
}
funcs.forEach(function (func) {
 func()//这里输出是0 然后是1、2....9
})

这个特性同样适用于for in中,举例来说

var funcs = [],
 obj = {
  a: true,
  b: true,
  c: true
 }
for (let key in obj) {
 funcs.push(function () {
  console.log(key)
 })
}
funcs.forEach(function (func) {
 func()//输出的是a b c
})

6、循环中的let声明特性同样适用于const声明,唯一的区别是const不能更改绑定

上面的例子中把let换成const同样输出a b c

var funcs = [],
 obj = {
  a: true,
  b: true,
  c: true
 }
//之所以可以运用for in 和for of循环中,是因为每次迭代不会修改已有绑定,而是会创建一个新绑定
for (const key in obj) {
 funcs.push(function () {
  console.log(key)// 同样输出a b c 唯一的区别是循环内不能更改key的值
 })
}
funcs.forEach(function (func) {
 func()
})

下面的这个例子则会报错,因为在for循环中更改了i的绑定而const常量不能更改绑定

var funcs = []
for (const i = 0; i < 10; i++) {
 funcs.push(function () {
  console.log(i)
 })
}
funcs.forEach(function (func) {
 func()
})

7、全局作用域绑定

当var被作用于全局作用域时,它会创建一个新的全局变量作用全局对象(浏览器环境中的window对象)的属性,这意味着用var很可能会无意中覆盖一个已经存在的全局变量

深入理解ES6学习笔记之块级作用域绑定

从上图代码中看出即便是全局对象RegExp Array都会被覆盖

但是let或const会在全局作用域下创建一个新的绑定,但该绑定不会添加为全局对象的属性,换句话说用let或const不能覆盖全局变量,而只能遮蔽它

深入理解ES6学习笔记之块级作用域绑定

这个时候的RegExp和window.RegExp是不相同的

let RegExp='hello'
console.log(RegExp) //hello
console.log(window.RegExp===RegExp)//false

const ncz='hi'
console.log(ncz)
console.log("ncz" in window)

最佳实践:

默认使用let而不是var

默认使用const,只有确实需要改变变量的值时使用let

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery下的Live方法和$.browser方法使用代码
Jun 02 Javascript
js操作checkbox遇到的问题解决
Jun 29 Javascript
javascript实现动态导入js与css等静态资源文件的方法
Jul 25 Javascript
JS集成fckeditor及判断内容是否为空的方法
May 27 Javascript
深入理解JS DOM事件机制
Aug 06 Javascript
Node.js发送HTTP客户端请求并显示响应结果的方法示例
Apr 12 Javascript
详解Node.js开发中的express-session
May 19 Javascript
Vue2.0中集成UEditor富文本编辑器的方法
Mar 03 Javascript
vue移动端弹框组件的实例
Sep 25 Javascript
微信小程序开发注意指南和优化实践(小结)
Jun 21 Javascript
vue router 传参获取不到的解决方式
Nov 13 Javascript
解决qrcode.js生成二维码时必须定义一个空div的问题
Jul 09 Javascript
深入理解ES6的迭代器与生成器
Aug 19 #Javascript
Mui使用jquery并且使用点击跳转新窗口的实例
Aug 19 #jQuery
Vue自定义事件(详解)
Aug 19 #Javascript
Vue内容分发slot(全面解析)
Aug 19 #Javascript
简单的网页广告特效实例
Aug 19 #Javascript
JavaScript 完成注册页面表单校验的实例
Aug 19 #Javascript
JS模拟超市简易收银台小程序代码解析
Aug 18 #Javascript
You might like
用PHP写的基于Memcache的Queue实现代码
2011/11/27 PHP
通过5个php实例细致说明传值与传引用的区别
2012/08/08 PHP
PHP动态编译出现Cannot find autoconf的解决方法
2014/11/05 PHP
PHP打开和关闭文件操作函数总结
2014/11/18 PHP
PHP实现二维数组根据key进行排序的方法
2016/12/30 PHP
PHP检查网站是否宕机的方法示例
2017/07/24 PHP
php工具型代码之印章抠图
2018/07/18 PHP
详细分析PHP 命名空间(namespace)
2020/06/30 PHP
iframe的onreadystatechange事件在firefox下的使用
2014/04/16 Javascript
JavaScript动态设置div的样式的方法
2015/12/26 Javascript
Javascript中级语法快速入手
2016/07/30 Javascript
浅谈Emergence.js 检测元素可见性的 js 插件
2017/11/18 Javascript
JavaScript定义及输出螺旋矩阵的方法详解
2017/12/01 Javascript
vue + webpack如何绕过QQ音乐接口对host的验证详解
2018/07/01 Javascript
node中的cookie的具体使用
2018/09/13 Javascript
vue2.0中set添加属性后视图不能更新的解决办法
2019/02/22 Javascript
node省市区三级数据性能测评实例分析
2019/11/06 Javascript
[04:14]从西雅图到上海——玩家自制DOTA2主题歌曲应援TI9
2019/07/11 DOTA
[01:05:29]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第二场 1月24日
2021/03/11 DOTA
python中cPickle用法例子分享
2014/01/03 Python
Python网络爬虫实例讲解
2016/04/28 Python
pandas DataFrame实现几列数据合并成为新的一列方法
2018/06/08 Python
Python设计模式之适配器模式原理与用法详解
2019/01/15 Python
python基础教程之while循环
2019/08/14 Python
利用Tensorflow构建和训练自己的CNN来做简单的验证码识别方式
2020/01/20 Python
python3 使用traceback定位异常实例
2020/03/09 Python
在Ubuntu 20.04中安装Pycharm 2020.1的图文教程
2020/04/30 Python
Python 中Operator模块的使用
2021/01/30 Python
python实现学生通讯录管理系统
2021/02/25 Python
罗技美国官网:Logitech美国
2020/01/22 全球购物
神路信息Java面试题目
2013/03/31 面试题
师范生实习的个人自我鉴定
2013/10/20 职场文书
汇源肾宝广告词
2014/03/20 职场文书
2014年学校团委工作总结
2014/12/20 职场文书
Windows10下安装MySQL8
2021/04/06 MySQL
详解Redis瘦身指南
2021/05/26 Redis