深入理解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之自动完成组件的深入解析
Jun 19 Javascript
jquery二级导航内容均分的原理及实现
Aug 13 Javascript
JavaScript验证电子邮箱的函数
Aug 22 Javascript
js使用onmousemove和onmouseout获取鼠标坐标的方法
Mar 31 Javascript
基于jquery插件实现拖拽删除图片功能
Aug 27 Javascript
前后端如何实现登录token拦截校验详解
Sep 03 Javascript
JS实现根据数组对象的某一属性排序操作示例
Jan 14 Javascript
p5.js码绘“跳动的小正方形”的实现代码
Oct 22 Javascript
node.js 使用 net 模块模拟 websocket 握手进行数据传递操作示例
Feb 11 Javascript
基于Vue.js+Nuxt开发自定义弹出层组件
Oct 09 Javascript
ES6字符串的扩展实例
Dec 21 Javascript
JS如何使用剪贴板操作Clipboard API
May 17 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中自定义函数dump查看数组信息类似var_dump
2014/01/27 PHP
PHP获取中英混合字符串长度的方法
2014/06/07 PHP
php取得字符串首字母的方法
2015/03/25 PHP
PHP基于curl后台远程登录正方教务系统的方法
2016/10/14 PHP
php reset() 函数指针指向数组中的第一个元素并输出实例代码
2016/11/21 PHP
PHP读取CSV大文件导入数据库的实例
2017/07/24 PHP
响应鼠标变换表格背景或者颜色的代码
2009/03/30 Javascript
js操作二级联动实现代码
2010/07/27 Javascript
19个很有用的 JavaScript库推荐
2011/06/27 Javascript
基于JQuery的Select选择框的华丽变身
2011/08/23 Javascript
js arguments,jcallee caller用法总结
2013/11/30 Javascript
JS中表单的使用小结
2014/01/11 Javascript
jQuery 移动端artEditor富文本编辑器
2016/01/11 Javascript
xcode中获取js文件的路径方法(推荐)
2016/11/05 Javascript
JavaScript操作文件_动力节点Java学院整理
2017/06/30 Javascript
vue2.X组件学习心得(新手必看篇)
2017/07/05 Javascript
JQuery扩展对象方法操作示例
2018/08/21 jQuery
vue2.0 使用element-ui里的upload组件实现图片预览效果方法
2018/09/04 Javascript
Vue中使用matomo进行访问流量统计的实现
2019/11/05 Javascript
element-ui tooltip修改背景颜色和箭头颜色的实现
2019/12/16 Javascript
Vue+Bootstrap收藏(点赞)功能逻辑与具体实现
2020/10/22 Javascript
Python中使用scapy模拟数据包实现arp攻击、dns放大攻击例子
2014/10/23 Python
Python中str is not callable问题详解及解决办法
2017/02/10 Python
Python学习笔记之if语句的使用示例
2017/10/23 Python
python编程实现12306的一个小爬虫实例
2017/12/27 Python
Python中的函数作用域
2018/05/07 Python
Python实现监控Nginx配置文件的不同并发送邮件报警功能示例
2019/02/26 Python
Pytorch 使用CNN图像分类的实现
2020/06/16 Python
关于webview适配H5上传照片或者视频文件的方法
2020/11/04 HTML / CSS
全球性的在线购物网站:Zapals
2017/03/22 全球购物
Clearly澳大利亚:购买眼镜、太阳镜和隐形眼镜
2018/04/26 全球购物
后勤自我鉴定
2013/10/13 职场文书
建议书的格式及范文
2015/09/14 职场文书
大学学生会主席竞选稿怎么写?
2019/08/19 职场文书
JVM上高性能数据格式库包Apache Arrow入门和架构详解(Gkatziouras)
2021/05/26 Servers
Python接口自动化之文件上传/下载接口详解
2022/04/05 Python