JavaScript变量提升

JavaScript中变量声明与函数声明都会被提升到作用域顶部,优先级依次为: 函数声明 变量声明 变量赋值。

变量提升

var的变量提升

console.log(a); // undefined
var a = 1;
console.log(a); // 1
// console.log(b); // ReferenceError: b is not defined

为了显示ab的区别,打印了一下未声明的变量b,其抛出了一个ReferenceError异常,而a并未抛出异常,其实对a的定义并赋值类似于以下的操作,将a的声明提升到作用域最顶端,然后再执行赋值操作。

var a;
console.log(a); // undefined
a = 1;
console.log(a); // 1

let/const的变量提升

letconst都具有块级作用域,对于变量提升的相关问题的表现是相同的。实际上关于这个问题目前有所分歧,但在ES6的文档中出现了var/let hoisting字样,也就是说官方文档说明letvar一样,都存在变量提升,我觉得能够接受的说法是:

  • let的「创建」过程被提升了,但是初始化没有提升。
  • var的「创建」和「初始化」都被提升了。
  • function的「创建」「初始化」和「赋值」都被提升了。

JS中无论哪种形式声明varletconstfunctionfunction*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

JavaScript变量提升相关推荐

  1. JavaScript 变量提升

    JavaScript 变量提升 JavaScript 中,函数及变量的声明都将被提升到函数的最顶部. JavaScript 中,变量可以在使用后声明,也就是变量可以先使用再声明. 这几天在刷题的过程中 ...

  2. JavaScript变量提升机制

    JavaScript变量提升机制 Js代码执行前(栈内存)还做了一件事那就是变量提升,Js会在所有var function等关键字的提前声明或者定义.. 看以下的代码: console.log(a); ...

  3. php变量 声明提升,JavaScript 变量提升

    JavaScript 变量提升 JavaScript 中,函数及变量的声明都将被提升到函数的最顶部. JavaScript 中,变量可以在使用后声明,也就是变量可以先使用再声明. 以下两个实例将获得相 ...

  4. javascript变量提升/函数提升

    首先 javascript 是一种弱类型.动态的.解释型的脚本语言. 弱类型:类型检查不严格,偏向于容忍隐式类型转换. 强类型:类型检查严格,偏向于不容忍隐式类型转换. 动态类型:运行的时候执行类型检 ...

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

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

  6. Javascript变量提升与暂时性死区

    暂时性死区:在ES6之前,使用 typeof 运算符操作一个未声明的变量时,不会报错,该变量的值以 undefined 作处理.而在ES6之后,使用ES6的变量声明方法(let, const, cla ...

  7. javaScript变量提升以及函数提升

    变量的声明赋值 var a = 1; 上面的代码先声明变量 a,然后在变量 a 与数值 1 之间建立引用关系,称为将数值 1 "赋值"给变量 a.以后,引用变量名 a 就会得到数值 ...

  8. JavaScript 变量提升的作用

    文章目录 前言 预解析时期 正式执行时期 一.举例 1. 函数提升-求以下代码执行结果 2. 函数提升-求以下代码执行结果 3.函数提升-求以下代码的结果 4.变量提升-求以下代码的结果 5.clas ...

  9. JavaScript 变量提升(hoisting)

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

最新文章

  1. 应用热启动(Ctrl+Alt+Delete)在显示频中进行监控的应用
  2. student consulting system
  3. [云炬商业计划书阅读分享] 体育器材
  4. SqlHelper方法
  5. WebCrack:网站后台弱口令批量检测工具 ——yzddMr6
  6. win10远程桌面连接无法找到计算机,解决win10远程桌面无法连接操作教程
  7. 【翻译】200行代码讲透RUST FUTURES (7)
  8. 服务器vmware新建虚拟机教程,如何创建虚拟机教程全解
  9. 谢耳朵用的MIT人工智能情绪探测器,你也可以拥有
  10. C#下支付宝新版异步回调数据处理及校验(需支付宝提供的AopSdk)
  11. ACM-ICPC 2018 焦作赛区网络预赛 L Poor God Water(BM算法)
  12. MySQL5.7安装教程(workbench安装教程会在之后出)(32位和64位均可)
  13. 本地ASP.NET开发页面使用AzureAD(AAD)验证登录
  14. 认证学习4 - Bearer认证(Token认证)讲解、代码实现、演示
  15. The JAVA_HOME environment variable is not defined correctly This environment variable is needed to r
  16. surface pro java_微软新发布的Surface Pro与Surface Pro4有什么区别?值得你升级吗?
  17. 【调研】消费者调研与市场调研的区别
  18. thinkpad如何屏蔽bios更新 提示电池_华硕(圣骑)100系 200系 BIOS更新支持8代CPU软件刷新...
  19. 拿什么拯救你 我的“游戏寡妇”、“游戏孤儿”们
  20. 在投票系统方法的原则刷票(突破ip限制刷票PHP版)

热门文章

  1. python设计模式14-命令模式
  2. 学会用Go解析复杂JSON的思路
  3. JVM参数调优详细过程
  4. RocketMQ之事务消息
  5. 基于SVM的思想做CIFAR 10图像分类
  6. Java异常处理课后作业
  7. Symmetric Tree (101)
  8. php output_add_rewrite_var
  9. Android背景透明的 Dialog
  10. 数据库开发基本操作-配置SQL Server 2005 Express的身份验证方式,以及如何启用sa登录名...