深入理解let和var的区别（暂时性死区）！！！

tanglijun 发布于2019-08-23 14:01 / 3055人阅读

摘要：会出现这样的情况是因为拥有暂时性死区。规定暂时性死区和语句不出现变量提升，主要是为了减少运行时错误，防止在变量声明前就使用这个变量，从而导致意料之外的行为。

首先我们应该知道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 是很常见的，现在有了这种规定，避免此类错误就很容易啦~

专线服务服务器托管深入理解系列深入理解linux 深入理解webrtc 深入理解python

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99943.html

var和let/const的区别

showImg(https://segmentfault.com/img/remote/1460000017757580); let和const是 ES6 新增的命令，用于声明变量，这两个命令跟 ES5 的var有许多不同，并且let和const也有一些细微的不同，再认真阅读了阮一峰老师的文档后，发现还是有一些不知道的细节... 博客、前端积累文档、公众号、GitHub 内容： var和let...

SHERlocked93 2019-08-23 14:28 评论0 收藏0
深入理解ES6之《块级作用域绑定》

摘要：众所周知，中的声明存在变量提升机制，因此引用了块级作用域来强化对变量生命周期的控制声明不会被提升，有几个需要注意的点不能被重复声明假设作用域中已经存在某个标识符无论该标识符是通过声明还是变量声明，此时再使用或关键定声明会抛错此处则会抛出错误众所周知，js中的var声明存在变量提升机制，因此ESMAScript 6引用了块级作用域来强化对变量生命周期的控制let const 声明不会被...

Nosee 2019-08-21 12:02 评论0 收藏0
深入理解ES6之《块级作用域绑定》

摘要：众所周知，中的声明存在变量提升机制，因此引用了块级作用域来强化对变量生命周期的控制声明不会被提升，有几个需要注意的点不能被重复声明假设作用域中已经存在某个标识符无论该标识符是通过声明还是变量声明，此时再使用或关键定声明会抛错此处则会抛出错误众所周知，js中的var声明存在变量提升机制，因此ESMAScript 6引用了块级作用域来强化对变量生命周期的控制let const 声明不会被...

马忠志 2019-08-05 11:52 评论0 收藏0
分析 JavaScript 的数据类型与变量

摘要：基本数据类型在中，基本数据类型有种，即数值字符串布尔值。两个布尔值转为数值进行比较。对于对象和布尔值，调用它们的方法得到对应的字符串值，然后进行字符串相加。减法对于字符串布尔值或者，自动调用，转换结果若为，那么最终结果为。这篇文章，来聊聊 JS 中的数据类型与变量。这是在学习 JS 时最基础的一类问题，但却很重要。希望我的分享有帮助到你。文章开头，我先提几个面试中遇到的问题：比如...

Mike617 2019-08-23 13:13 评论0 收藏0
总结下var、let 和 const 的区别

摘要：前言和的区别是老生常谈，看到网上一些文章的总结，有的不太全面，甚至有的描述不太准确，在这里尽量全面的总结下这三者的区别。最后以上大概是总结后的内容，看来，还是多用吧。前言 var 和 let 的区别是老生常谈，看到网上一些文章的总结，有的不太全面，甚至有的描述不太准确，在这里尽量全面的总结下这三者的区别。 let 是 ES6新增的变量类型，用来代替 var 的一些缺陷，跟 var...

pingink 2019-08-26 12:20 评论0 收藏0