资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/Javascript基础之-var，let和const深入解析（二）

Javascript基础之-var，let和const深入解析（二）

XiNGRZ / 1440人阅读

摘要：规范对其是这样进行的描述的。声明定义了在正在运行的执行上下文作用域内的变量环境中的变量。在执行时，由带有的定义的变量被赋其设定项的的值。由于变量已经被声明，是可访问的，因此会打印出正确的结果。

你想在在变量声明之前就使用变量？以后再也别这样做了。

新的声明方式（let，const）较之之前的声明方式（var），还有一个区别，就是新的方式不允许在变量声明之前就使用该变量，但是var是可以得。请看下面的代码，下面这个代码是可以正常运行的：

function func() {
  console.log(localVariable);   // undefined
  var localVariable = 5;

  console.log(localVariable);   // 5
}

func();

但是这种却不可以

function func() {
  console.log(localVariable); // ReferenceError: localVariable is not defined
  let localVariable = 10;

  console.log(localVariable); // 10
}

func();

等下，我们上一章曾经介绍了一个叫“提升”的概念，它会吧所有的变量定义在作用域的最前面。这是否意味着如果我不在实际的定义之前使用变量，然后就不会有提升了呢？答案是否定的。提升依然会有，并且适用于所有类型的变量类型。但是const和let却不是这样的。

首先，我们看一下var关键字是怎么工作的。规范对其是这样进行的描述的。

var声明定义了在正在运行的执行上下文（running execution
context）作用域内的变量环境（VariableEnvironment中）的变量。var变量在当包含的词法环境（Lexical
Environment）初始化时被创建，在创建的时候被赋值为undefined。[...]
在执行VariableDeclaration时，由带有Initializer的VariableDeclaration定义的变量被赋其设定项的Initializer"s
AssignmentExpression的值。

规范中有许多的细节，让我们简单的来看一下：

当你进入到一个作用域中，在内部被定义的所有的变量都会被创建。

所有存在的变量，都可以被访问，并且会把undefined赋值给该变量。

当代码（执行时）到达初始化时，会被分配给一个实际的值。

我们来看一下规范中对let和const的表述：

let和const声明是定义在当前执行上下文作用域中的词法环境中的变量。当包含的词法环境被初始化的时候，变量被创建。但是在变量的词法绑定时被计算之前是不允许通过任何方式来访问的。当词法绑定计算时而不是在变量被创建的时候，由词法绑定定义的变量的初始值被被赋予赋值表达式的值（也就是“=”右边的表达式）。当词法绑定被计算的时候，如果let声明中没有初始化的值的时候（也就是“let
a;”这样的形式），会被赋值为undefined。

简单来说：

如果你进入到了指定的作用域中，它里面定义的所有的变量都会被初始化，这一点和var很像。

这里有一个不同点：像var一样，所有的变量都会存在，但是他们目前还不能被访问（里面没有值，甚至是undefined）。

如果let变量在相同的地方被定义和初始化，他们会被赋予合适的值，反之，变量就是undefined。const变量必须在定义的时候初始化。

我们来看一些相关的例子。

临时死区

实际上，这种描述引出了我们的另一个定义。他很让人可怕，因为他叫：临时死区（TDZ）。这个属于明确了一个我们无法访问我们的变量的代码的区域。我们来看一下下面的代码和相关联的注释，来简单的解释一下TDZ是什么。

function func() {
  // Start of TDZ for deadVariable
  // we can still do something here, just our deadVariable is not available yet
  const exampleVariable = 5;
  console.log(exampleVariable); // 5
  // End of TDZ for deadVariable
  let deadVariable = 10;

  console.log(deadVariable);  // 10
}

func();

有一件事情值得去提醒。就是对于名字的建议，这是一个临时死区，意思这个区域是由时间定义的，而不是位置。因此当运行代码的时候，你的声明在被JS解析器解析之前是不能被访问的。因此你把使用的变量的位置放在哪里并不重要，只要是在声明执行后访问该变量就可以。所以看下面的代码：

function func() {
  return deadOrAlive;
}

let deadOrAlive = "alive!"
console.log(func());  // alive!

这是运行代码的步骤：

函数被声明

变量deadOrAlive被声明，并且初始化了一个值“alive”

现在我们调用我们的函数。

由于变量deadOrAlive已经被声明，是可访问的，因此会打印出正确的结果 “alive”。

但是下面的例子却会报错，思考一下原因。

function func() {
  return deadOrAlive;
}

console.log(func());  // ReferenceError: deadOrAlive is not defined
let deadOrAlive = "dead!"

所以TDZ是一个避免因先使用后声明而导致的一些诡异的bug而出现的一个很好机制（具体看“提升”相关内容）。我们不需要去额外做什么事情，就是记住永远不要在变量声明之前使用这个变量。即使我们这样做了，我们也会得到一个很好的报错信息。只有一个条件-你必须使用let或者是const来替换掉var。

双定义

var和let，const的另一个区别是 - 后者仅仅可以被定义一次。而对于var的话，如果被同时定义多次，程序也依然会很好的运行。

var doubledVariable = 5;
var doubledVariable = 6;

console.log(doubledVariable); // 6

但是现在，当你用let和const来做同样的事情，就会得到一个语法错误：

let doubledVariable = 5;
let doubledVariable = 6;  // SyntaxError: Identifier "doubledVariable" has already been declared

但是，在嵌套的块级作用域中，使用相同名字的变量依然会很好的工作的，这个我想大家已经清楚了，就不用过多解释了吧。

let doubledVariable = 5;

if (true) {
  let doubledVariable = 6;
  console.log(doubledVariable); // 6
}

console.log(doubledVariable); // 5

不能重复定义这个功能实际上是很有用的，可以组织很多bug的发生。比如说你曾经在一个函数内，在不同地方用var定义了多个相同名称的变量，此时之前定义的变量可能会被覆盖，这样对于代码来说无疑是一个隐患，也就是因为这样，这个特性实际上是一个简单的，开箱即用的解决方案。

总结

总结一下，在ES6中有两种新方法来声明变量：通过let和const关键字，除此之外，两者都是块级作用域，并且在声明之前不能访问该变量。与之前的var相比是一个主要的升级。并且会消除你很多的困扰。我提出了几个例子，可能会帮助你节省了不少调试的时间，但是还有更多。如果你感兴趣的话，可以在网上简单的搜索一下。很久之前，我个人曾建议停止使用var关键字，所以现在我的代码里充满了let和const。我建议你也是这样，在以后当你想改变变量的值，就使用let和const。不要再使用var了。

本文翻译自：

https://blog.pragmatists.com/...

本文转载自：http://www.lht.ren/article/16/

GPU云服务器 云服务器 深入理解webrtc之aec var预解析 javascript中var 深入理解java基础

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

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

相关文章

  • 【进阶1-4期】JavaScript深入之带你走进内存机制

    摘要：引擎对堆内存中的对象进行分代管理新生代存活周期较短的对象，如临时变量字符串等。内存泄漏对于持续运行的服务进程，必须及时释放不再用到的内存。 （关注福利，关注本公众号回复[资料]领取优质前端视频，包括Vue、React、Node源码和实战、面试指导） 本周正式开始前端进阶的第一期，本周的主题是调用堆栈，今天是第4天。 本计划一共28期，每期重点攻克一个面试重难点，如果你还不了解本进阶计划...

    不知名网友 评论0 收藏0

  • JavaScript 进阶之深入理解数据双向绑定

    摘要：当我们的视图和数据任何一方发生变化的时候，我们希望能够通知对方也更新，这就是所谓的数据双向绑定。返回值返回传入函数的对象，即第一个参数该方法重点是描述，对象里目前存在的属性描述符有两种主要形式数据描述符和存取描述符。 前言 谈起当前前端最热门的 js 框架，必少不了 Vue、React、Angular，对于大多数人来说，我们更多的是在使用框架，对于框架解决痛点背后使用的基本原理往往关注...

    sarva 评论0 收藏0

  • 【进阶1-1期】理解JavaScript 中的执行上下文和执行栈

    摘要：首次运行代码时，会创建一个全局执行上下文并到当前的执行栈中。执行上下文的创建执行上下文分两个阶段创建创建阶段执行阶段创建阶段确定的值，也被称为。 （关注福利，关注本公众号回复[资料]领取优质前端视频，包括Vue、React、Node源码和实战、面试指导） 本周正式开始前端进阶的第一期，本周的主题是调用堆栈，，今天是第一天 本计划一共28期，每期重点攻克一个面试重难点，如果你还不了解本进...

    import. 评论0 收藏0

  • 【进阶2-3期】JavaScript深入之闭包面试题解

    摘要：闭包面试题解由于作用域链机制的影响，闭包只能取得内部函数的最后一个值，这引起的一个副作用就是如果内部函数在一个循环中，那么变量的值始终为最后一个值。 （关注福利，关注本公众号回复[资料]领取优质前端视频，包括Vue、React、Node源码和实战、面试指导） 本周正式开始前端进阶的第二期，本周的主题是作用域闭包，今天是第8天。 本计划一共28期，每期重点攻克一个面试重难点，如果你还不了...

    alanoddsoff 评论0 收藏0

  • 深入了解babel（二）

    摘要：接着上一篇文章深入了解一的处理步骤的三个主要处理步骤分别是解析，转换，生成。模块是的代码生成器，它读取并将其转换为代码和源码映射抽象语法树抽象语法树在以上三个神器中都出现过，所以对于编译器来说至关重要。 接着上一篇文章《深入了解babel（一）》 Babel 的处理步骤 Babel 的三个主要处理步骤分别是： 解析（parse），转换（transform），生成（generate）。对...

    ChanceWong 评论0 收藏0

发表评论

登陆后可评论

0条评论

XiNGRZ

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<