JavaScript变量提升
JavaScript变量提升
在JavaScript
中变量声明与函数声明都会被提升到作用域顶部,优先级依次为: 函数声明 变量声明 变量赋值。
变量提升
var的变量提升
console.log(a); // undefined
var a = 1;
console.log(a); // 1
// console.log(b); // ReferenceError: b is not defined
为了显示a
与b
的区别,打印了一下未声明的变量b
,其抛出了一个ReferenceError
异常,而a
并未抛出异常,其实对a
的定义并赋值类似于以下的操作,将a
的声明提升到作用域最顶端,然后再执行赋值操作。
var a;
console.log(a); // undefined
a = 1;
console.log(a); // 1
let/const的变量提升
let
与const
都具有块级作用域,对于变量提升的相关问题的表现是相同的。实际上关于这个问题目前有所分歧,但在ES6
的文档中出现了var/let hoisting
字样,也就是说官方文档说明let
与var
一样,都存在变量提升,我觉得能够接受的说法是:
-
let
的「创建」过程被提升了,但是初始化没有提升。 -
var
的「创建」和「初始化」都被提升了。 -
function
的「创建」「初始化」和「赋值」都被提升了。
JS
中无论哪种形式声明var
、let
、const
、function
、function*
、class
都会存在提升现象,不同的是var
,function
,function*
的声明会在提升时进行初始化赋值为undefined
,因此访问这些变量的时候,不会报ReferenceError
异常,而使用let
,const
,class
声明的变量,被提升后不会被初始化,这些变量所处的状态被称为temporal dead zone
,此时如果访问这些变量会抛出ReferenceError
异常,看上去就像没被提升一样。关于这个问题的讨论,可以参考下边的链接,尤其是在stackoverflow
中的回答。
https://www.jianshu.com/p/0f49c88cf169
https://blog.bitsrc.io/hoisting-in-modern-javascript-let-const-and-var-b290405adfda
https://stackoverflow.com/questions/31219420/are-variables-declared-with-let-or-const-not-hoisted-in-es6
函数声明提升
函数声明会将声明与赋值都提前,也就是整个函数体都会被提升到作用域顶部。
s(); // 1
function s(){
console.log(1);
}
函数表达式只会提升变量的声明,本质上是变量提升并将一个匿名函数对象赋值给变量。
console.log(s); // undefined
var s = function s(){
console.log(1);
}
console.log(s); // f s(){console.log(1);}
由此来看,直接进行函数声明与函数表达式声明的函数之间就存在一个优先级关系。
var s = function(){
console.log(0);
}
function s(){
console.log(1);
}
s(); // 0
优先级
在JS
中函数是第一等公民,在《你不知道的JavaScript
》(上卷)一书的第40
页中写到,函数会首先被提升,然后才是变量。也就是说,同一作用域下提升,函数会在更前面。即在JS
引擎的执行的优先级是函数声明、变量声明、变量赋值。
function s(){ //函数声明
console.log(1);
}
var s; // 变量声明
// 函数已声明`a` 相同的变量名`var`声明会被直接忽略
console.log(s); // f s(){...}
s = function(){ // 变量赋值
console.log(0);
}
s(); // 0
每日一题
https://github.com/WindrunnerMax/EveryDay
参考
https://www.jianshu.com/p/0f49c88cf169
https://www.cnblogs.com/echolun/p/7612142.html
https://www.cnblogs.com/miacara94/p/9173843.html
https://blog.csdn.net/qq_41893551/article/details/83011752
https://blog.bitsrc.io/hoisting-in-modern-javascript-let-const-and-var-b290405adfda
https://stackoverflow.com/questions/31219420/are-variables-declared-with-let-or-const-not-hoisted-in-es6
- 编写兼容性JS代码
- msysGit管理GitHub代码
- 【web必知必会】—— DOM:四个常用的方法
- TortoiseSVN与VisualSVN Server搭建SVN版本控制系统
- 【SVN多用户开发】代码冲突&解决办法
- 【AngularJS】—— 13 服务Service
- 【AngularJS】—— 12 独立作用域
- 【AngularJS】—— 11 指令的交互
- 使用DOM动态创建标签
- Eclipse配置Tomcat,访问404错误
- 【AngularJS】—— 9 自定义过滤器
- 【AngularJS】—— 10 指令的复用
- 【AngularJS】—— 8 自定义指令
- 【AngularJS】—— 7 模块化
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- LeetCode70——爬楼梯
- 快速学习-Saturn创建Namespace
- 理解 Node.js 的 GC 机制
- LeetCode176——第二高的薪水
- 快速学习-Saturn QuickStart
- 快速学习-开发你的作业
- 理解Spring中的IoC和DI
- 快速学习-Saturn性能测试报告
- Java源码系列1——ArrayList
- 【Kubernetes】自定义资源CRDs不支持fieldselector
- Cypress系列(48)- and() 命令详解
- Java源码系列2——HashMap
- 快速学习-Saturn Console部署
- MySQL的各种日志
- 本地机器如何访问服务器上的docker容器内的tensorboard?