JavaScript 中的提升详解与疑惑

最新推荐文章于 2024-07-07 16:54:11 发布
最新推荐文章于 2024-07-07 16:54:11 发布
阅读量161 收藏
点赞数
分类专栏： 咖啡之踵 文章标签： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jpch89/article/details/101759200
版权

JavaScript 中的提升 Hoisting

文章目录

1. 声明、赋值与提升的概念

1.1 声明 declaration

在不考虑 ES6 的情况下，声明有以下两种：

  • 变量声明
    var a
  • 函数声明
    function f() {}

注意
函数声明使用 function 关键字，是一个整体，它包含了函数名、参数以及函数体，不能拆解成声明变量随后把一个函数赋值给该变量这两个步骤。

  • 代码段一
// 使用 function 声明函数 f
function f() {
    console.log('hello')
}
  • 代码段二
// 1. 声明变量 f
var f
// 2. 把一个函数赋值给变量 f
f = function() {
    console.log('hello')
}

上述两段代码虽然在调用时表现一致，但是在考虑提升问题时，是不等价的！其中代码段二实际上是函数表达式的拆解形式，也就是说，函数声明不会被引擎拆解执行，而函数表达式会被引擎拆解成两步执行，详见下节。

1.2 赋值 assignment

声明和赋值虽然往往写在一条语句中，但是我们需要对它们区分对待。具体来讲，引擎把声明放到编译阶段提前执行，把赋值操作留在原地放到执行阶段执行。此处也考虑两种情况：

  • 一般变量的声明与赋值
  • 函数表达式的声明与赋值
1.2.1 一般变量的声明与赋值

比如说有如下语句：

  • var a = 666

这看起来是一条语句，实际上引擎会把它拆解成声明与赋值两个步骤：

  • 声明：var a
    这一步引擎会放到编译阶段 compilation phase 提前执行。
  • 赋值：a = 666
    这一步会被引擎留在原地，在执行阶段 execution phase 执行。
1.2.2 函数表达式的声明与赋值

类似地，对于函数表达式 var f = function() {}，也会被引擎拆解成声明与赋值两个步骤执行：

  • 声明：var f
    在编译阶段提前执行
  • 赋值：f = function() {}
    留在原地，在执行阶段执行

可以看出，函数表达式的声明与赋值过程与一般变量极为相似。

1.3 提升 hoisting

现在我们能够区分声明和赋值，并且知道它们被引擎放置于不同的阶段执行，那什么是提升呢？

引擎把声明与赋值或其他可执行逻辑分开，其中声明会在编译阶段提前执行，而赋值或其他可执行逻辑会被留在原地，放到执行阶段执行。引擎的这一行为在我们看起来就好像发生了提升。

提升 Hoisting：变量和函数声明从原始位置移动到所在作用域的最上面，而赋值或其他可执行逻辑则留在原地。

1.4 常见误区

提升实际上是一种“看起来”的效果，并不意味着声明部分的代码真的发生了移动。
这里引用 MDN 的原文：

https://developer.mozilla.org/en-US/docs/Glossary/Hoisting
the variable and function declarations are put into memory during the compile phase, but stay exactly where you typed them in your code.

也就是说变量和函数的声明只是在编译阶段被放到了内存里，这些代码仍然位于原来的位置，并没有发生移动，提升只是一种便于我们理解引擎处理思路的等效方法。

2. 提升详解

2.1 提升的分类及其等价形式

提升可以分为两种

  • 变量或函数表达式的提升

如 1.2.2 节所述，函数表达式的声明与赋值过程与一般变量极为相似，所以函数表达式的提升也和变量的提升类似。

  • 函数的提升

这里的函数不包括函数表达式。

2.1.1 变量或函数表达式的提升

变量的提升

var a = 666

等价形式：

var a

a = 666

注：为了体现编译阶段和执行阶段，本来应该放在一段里的代码被我分成了两段，后文不再赘述。

函数表达式的提升

var f = function() {
    console.log('hello')
}

等价形式：

var f

f = function() {
    console.log('hello')
}
2.1.2 函数的提升
function f() {
    console.log('hello')
}

等价形式：

// 编译阶段
function f() {
    console.log('hello')
}

// 运行阶段

由此可见，函数的提升不会拆成类似函数表达式的样子，先声明一个变量，再为该变量赋值一个函数。

2.2 提升举例

2.2.1 变量提升

考虑如下代码：

console.log(a)
var a = 666
// undefined

本文所有执行结果都是 Node.js 得出的运行结果，一些显示会和浏览器中的有所不同，但不影响什么。

这里之所以输出 undefined 而不是报错 ReferenceError，是因为 var a 被引擎放到了编译阶段执行，也就是发生了变量的提升。它相当于下面的代码。

var a

console.log(a)
a = 666
// undefined
2.2.2 函数表达式提升

考虑下面的代码：

f()  // TypeError

var f = function() {
	console.log(666)
}

上面代码会报错是因为函数表达式类似一般变量，引擎会将其拆解为声明和赋值两个步骤，声明会提前在编译阶段执行，而赋值会被留在原地，放到执行阶段执行。

注意：报的错是 TypeError 类型错误，而不是 ReferenceError 引用错误，是因为在编译阶段 f 已经被 var f 声明为一个变量，所以引擎是可以找到 f 这个名字的，不会报 ReferenceError。但是执行 f() 时 f 的值仍然是 undefined，相当于执行了 undefined()，所以会报 TypeError。

上述代码经过提升等价于：

var f  // 函数表达式提升

f()  // TypeError
f = function() {
    consoel.log(666)
}

对于具名的函数表达式，它的名称标识符在赋值之前也无法在所在作用域中使用：

foo(); // TypeError
bar(); // ReferenceError

var foo = function bar() {
    // ...
};

上述代码相当于下面的形式：

var foo;

foo(); // TypeError
bar(); // ReferenceError

foo = function() {
    var bar = ...self...
    // ...
}
2.2.3 函数提升

考虑以下代码：

f()  // hello

function f() {
    console.log('hello')
}

上述代码经过提升等价于：

function f() {
    console.log('hello')
}

f()  // hello

由于函数提升的存在，先调用函数再定义函数也不会报错，在有些编程语言中这样是不可以的。

2.3 重复声明会被引擎忽略

考虑下面的代码：

var a = 666
var a
console.log(a)
// 666

按照提升理论，上述代码应该与下面的代码等价：

var a  // var a = 666 拆解出来的声明步骤
var a  // 重复声明会被引擎忽略

a = 666
console.log(a)
// 666

可见重复声明并没有让变量 a 重新初始化为 undefined，而是会被忽略。

只要 var name 后面的 name 是已经存在的，不管它是变量还是函数，引擎都会忽略对它的重复声明。

请记住重复声明会被引擎忽略这一点，在下一节马上会用到。

2.4 同名函数和变量或函数表达式的提升

结论：如果出现同名函数和变量（或函数表达式），函数会首先被提升，其次才是变量（或函数表达式）。

2.4.1 同名函数和变量

考虑如下代码：

function f() {}
var f
console.log(f)
// [Function: f]

经过提升等价于：

function f() {}
var f  // 对已有名字 f 的重复声明，被引擎忽略

console.log(f)
// [Function: f]

尝试调换一下顺序：

var f
function f() {}
console.log(f)
// [Function: f]

结果还是 [Function: f]，原因如下：

function f() {}  // 函数声明首先被提升
var f  // 重复声明被忽略

console.log(f)
// [Function: f]
2.4.2 同名函数和函数表达式

函数表达式的情况与一般变量声明赋值类似。
考虑以下代码：

function f() {
    console.log(1)
}
var f = function() {
    console.log(2)
}
f()
// 2

经过提升等价于：

function f() {  // 函数声明首先被提升
    console.log(1)
}
var f  // 重复声明被忽略

f = function() {
    console.log(2)
}
f()
// 2

尝试调换一下函数表达式和函数声明的位置：

var f = function() {
    console.log(2)
}
function f() {
    console.log(1)
}
f()
// 2

经过提升等价于：

function f() {  // 函数声明被首先提升
    console.log(1)
}
var f  // 重复声明被忽略

f = function() {
    console.log(2)
}
f()
// 2

在前面也加一次函数调用，看看什么情况：

f()  // 1
function f() {
    console.log(1)
}
var f = function() {
    console.log(2)
}
f()  // 2

经过提升等价于：

function f() {  // 函数声明被首先提升
    console.log(1)
}
var f  // 重复声明被忽略

f()  // 1
f = function() {
    console.log(2)
}
f() // 2

调换一下顺序，看看有没有变化：

f()  // 1
var f = function() {
    console.log(2)
}
function f() {
    console.log(1)
}
f()  // 2

输出没有变化，上述代码经过提升等价于：

function f() {  // 函数声明首先被提升
    console.log(1)
}
var f  // 重复声明被忽略

f()  // 1
f = function() {
    console.log(2)
}
f()  // 2
2.4.3 同名函数、变量、函数表达式

如果出现同名函数、变量、函数表达式，首先被提升的仍然是变量声明，其次按照顺序提升变量和函数表达式的声明，当然重复声明还是会被忽略，但是位于后面的声明和赋值会覆盖位于前面的声明和赋值。

f()  // 4

function f() {
	console.log(1)
}

var f = function() {
	console.log(2)
}

var f = 3

function f() {
	console.log(4)
}

f()  // TypeError

上述代码经过提升等价于：

function f() {  // 函数声明首先被提升
    console.log(1)
}
function f() {  // 位于后面的声明会覆盖前面的
    console.log(4)
}
var f  // 来自函数表达式的重复声明被忽略
var f  // 来自变量的重复声明被忽略

f()  // 4
f = function() {
    console.log(2)
}
f = 3  // 这里 f 被赋值成一个数字
f()  // TypeError

2.5 提升发生在当前作用域

这个问题比较坑，我也没有得到确切的结论，这里记录一下暂时的观点。

  • 在某些浏览器中，提升会忽略块级作用域，发生在当前函数作用域。这也是《你不知道的JavaScript》中的说法，同时该书也提到不要过于依赖这一特性，因为随时可能改变。
  • 在另外一些浏览器中，提升的工作流程不是很清楚。可以肯定的是，如果在当前块作用域以外、提升之前的位置使用变量名或函数名，不会报 ReferenceError 的错误，因为该变量名或函数名的值已经被初始化为 undefined。
  • 可以看看《你不知道的JavaScript》的 GitHub 仓库上的 issue，仍然是未解决的状态。

考虑下面的代码：

f() 

if (true) {
  function f() {
    console.log('hello')
  }
} else {
  function f() {
    console.log('world')
  }
}

在某些浏览器中（具体是哪些我也不知道），提升后等价于：

function f() {
    console.log('hello')
}
function f() {
    console.log('world')
}

f()  // world
if (true) {

} else {

}

所以输出 world。

对于另外一些浏览器，比如我在用的 Firefox Quantum 69.0.1 和 Chrome 76.0.3809.132 都会报 TypeError 错误，注意并不是 ReferenceError，因为 f 在一开始是 undefined，这就很奇怪了。

更让我难以理解的是下面这段代码：

console.log(a) // undefined
{
  console.log(a)  // function a()
  function a() {}
  a = 50
  console.log(a) // 50
}
console.log(a) // function a()

console.log(b) // undefined
{
  console.log(b)  // function b()
  b = 50
  function b() {}
  console.log(b) // 50
}
console.log(b) // 50

另外如果把 a = 50 和 b = 50 前面加上 var，居然会报错 SyntaxError: Identifier has already been declared，这完全颠覆了我的认知。
如果有朋友知道怎么回事，务必告诉我，谢谢！

2.6 不声明直接赋值不会提升

没有声明就直接给一个变量赋值，该语句不会被提升，会被引擎留在原地。

2.6.1 不声明直接赋值一个变量
console.log(a)  // ReferenceError: a is not defined
a = 666

报错 ReferenceError，可见并没有把 a = 666 提升，也没有隐式地提升 var a。

2.6.2 不声明直接赋值一个函数
console.log(f)  // ReferenceError: f is not defined
f = function() {
    console.log('hello')
}

报错 ReferenceError，可见并没有把 f 函数的声明提升。

2.7 位于 return 后面的提升

在 return 后面的语句不会执行，但是如果有变量声明和函数声明时，会把声明部分提升，赋值和其余可执行逻辑留在原地，不会执行。

2.7.1 位于 return 后面的变量声明提升

考虑以下代码：

var num = 2

function f() {
    num = 1
    console.log(num) // 1
    return
    var num = 3
}

f()
console.log(num) // 2

等价于：

var num
num = 2

function f() {
    var num  // var num = 3 的声明部分被提升
    num = 1  // 这里的 num 修改的是局部变量
    console.log(num)  // 1
    return
    num = 3
}

f()
console.log(num)  // 2
2.7.2 位于 return 后面的函数声明提升

考虑下面代码：

var a = 1
function b() {
    a = 10
    return
    function a(){
        console.log(a)
    }
}
b()
console.log(a)  // 1

经过提升等价于：

var a = 1
function b() {
    a = 10
    return
    function a(){
        console.log(a)
    }
}
b()
console.log(a)  // 1

var a
function b() {
    function a() {  // 函数声明被提升至当前作用域
        console.log(a)
    }
    a = 10  // 用 10 覆盖了局部作用域的 a
    return
}

a = 1
b()
console.log(a)  // 打印全局作用域的 a

3. 参考资料

团子大圆帅
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript 函数详解
小王的技术库
05-29 925
前言：JavaScript 中的函数是什么 一般来说，一个函数是可以通过外部代码调用的一个“子程序”。像程序本身一样，一个函数由称为函数体的一系列语句组成。值可以传递给一个函数，函数将返回一个值。 但在 JavaScript 中比较特殊的是，函数实际上也是一个对象。每个函数都是Function 类型的实例，所以和其他对象一样具有属性和方法，区别在于函数可以被调用。 一、函数定义 定义函数有多种方法，主要分为函数声明和函数表达式。 1.1 函数声明 function Identifier 
JavaScript为什么是单线程-JS异步与回调详解
BY彡阿长
08-10 756
JavaScript为什么是单线程 JavaScript 最初被设计为浏览器脚本语言，主要用途包括对页面的操作、与浏览器的交互、与用户的交互、页面逻辑处理等。如果将 JavaScript 设计为多线程，那当多个线程同时对同一个 DOM 节点进行操作时，线程间的同步问题会变得很复杂。 同步任务与异步任务 同步任务：在主线程上排队执行的任务，前一个任务完整地执行完成后，后一个任务才会被执行。 异步任务：不会阻塞主线程，在其任务执行完成之后，会再根据一定的规则去执行相关的回调。 同步任务与函数调用栈
聊聊js中的提升
tanzhenyan的博客
09-21 866
说明：js中函数声明和变量声明都会被提升很多人直觉上认为， JavaScript 代码在执行时是由上到下一行一行执行的。但实际上并不是这样：1.js变量提升a = 3; var a; console.log( a );//3很多人认为会输出undefined ，因为 var a 声明在 a = 3之后，他们自然而然地认为变量被重新赋值了，因此会被赋予默认值 undefined 。但是，真正的输出结果
关于JS中变量提升的详解
2301_79624037的博客
07-07 231
其中所谓的变量提升，其实就是指在JavaScript解析时，会先找到代码中的所有变量声明，然后将其放到其作用域的头部，但请注意！变量提升只提升其中的变量声明，不提升其赋值操作。对你日常编写代码造成很大的困扰：为什么函数在未被构建前就调用代码还可以正常执行？怀着对知识的敬佩和拓展，在简单学习了这方面的知识后，我觉得比较重要，这涉及了。在ES6之前，let和const未问鼎的时候，绝大部分变量声明都是使用。如果还有疑惑，请在评论区留言。在实际的代码编写中，你或许对这些内容没有认识，因为缺乏这些知识。
JavaScript变量提升原理详解和实例
IT_10的博客
07-04 1123
函数作用域 在C语言中，定义一个变量的作用域仅属于这个花括号内，即该变量在夸括号外是不可见的，我们称之为块级作用域。而JavaScript中没用“块级作用域”，而是“函数作用域”。顾名思义，以此类推：变量在声明他们的函数体内以及这个函数体嵌套的函数体内都是有定义的。 实例： function test(obj) //obj表示一个对象 { var i=obj; //i在整个函...
JavaScript 基础（超详细）
热门推荐
TKOP_的博客
03-02 1万+
这篇笔记大概囊括了 JavaScript 基础的所有知识点。适合 js 初学者去查看特定知识点或者已经自学完 js 的伙伴去完成查漏补缺的过程。知识点的梳理参照了《JavaScript 高级程序设计》的内容，所以这算是一篇读书笔记。知识点的具体介绍主要有书中重要讲述、代码示例、思维图表、重难点解析、个人思考总结和他人的启发。虽不敢说这是最详细的笔记，但对于每个知识我都会尽力将自己的所思所想清楚地记录下来并分享。
JavaScript变量声明提升
weixin_30532837的博客
12-20 43
JavaScript代码在被解析引擎执行前，会被“编译”把变量声明等放在合适的作用域中，如果不了解这一点，会让人产生很多疑惑。 文章：详解js变量声明提升 转载于:https://www.cnblogs.com/Tpf386/p/8074014.html...
Javascript中的预编译
weixin_45727472的博客
04-12 91
一、前言 写这个的目的是笔者对于js变量提升一直心存疑惑，原谅我这么菜hhhhh 二、预编译在什么时候发生 预编译分为全局预编译和函数预编译：全局预编译发生在页面加载完成时执行，而函数预编译发生在函数执行的前一刻。 三、全局预编译的步骤 创建GO（Global Object，全局执行期上下文，在浏览器中为window）对象； 寻找var变量声明，并赋值为undefined； 寻找function函数声明，并赋值为函数体； 执行代码。 一个小案例 我们先来看一下下面这段代码： var x = 1,
JavaScript专项练习（二）
kiku
10-10 2865
1、以下代码执行后，控制台的输出是： var a = 10; function a(){} console.log(typeof a) 答案："number"，解析： 函数提升优先级高于变量提升，所以代码等价于 function a(){} var a； a = 10; console.log(typeof a) 那如果这里使用关键词let呢，代码变为 let a = 10 function a () {} console.log(typeof a) 这里明显会报错。前面提到，函数声明会优先于变量声明
JavaScript提升机制Hoisting详解
12-13
刚接触到JavaScript的时候，便知道JavaScript是按顺序执行的，是如浏览器的解析DOM树一样的流程，解析DOM结构的时候，如果遇到JS脚本或者外联脚本便会停止解析，继续下载脚本之后，执行脚本，然后再解析DOM。...
PetShop 4.0官方详解
04-23
对于希望提升.NET开发技能，尤其是对于分层架构有疑惑的开发者来说，这份文档无疑是宝贵的资源。通过学习和实践PetShop 4.0，你可以更好地掌握软件设计的原则，为未来的项目开发打下坚实的基础。
bbs-game:Synchronet BBS 的 CLI JS 游戏
06-21
《Synchronet BBS 的 CLI JS 游戏详解与JavaScript技术探析》 Synchronet BBS（Bulletin Board System）是一款流行的多用户终端系统，它允许用户通过命令行界面（CLI）进行通信、游戏和文件共享。在这个环境中，...
tidels:Tidels教育网站
05-04
**JavaScript技术详解** 作为Tidels教育网站上的一个重要标签，JavaScript是一种广泛使用的脚本语言，主要用于网页和网络应用的开发。JavaScript的主要功能包括： 1. **动态网页交互**：JavaScript能够实时更新...
前端开发的流程与规范.docx
09-27
#### 三、疑惑与讨论 针对上述流程，存在一些常见的疑问和讨论点： 1. **前后环节影响**：无论是传统方式还是LSM方式，各个环节都会受到上游产出物的影响。关键在于保证各环节产出物的稳定性，避免不必要的返工。 ...
简历-求职简历-word-文件-简历模版免费分享-应届生-高颜值简历模版-个人简历模版-简约大气-大学生在校生-求职-实习
08-25
简历-求职简历-word-文件-简历模版免费分享-应届生-高颜值简历模版-个人简历模版-简约大气-大学生在校生-求职-实习 简历是展示个人经历、技能和能力的重要文档，以下是一个常见的简历格式和内容模板，供您参考： 简历格式： 头部信息：包括姓名、联系方式（电话号码、电子邮件等）、地址等个人基本信息。 求职目标（可选）：简短描述您的求职意向和目标。 教育背景：列出您的教育经历，包括学校名称、所学专业、就读时间等。 工作经验：按时间顺序列出您的工作经历，包括公司名称、职位、工作时间、工作职责和成就等。 技能和能力：列出您的专业技能、语言能力、计算机技能等与职位相关的能力。 实习经验/项目经验（可选）：如果您有相关实习或项目经验，可以列出相关信息。 获奖和荣誉（可选）：列出您在学术、工作或其他领域获得的奖项和荣誉。 自我评价（可选）：简要描述您的个人特点、能力和职业目标。 兴趣爱好（可选）：列出您的兴趣爱好，展示您的多样性和个人素质。 参考人（可选）：如果您有可提供推荐的人员，可以在简历中提供其联系信息。 简历内容模板： 姓名: 联系方式: 地址: 求职目标: （简短描述您的求职意
JAVA版基于netty的物联网高并发智能网关
最新发布
08-25
JAVA版基于netty的物联网高并发智能网关
粮食波动率等相关农业数据（2011-2022）（全新整理）
08-25
1、资源内容地址：https://blog.csdn.net/2301_79696294/article/details/141441802 2、代码特点：今年全新，手工精心整理，放心引用，数据来自权威，相对于其他人的控制变量数据准确很多,适合写论文做实证用 ，不会出现数据造假问题 3、适用对象：大学生，本科生，研究生小白可用，容易上手！！！ 3、课程引用: 经济学，地理学，城市规划与城市研究，公共政策与管理，社会学，商业与管理 数据内容： 1.人均粮食产量 2.粮食总产量 3.粮食产量波动率（（当年粮食产量-历年粮食产量均值）/均值）：粮食生产受自然因素和市场等经济社会因素影响较大，常常表现出一定的波动。粮食产量波动率是衡量粮食生产稳定能力的重要指标之一。粮食产量波动率 Rt＝（Yt−Yt＇）／Yt＇，其中 Yt表示 t 年粮食总产量，Yt＇ 表示粮食产量 5 年移动平均值。 4.粮食播种面积 5.粮食单位面积产量 6.谷物/非谷物产量 7.秋收/夏收粮食产量 8.粮食进口数量 9.粮食进口金额 10.粮食出口金额 11.粮食外贸依存度（粮食进出口总额/农业
基于微信小程序高校寻物平台设计与实现.docx
08-25
基于微信小程序高校寻物平台设计与实现.docx
JavaScript中的prototype详解与应用
"JavaScript中的prototype详解" 在JavaScript中，`prototype`是一个非常重要的概念，它涉及到对象的构造、方法继承以及原型链。以下是对标题和描述中提到知识点的详细阐述： ### 1. 原型法设计模式 原型法是一种...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值