首先我们应该知道js引擎在读取js代码时会进行两个步骤:

  • 第一个步骤是解释。
  • 第二个步骤是执行。

所谓解释就是会先通篇扫描所有的Js代码,然后把所有声明提升到顶端,第二步是执行,执行就是操作一类的。

我们先来看个简单的变量提升案例吧


a = 'javascript';
var a;
console.log(a);//'javascript'

console.log(b);//undefined
var b='javascript'

遇到 script 标签的话 js 就进行预解析,将变量 var 和 function 声明提升,但不会执行 function,然后就进入上下文执行,上下文执行还是执行预解析同样操作,直到没有 var 和 function,就开始执行上下文。如:


a=5;
show();
var a;
function show(){};

预解析:


function show(){};
var a;
a=5;
show();

需要注意都是函数声明提升直接把整个函数提到执行环境的最顶端。

那么let/const和var又有什么区别呢??

  • let/const是使用区块作用域;var是使用函数作用域。
  • 在let/const声明之前就访问对应的变量与常量,会抛出ReferenceError错误;但在var声明之前就访问对应的变量,则会得到undefined。

console.log(aVar) // undefined
console.log(aLet) // causes ReferenceError: aLet is not defined
var aVar = 1
let aLet = 2

会出现这样的情况是因为let/const拥有“暂时性死区(TDZ)”。

什么是暂时性死区?

当程序的控制流程在新的作用域(module, function或block作用域)进行实例化时,在此作用域中的用let/const声明的变量会先在作用域中被创建出来,但因此时还未进行词法绑定,也就是对声明语句进行求值运算,所以是不能被访问的,访问就会抛出错误。所以在这运行流程一进入作用域创建变量,到变量开始可被访问之间的一段时间,就称之为TDZ(暂时死区)。

结论:let/const声明的变量,的确也是有提升(hoist)的作用。这个是很容易被误解的地方,实际上以let/const声明的变量也是会有提升(hoist)的作用。提升是JS语言中对于变量声明的基本特性,只是因为TDZ的作用,并不会像使用var来声明变量,只是会得到undefined而已,现在则是会直接抛出ReferenceError错误,而且很明显的这是一个在运行期间才会出现的错误。

ES6 规定暂时性死区和let、const语句不出现变量提升,主要是为了减少运行时错误,防止在变量声明前就使用这个变量,从而导致意料之外的行为。这样的错误在 ES5 是很常见的,现在有了这种规定,避免此类错误就很容易啦~

原文地址:https://segmentfault.com/a/1190000017352156

深入理解let和var的区别的更多相关文章

  1. 详解变量声明加 var 和不加 var 的区别

    在全局作用域中声明变量加 var 关键字和不加 var ,js 引擎都会将这个变量声明为全局变量,在实际运行时,两种声明方式的变量的行为也是几乎一致的.但是在全局作用域下是否声明一个变量的 时候加va ...

  2. 前端面试题:JS中的let和var的区别

    最近很多前端的朋友去面试被问到let和var的区别,其实阮一峰老师的ES6中已经很详细介绍了let的用法和var的区别.我简单总结一下,以便各位以后面试中使用. ES6 新增了let命令,用来声明局部 ...

  3. es6入门1-- let与var的区别详解

    一.前言 说到做到,现在暂时放了放JS模式的读书笔记,打算好好看看ES6,毕竟出了这么久了,还是靠JS吃饭的,都不好好学JS新特性,确实说不过去,我本来是想当读书笔记去记录ES6,但是这个确实是属于边 ...

  4. 在Javascript中 声明时用"var"与不用"var"的区别,== 和 ===的区别

    今天,被问到两个JS问题,当时没回答到重点,问题虽然看起来简单,但是细节却马虎不得,在此做下记录: 1. 在Javascript中 声明时用"var"与不用"var&qu ...

  5. IL角度理解for 与foreach的区别——迭代器模式

    IL角度理解for 与foreach的区别--迭代器模式 目录 IL角度理解for 与foreach的区别--迭代器模式 1 最常用的设计模式 1.1 背景 1.2 摘要 2 遍历元素 3 删除元素 ...

  6. JavaScript中变量声明有var和没var的区别

    JavaScript中变量声明有var和没var的区别 JavaScript中有var和没var的区别 Js中的变量声明的作用域是以函数为单位,所以我们经常见到避免全局变量污染的方法是 (functi ...

  7. css基础--深入理解opacity和rgba的区别

    欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言 首先这两个都与透明度有关,那么他们之间有什么具体的区别呢?在实际工作中我们需要注意什么呢?请您接着往下看 语法 1. rg ...

  8. js中const,var,let区别(转载)

    js中const,var,let区别 来源:https://www.cnblogs.com/zzsdream/p/6372729.html 今天第一次遇到const定义的变量,查阅了相关资料整理了这篇 ...

  9. [js]js中变量带var和不带var的区别

    上图已说的很清晰了. 下面代码是赘述 <script> //带var和不带var的区别: // 1.只有带var的才可以预解释,所以在赋值的前操作不会报错. console.log(num ...

随机推荐

  1. 安装破解confluence6.7.1(插图丢了,一直懒得补)

      JIRA安装:https://www.cnblogs.com/wei9593/p/10194784.html 1环境: centos7.2 java-1.8https://www.cnblogs. ...

  2. [CSP-S模拟测试]:字符交换(贪心+模拟)

    题目传送门(内部题136) 输入格式 输入文件第一行为两个正整数$n,k$,第二行为一个长度为$n$的小写字母字符串$s$. 输出格式 输出一个整数,为对字符串$s$进行至多$k$次交换相邻字符的操作 ...

  3. 02.替换空格 (Java)

    题目描述 请实现一个函数,将一个字符串中的每个空格替换成“%20”.例如,当字符串为We Are Happy.则经过替换之后的字符串为We%20Are%20Happy. 思路 感觉这题对于Java意义 ...

  4. 网络1911、1912 C语言第2次作业--循环结构 批改总结

    一.评分规则 伪代码务必是文字+代码描述,直接反应代码,每题扣1分 提交列表没内容,或者太简单,每题得分0分.注意选择提交列表长的题目介绍. 代码格式不规范,继续扣分. 代码互评,内容简单,0分. 原 ...

  5. Linux高级调试与优化——Address Sanitizer

    Address Sanitizer ASAN最早可以追溯到 LLVM 的 sanitizers项目(https://github.com/google/sanitizers),这个项目包含了Addre ...

  6. PE盘制作

    我这里以大白菜为例来讲解这个一条龙的服务: 1.去大白菜官网下载一U盘制作工具: 2.准备一个4G以上的U盘(我这里建议16G比较好,这样制作完成之后,我们还可以拷贝几个常用的镜像进去,方便今后使用) ...

  7. 浏览器端-W3School-HTML:HTML DOM cells 集合

    ylbtech-浏览器端-W3School-HTML:HTML DOM cells 集合 1.返回顶部 1. HTML DOM cells 集合 HTML DOM Table 对象 定义和用法 cel ...

  8. Git - p4merge

    Windows 下配置 先确保 p4merge 的路径(默认:C:\Program Files\Perforce\)在环境变量中 C:\Users\zjffu>where p4merge C:\ ...

  9. 清除表单input输入框内数据

    清除表单input输入框内数据 1. $(':input','#addVoucherType') //'#addVoucherType'表单id .not(':button') .val('') .r ...

  10. Python学习笔记:使用request库遇到的问题

    一.在请求参数中包含中文时,需要进行编码,如果不进行编码会报错 报错信息: 如:请求参数为:{"username":"超级管理员"} 在使用xlrd模块进行操作 ...