ES6 新特性

  • ES2015(ES6) 新增加了两个重要的 JavaScript 关键字: letconst
  • let 声明的变量只在 let 所在的代码块内有效。
  • const 声明一个只读的常量,一旦声明,常量的值就不能改变。并且,一旦声明必须初始化,否则会报错

letvar 的区别

  • var 声明的变量在全局范围内有效。
  • let 只能声明同名变量一次,var 可以声明多次
  • let 不存在变量提升,var 会变量提升

Hoisting(变量提升)

变量提升(Hoisting)被认为是, Javascript 中执行上下文 (特别是创建和执行阶段)工作方式的一种认识。在 ECMAScript® 2015 Language Specification 之前的 JavaScript 文档中找不到变量提升(Hoisting)这个词。不过,需要注意的是,开始时,这个概念可能比较难理解,甚至烦人。

例如,从概念的字面意义上说,变量提升 意味着变量和函数的声明会在物理层面移动到代码的最前面,但这么说并不准确。实际上变量和函数声明在代码里的位置是不会动的,而是在编译阶段被放入内存中时变动。

技术范例

JavaScript 在执行任何代码段之前,将函数声明放入内存中的优点之一是,你可以在声明一个函数之前使用该函数。例如:

catName("Chloe");function catName(name) {console.log("我的猫名叫 " + name);
}/*
代码执行的结果是: "我的猫名叫 Chloe"
*/

即使我们在定义这个函数之前调用它,函数仍然可以工作。这是因为在 JavaScript 中执行上下文的工作方式造成的。

变量提升也适用于其他数据类型和变量。变量可以在声明之前进行初始化和使用。但是如果没有初始化,就不能使用它们。

注: 函数和变量相比,会被优先提升。这意味着函数会被提升到更靠前的位置。

只有声明被提升

JavaScript 只会提升变量的声明,不会提升其初始化。如果一个变量先被使用再被声明和赋值的话,使用时的值是 undefined。参见例子:

console.log(num); // Returns undefined
var num;
num = 6;

如果你先赋值、再使用、最后声明该变量,使用时能获取到所赋的值:

num = 6;
console.log(num); // returns 6
var num;

再来看几个类似的例子:

// Example 1 - 变量 y 被提升了,但是它的初始化没有
var x = 1;                 // 声明 + 初始化 x
console.log(x + " " + y);  // 输出:'1 undefined'
var y = 2;                 // 声明 + 初始化 y// Example 2 - 先赋值后声明也能连名带值被提升
var num1 = 3;                   // Declare and initialize num1
num2 = 4;                       // Initialize num2
console.log(num1 + " " + num2); // 输出:'3 4'
var num2;                       // Declare num2 for hoisting// Example 3 - 同理
a = 'Cran';              // Initialize a
b = 'berry';             // Initialize b
console.log(a + " " + b); // 输出:'Cranberry'
var a, b;                // Declare both a & b for hoisting

参考:

  • 菜鸟教程:ES6 let 与 const
  • MDN Web Docs:变量提升

TypeScript(ES6)变量提升(Hoisting)相关推荐

  1. 一篇文章看懂变量提升(hoisting)

    文章转自:一篇文章看懂变量提升(hoisting) - 知乎 前沿 大家对变量提升(hoisting)一定不陌生了,这篇文章希望可以建立一个系统的规则,以后碰到变量提升,可以重新看这篇文章,根据文中的 ...

  2. js变量提升hoisting

    作用域(Scoping) 什么是作用域? 我对作用域的理解是只会对某个范围产生作用,而不会对外产生影响的封闭空间.在这样的一些空间里,外部不能访问内部变量,但内部可以访问外部变量. c语言的变量分为全 ...

  3. js变量提升_学习笔记:JS中的作用域和预解析

    知识总结:谢静贤.汤昊 在javascript中作用域是非常重要的,本文将会说明作用域以及我们在工作,以及面试中的一些面试题,如果有不足的地方希望大家可以评论指出来,自己一定会及时的改正错误,避免大家 ...

  4. JavaScript变量提升(Hoisting)详解

    文章出自个人博客https://knightyun.github.io/2019/09/02/js-hoisting,转载请申明. 概念 变量提升是 JavaScript 的一种执行机制,大致就是字面 ...

  5. es6 Class 不存在变量提升

    Class 不存在变量提升 类不存在变量提升(hoist),这一点与 ES5 完全不同. new Foo(); // ReferenceError class Foo {} 上面代码中,ES6 Foo ...

  6. 【ES6】let、const变量提升的验证,以及TDZ死区的理解

    前段时间在网上自学ES6,了解到ES6新增的let和const是存在变量提升的,但是由于TDZ(暂时性死区)的存在,在定义前访问会出现错误. 今天在腾讯课堂听老师讲ES6,多次强调let和const没 ...

  7. 浅聊JavaScript中的Hoisting(变量提升)

    一直有写博客的想法但因为懒惰等各种情况没有付出实际行动,择日不如撞日,那就今天让我给大家简单归纳总结一下JavaScript中的Hoisting(变量提升)吧! 1.对于变量 //variablesc ...

  8. JavaScript 中的 Hoisting (变量提升和函数声明提升)

    如何将 函数声明 / 变量 "移动" 到作用域的顶部. 术语 Hoisting(提升) 在很多 JavaScript 博文中被用来解释标识符的解析.其实 Hoisting(提升) ...

  9. JavaScript 变量提升(hoisting)

    借鉴了一下菜鸟教程官网的解说. JavaScript 中,(1)函数及变量的声明都将被提升到函数的最顶部:(2)变量可以在使用后再进行声明. 变量提升:解释器总是会悄悄地把函数声明和变量声明" ...

最新文章

  1. 【Android 高性能音频】Oboe 开发流程 ( 包含头 Oboe 头文件 | 创建音频流 | 设置音频流 | 音频流回调类 AudioStreamCallback )
  2. Android Realm相关操作
  3. Ajax联动下拉框的实现例子
  4. 有赞基于ES的搜索系统架构是如何演进的?
  5. Android系统性能优化(71)---关于Bitmap图片资源优化的小事
  6. Selenium API-WebElement 属性
  7. 某大型银行深化系统技术方案之八:核心层之异步流程控制机制
  8. python open函数encoding_关于python内open函数encoding编码问题
  9. Drools7 Hello Wrold 入门详细步骤--系列01课
  10. md5的特点以及加密原理
  11. win7下php 5.6连接mongodb扩展
  12. NBA篮球经典动画gif系列连载之三
  13. 人脸识别行业应用状况及发展前景模式分析报告
  14. android AlarmManager详解,Alarm的设定和取消。
  15. VUE卖座网项目中数据获取的等待页面处理
  16. html代码演讲,index.html
  17. 这样设置,让你的 iPhone 用起来更加得心应手
  18. addClass和removeClass的用法
  19. Android 8.0 系统中添加护眼模式
  20. win下Python3.7+pip+Ipython安装

热门文章

  1. WEB前端课程设计——田径队管理系统
  2. redisObject详解
  3. Linux| |网络层以及数据链路层详解(不点进来会后悔的那种详解哦!)
  4. 数学,究竟美在哪里?
  5. Linux 高可用(HA)集群之DRBD详解
  6. Git冲突:Please commit your changes or stash them before you merge
  7. Akka 入门 实战
  8. robotframework API 源码阅读笔记----robot.utils.asserts
  9. 7大热门领域,天天高收益,入门自媒体必看
  10. python3输出不换行_python3不换行输出