主要知识点有:var变量提升、let声明、const声明、let和const的比较、块级绑定的应用场景

1. var声明以及变量提升

变量提升:使用var声明变量,变量的创建并不在声明变量的地方,而是会在当前作用域的顶部。

如果声明在函数内,则变量的创建则会在函数作用域的顶部;如果声明不在函数内,则会提升到全局作用域的顶部。

示例

function getValue(condition){if(condition){var value = "yes";return value;}else{//value 在此处可访问,值为 undefinedreturn null;}//value 在此处可访问,值为 undefined
}
复制代码

等价于(var变量提升到当前函数作用域的顶部):

function getValue(condition){var value;if(condition){value = "yes";return value;}else{//value 在此处可访问,值为 undefinedreturn null;}//value 在此处可访问,值为 undefined
}
复制代码

由变量提升会带来循环变量过度共享的问题

2. let声明

与var声明变量语法一致,但是let声明变量不会变量提升,变量的作用域只会限制在当前代码块中。由于let变量并不会提升到代码块的顶部,因此,要想让整个代码块能给访问到let变量,需要将let声明指定到代码块的顶部。

示例

function getValue(condition){if(condition){let value = "yes";return value;}else{//value 在此处不可访问return null;}//value 在此处不可访问
}
复制代码

let变量禁止重复声明:如果一个标识符已经在代码块内部中被定义,那么使用let以同样的标识符声明变量则会报错

示例:
var count = 43;
let count; //重复声明,报错
复制代码

3. const声明

const声明基本变量

const声明:使用const声明一个常量,一旦设置之后就不能再被修改,否则会报错。也就是说,使用const声明变量后要立即初始化

const type;
type='TEST'; //Uncaught SyntaxError: Missing initializer in const declaration正确的为:
const type='TEST'
-----------------------------
const type='TEST'
type = 'DEBUG' //ObjectMethod.html:244 Uncaught TypeError: Assignment to constant variable.
复制代码

const声明对象

const只会阻止变量绑定以及变量的修改,但是不会阻止对象成员变量的修改。

const person = {name:'nancy'};
person.name= 'nike';
console.log(person.name); //nike
person = {}; //Uncaught TypeError: Assignment to constant variable.
复制代码

4. let与const的比较

相同点

  1. 不存在变量提升:let与const声明变量都不会存在变量提升,都只在块级作用域内,如果试图在代码块外访问let或者const变量都会报错;

  2. 禁止重复声明:如果在同一作用域内,禁止let或者const使用以被定义的标识符声明变量;

  3. 都具有暂时性死区(temporal dead zone,TDZ ):使用let或者const声明变量,如果在声明处之前访问变量会报错。在变量当前作用域的块内,变量声明处之前被称之为TDZ。

  4. 不会覆盖全局对象上的属性:let变量或者const变量会在全局作用域上创建新的变量,但是不会绑定到全局对象上(浏览器则是window对象),而var变量在全局作用域上会绑定到全局对象,也就是说,var全局变量可能会无意覆盖掉全局对象上的一些属性。

     var RegExp = 'hello';console.log(window.RegExp);      //helloconsole.log(window.RegExp===RegExp); //RegExp覆盖掉window对象中的RegExp属性-------------let RegExp = 'hello';console.log(window.RegExp);console.log(window.RegExp===RegExp); //falsefunction getValue(condition){if(condition){//value的TDZlet value = "yes";return value;}else{return value;}}
    复制代码

不同点

  1. const不能再赋值,let声明的变量可以重复赋值;

5. 块级绑定的使用场景

  1. 循环内的let声明

    在循环中使用var变量,由于var变量存在变量提升,每次迭代共享同一个var变量。

     for(var i = 0;i<5;i++){setTimeout(()=>{console.log(i); //输出5},1000);}console.log(i); //输出5
    复制代码

    解决方法:将var变量改为let变量

     //将var改成let之后for(let i = 0; i < 5; i++) {setTimeout(() => {console.log(i) // 0,1,2,3,4}, 0)}console.log(i)//Uncaught ReferenceError: i is not defined i无法污染外部函数
    复制代码

    let变量不会变量提升,let变量作用域不会逃离出for循环外,因此不会污染外部函数。而在for循环中也不会每次迭代都共享同一变量,而是会分别使用let变量副本。

  2. 循环内const声明

    在普通的for循环中使用const变量,由于const变量不可修改,因此会报错。而在for-in或者for-of循环中可以使用const变量。

     let arr = [1,2,3,4];for(const item of arr){console.log(item); //输出1,2,3,4}
    复制代码

6. 总结

  1. let和const变量都不会进行提升,并且只会在声明它们的代码块内部存在。由于变量能够在必要位置被准确声明,其表现更加接近其他语言;
  2. 块级绑定存在暂时性死区(TDZ ) ,试图在声明位置之前访问它就会导致错误;
  3. let 与 const 的表现在很多情况下都相似于 var ,然而在循环中就不是这样。在 for-in 与 for-of 循环中, let 与 const 都能在每一次迭代时创建一个新的绑定,这意味着在循环体内创建的函数可以使用当前迭代所绑定的循环变量值(而不是像使用 var 那样,共享同一变量值)。同时在基础的for循环中,使用const变量会出错。

最佳实践:在默认情况下使用 const ,而只在你知道变量值需要被更改的情况下才使用 let 。

深入理解ES6--1.块级绑定相关推荐

  1. ES6中块级作用域下的函数声明

    背景 因为ES5的时候没有块级作用域,所以ES5规定不能再if这样的块中声明函数,但是为了兼容各大浏览器并没有严格遵守这条规定. ES6的时候引入了块级作用域,规定在块级作用域中声明函数就相当于使用l ...

  2. [ES6] 细化ES6之 -- 块级作用域

    所谓的块级作用域,可能是一个{},一个代码块,一句话 let关键字 let 与 var 区别 区别 var let 变量提升 有 无 作用域 全局作用域.函数作用域 全局作用域.函数作用域和块级作用域 ...

  3. 《理解 ES6》阅读整理:块绑定(Block Binding)

    变量声明一直是JavaScript中一个需要技巧的部分.在大多数基于C的编程语言中,变量(更正式地说是绑定)在声明的时候创建,然而在JavaScript中并不是这样.在JavaScript中,变量在何 ...

  4. 搭建Babel运行环境,Traceur ES6模板,块级作用域,let和const命令

    搭建Babel运行环境 Babel(http://babeljs.io/)可用于将使用ES6语法的脚本转化为ES5语法的脚本,基本功能的安装步骤如下: 1.安装node解释器和npm包管理工具 2.安 ...

  5. c语言块级作用域_块级作用域问题ES5 ES6

    ES5: 1.  没有块级作用域 在其他类C语言中,由花括号封闭的代码块都有自己的作用域(如果用ECMAScript的话来说,就是它们自己的执行环境), 所以支持根据条件来定义变量. if(true) ...

  6. es6 ie不兼容 函数_ES6:什么是块级作用域?

    在 ES5 只有全局作用域和函数作用域,没有块级作用域,这带来很多不合理的场景. 我们先来看一下下面这种情况:内层变量可能会覆盖外层变量. var txt = '外层变量-->你好呀';func ...

  7. ES6 块级作用域详解

    什么是块级作用域 ES6 中新增了块级作用域.块作用域由 { } 包括,if 语句和 for 语句里面的 { } 也属于块作用域. 为什么需要块级作用域 第一种场景:内部变量会覆盖外部变量 var t ...

  8. java区块作用域_ES6-let、const和块级作用域

    1.介绍 总的来说,ES6是在ES2015的基础上改变了一些书写方式,开放了更多API,这样做的目的最终还是为了贴合实际开发的需要.如果说一门编程语言的诞生是天才的构思和实现,那它的发展无疑就是不断填 ...

  9. Understanding ES6 -- 深入理解ES6书籍

    understanding es6 -- Nicholas C. Zakas 块级绑定 function 拓展对象功能 解构 symbol Sets and Maps Iterators and Ge ...

最新文章

  1. python随机抽号_随手小代码——Python 从集合中随机抽取元素
  2. 发票管理软件_企业为什么需要ERP企业管理软件?
  3. [深度学习-优化]dropout防止过拟合的理解
  4. python scikit_如何将Scikit学习Python库用于数据科学项目
  5. 弹性地基梁板实用计算_桥梁工程基础处理、支架搭设、预压方案及计算书
  6. L1-028. 判断素数-PAT团体程序设计天梯赛GPLT
  7. 程序员应该具备哪些素质
  8. try anbox or waydroid (by quqi99)
  9. 插入u盘计算机未响应,U盘插入win7电脑没反应如何解决 Win7插入U盘没反应怎么办...
  10. 通过基因组选择预测杂交水稻的表现(数据挖掘)
  11. 火车头怎么采集头条规则写法
  12. ArchiCAD与Revit深度对比
  13. 数字孪生轨道交通:“智慧化”监控疏通城市运行痛点
  14. Python Scrapy使用实例讲解
  15. MSDN经典案例分析--PetShop
  16. ARM64内存虚拟化分析(7)stage2异常处理
  17. 复杂密码随机生成工具
  18. linux用用户默认密码是多少,useradd新建的用户默认密码是什么
  19. 我遗失了一本名叫《爱情》的书
  20. java项目中可以封装的组件_封装属于自己的组件库

热门文章

  1. asp.net web开发框架_百小僧:拥抱.NET 5,从这个极速开发Web应用框架开始,Fur开源了!...
  2. java数组创建后大小能改变吗,在Java中,数组创建成功以后,其大小(??? )(能/不能)改变...
  3. mysql脚本文件长什么样_在linux下执行mysql脚本文件,内容是创建一个FUNCTION,总是报错,请帮看下原因是什么?多谢...
  4. lock object oracle,oracle lock 08 - 关于锁的解决方案
  5. python读取json文件转化为list_Python从所有子目录读取JSON文件
  6. csrf攻击原理与解决方法_信息安全之CSRF攻击
  7. 软件工程专业学生如何在研二期间通过六级——我的六级之路
  8. 第14章:信息文档与配置管理和知识与流程管理
  9. lyGrid列表格式化日期
  10. 《系统集成项目管理工程师》必背100个知识点-07项目建议书的内容