TypeScript(ES6)变量提升(Hoisting)
ES6 新特性
- ES2015(ES6) 新增加了两个重要的 JavaScript 关键字:
let
和const
。 let
声明的变量只在let
所在的代码块内有效。const
声明一个只读的常量,一旦声明,常量的值就不能改变。并且,一旦声明必须初始化,否则会报错
let
和 var
的区别
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)相关推荐
- 一篇文章看懂变量提升(hoisting)
文章转自:一篇文章看懂变量提升(hoisting) - 知乎 前沿 大家对变量提升(hoisting)一定不陌生了,这篇文章希望可以建立一个系统的规则,以后碰到变量提升,可以重新看这篇文章,根据文中的 ...
- js变量提升hoisting
作用域(Scoping) 什么是作用域? 我对作用域的理解是只会对某个范围产生作用,而不会对外产生影响的封闭空间.在这样的一些空间里,外部不能访问内部变量,但内部可以访问外部变量. c语言的变量分为全 ...
- js变量提升_学习笔记:JS中的作用域和预解析
知识总结:谢静贤.汤昊 在javascript中作用域是非常重要的,本文将会说明作用域以及我们在工作,以及面试中的一些面试题,如果有不足的地方希望大家可以评论指出来,自己一定会及时的改正错误,避免大家 ...
- JavaScript变量提升(Hoisting)详解
文章出自个人博客https://knightyun.github.io/2019/09/02/js-hoisting,转载请申明. 概念 变量提升是 JavaScript 的一种执行机制,大致就是字面 ...
- es6 Class 不存在变量提升
Class 不存在变量提升 类不存在变量提升(hoist),这一点与 ES5 完全不同. new Foo(); // ReferenceError class Foo {} 上面代码中,ES6 Foo ...
- 【ES6】let、const变量提升的验证,以及TDZ死区的理解
前段时间在网上自学ES6,了解到ES6新增的let和const是存在变量提升的,但是由于TDZ(暂时性死区)的存在,在定义前访问会出现错误. 今天在腾讯课堂听老师讲ES6,多次强调let和const没 ...
- 浅聊JavaScript中的Hoisting(变量提升)
一直有写博客的想法但因为懒惰等各种情况没有付出实际行动,择日不如撞日,那就今天让我给大家简单归纳总结一下JavaScript中的Hoisting(变量提升)吧! 1.对于变量 //variablesc ...
- JavaScript 中的 Hoisting (变量提升和函数声明提升)
如何将 函数声明 / 变量 "移动" 到作用域的顶部. 术语 Hoisting(提升) 在很多 JavaScript 博文中被用来解释标识符的解析.其实 Hoisting(提升) ...
- JavaScript 变量提升(hoisting)
借鉴了一下菜鸟教程官网的解说. JavaScript 中,(1)函数及变量的声明都将被提升到函数的最顶部:(2)变量可以在使用后再进行声明. 变量提升:解释器总是会悄悄地把函数声明和变量声明" ...
最新文章
- 【Android 高性能音频】Oboe 开发流程 ( 包含头 Oboe 头文件 | 创建音频流 | 设置音频流 | 音频流回调类 AudioStreamCallback )
- Android Realm相关操作
- Ajax联动下拉框的实现例子
- 有赞基于ES的搜索系统架构是如何演进的?
- Android系统性能优化(71)---关于Bitmap图片资源优化的小事
- Selenium API-WebElement 属性
- 某大型银行深化系统技术方案之八:核心层之异步流程控制机制
- python open函数encoding_关于python内open函数encoding编码问题
- Drools7 Hello Wrold 入门详细步骤--系列01课
- md5的特点以及加密原理
- win7下php 5.6连接mongodb扩展
- NBA篮球经典动画gif系列连载之三
- 人脸识别行业应用状况及发展前景模式分析报告
- android AlarmManager详解,Alarm的设定和取消。
- VUE卖座网项目中数据获取的等待页面处理
- html代码演讲,index.html
- 这样设置,让你的 iPhone 用起来更加得心应手
- addClass和removeClass的用法
- Android 8.0 系统中添加护眼模式
- win下Python3.7+pip+Ipython安装
热门文章
- WEB前端课程设计——田径队管理系统
- redisObject详解
- Linux| |网络层以及数据链路层详解(不点进来会后悔的那种详解哦!)
- 数学,究竟美在哪里?
- Linux 高可用(HA)集群之DRBD详解
- Git冲突:Please commit your changes or stash them before you merge
- Akka 入门 实战
- robotframework API 源码阅读笔记----robot.utils.asserts
- 7大热门领域,天天高收益,入门自媒体必看
- python3输出不换行_python3不换行输出