JS精进之Hoisting（提升）

news2024/11/25 22:56:47

前言

组会分享，初略的讲讲JS的Hoisting机制

Hoisting提升🏗️前置知识

啥是提升？

简单的说 Hoisting 是JS引擎在代码执行前将所有声明提升到其所在作用域的顶部
这句话你可以在看完这篇文章后再回头看看这句话，真的是一言蔽之。
接下来我会简单讲解一下。

所有声明

JS中拢共有

  • 变常量var let const
  • 函数function
  • 类class
  • 模块import export
    是的这些都会提升，但是JS引擎在处理这些声明时会有不同的细节处理。

所在作用域

JS中拢共 global function block三个常规的作用域，这不会区别自己学去。
[[JS作用域]]
还有模块作用域 (Module Scope)、词法作用域 (Lexical Scope)、动态作用域 (运行时上下文)、私有作用域 (Private Scope)，嘿🫠我也不会，下次学到的时候补上😁😁😁，初略的看了眼，除了module外和hoisting没多大关系（应该吧）
记住Hoisting提升只会提升到其所在作用域的顶部，不会发生将function scope内的提升到global scope的事情。

详细讲解

var 的提升

用 var 声明的变量会被提升到作用域顶部，但仅提升声明部分，初始化（赋值）不会提升。
提一句var会全局污染，即会绑定到window上，不了解的可以自己去查资料看var、let、const的区别.
例子：

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

底层执行过程：

  1. JavaScript 引擎将 var a 提升到作用域顶部，等同于：
    var a;
console.log(a); // undefined
a = 5;
console.log(a); // 5
  2. 因此，在变量赋值之前，a 的值是 undefined。

[[let 和 const 的提升]]

let 和 const 也会被提升，但它们的变量在提升时会被放入一个称为 暂时性死区（Temporal Dead Zone, TDZ） 的区域，只有在声明之后才能访问。

例子：

console.log(b); // ReferenceError: Cannot access 'b' before initialization
let b = 10;

底层执行过程：

  1. let b 被提升到作用域顶部，但在声明之前无法访问。
  2. 由于在 let b 之前尝试访问变量 b，引擎抛出 ReferenceError。
啥是[[暂时性死区（Temporal Dead Zone, TDZ）]]

暂时性死区是 JavaScript 中一种行为：
在作用域内，虽然变量已经“被提升”（即解析时已经被声明），但在实际声明和初始化完成之前，访问该变量会抛出 ReferenceError 错误。
这是为了避免变量在声明之前被意外访问或使用，增加代码的可预测性和安全性。
有死区和没死区粗暴的看就是，一个爆ReferenceError，一个爆undefined

函数的 Hoisting

函数又和前面的机制不同，函数声明的提升会将整个函数提升🫡🫡🫡，而函数表达式则只是会将变量提升，不提升函数。

1. 函数声明的提升

⭐函数声明会被完整地提升到作用域顶部，因此在声明之前也可以调用函数。
例子：

greet(); // Hello!
function greet() {
  console.log("Hello!");
}

底层执行过程：

  1. 函数声明 function greet() { ... } 被完整提升到作用域顶部，等同于：
    function greet() {
  console.log("Hello!");
}
greet(); // Hello!
2. 函数表达式的提升

函数表达式（包括箭头函数）不会提升其赋值部分，仅变量名会被提升。
例子：

console.log(foo); // undefined
var foo = function () {
  console.log("Hello!");
};
foo(); // Hello!

底层执行过程：

  1. 只有 var foo 被提升，赋值部分不会提升，等同于：
    var foo;
console.log(foo); // undefined
foo = function () {
  console.log("Hello!");
};
foo(); // Hello!

使用 let 或 const 声明函数表达式时，会触发暂时性死区：

console.log(bar); // ReferenceError
const bar = () => {
  console.log("Hi!");
};

class (类声明)

类声明也会被提升，但同样会存在暂时性死区，在声明之前无法访问。
示例：

const instance = new MyClass(); // ReferenceError报错，MyClass 在 TDZ 中
class MyClass {
  constructor(name) {
    this.name = name;
  }
}

import (模块声明)

import 总是在模块顶部执行，不能在代码块中使用。
示例：

import { myFunc } from './module.js';
myFunc();

export (模块声明)

特点：

  • 用于导出变量、函数、类等，使其可以在其他模块中使用。
  • 支持命名导出（export {}）和默认导出（export default）。
    示例：
export const myVar = 42;
export default function myFunc() {
  console.log("Hello!");
}

对比总结：

特性varletconstfunctionclassimport/export
作用域三作用域三作用域三作用域函数作用域块作用域模块作用域
变量提升是（值为 undefined）是（TDZ限制）是（TDZ限制）是是（TDZ限制）是
重复声明可以不可以不适用不适用不适用
可重新赋值是是否不适用不适用否

[[Hoisting提升的先后顺序]]

看到这不知道你有没有疑惑，所有声明都会发生提升，那究竟谁比谁更能提升🫡🫡🫡，总不能左脚🦶踩右脚🦶升天不是。
在 JavaScript 中，不同类型的声明（如 var、let、const、function、class、import/export）它们的执行优先级和提升行为有所不同。以下是提升的先后顺序及具体规则：

提升顺序的原则
  1. 模块系统优先：import 和 export 的静态绑定首先被处理。
  2. 函数声明优先：在代码执行前，函数声明会被提升到所在作用域的顶部。
  3. 变量声明依次提升：var 早于 let 和 const，但值初始化按代码顺序进行。
  4. class 的提升特殊：类声明会被提升，但无法在声明前使用（存在 TDZ）。
提升优先级
类型提升顺序初始化可用性是否受 TDZ 限制特性解释
import最高在代码执行前绑定是模块加载的静态绑定，解析阶段完成，但无法访问
function第二在声明前可调用否函数声明整体提升，初始化为可调用函数
var第三在声明前可用（undefined）否声明提升但初始化在原始位置
let 和 const第四声明前不可用是存在 TDZ，初始化需等到执行到声明语句才有效
class最后声明前不可用是类声明会提升，但使用前需显式定义
  • 最高优先级：import/export 静态绑定最先解析。
  • 中间优先级：function 声明高于 var。
  • 最低优先级：let、const 和 class，它们都受 TDZ 限制。
综合示例：优先级的对比

以下代码展示了多种声明的提升顺序和执行规则：

console.log(func()); // "I am a function!"
console.log(x);      // undefined
// console.log(y);   // 报错：Cannot access 'y' before initialization
// console.log(z);   // 报错：Cannot access 'z' before initialization
// console.log(MyClass); // 报错：Cannot access 'MyClass' before initialization

function func() {
  return "I am a function!";
}

var x = 10;
let y = 20;
const z = 30;

class MyClass {
  constructor() {
    this.name = "Class Example";
  }
}

执行顺序：

  1. 函数 func 提升并初始化。
  2. var x 声明提升但值为 undefined。
  3. let y 和 const z 提升但进入 TDZ，未初始化。
  4. class MyClass 提升但进入 TDZ，未初始化。

为什么要提升？

这也是我当初了解到提升这一逆天特性时的最大疑惑，吃饱了撑着么要这么干？
我自己也解释不清，欧克，下面让我们看看GPT是怎么说的：

提升（Hoisting）是 JavaScript 的设计特性之一，它从一开始就融入了语言的实现中。设计提升的原因和历史背景与 JavaScript 的初衷、执行模型、开发环境的需求，以及语言设计的权衡密切相关。

  1. 简化解析和作用域解析，提升性能。
  2. 支持灵活的代码结构，适合快速开发和调试。
  3. 向下兼容，保留早期代码的行为一致性。
  4. 模仿 C 语言的声明模型，降低学习成本。
  5. 宽容开发者错误，降低入门门槛。

我们来挑重点看，主要就是俩点，一是能提高编译器效率，二是设计者就是想要易用🫡（毕竟是10天就完成了第一个版本，原则上就是降低入门成本，减少语法报错的可能性，不管结果死活了，能跑就是赢）

那么为啥Hoisting能提高编译效率呢？

在 JavaScript 执行的早期阶段，解析器会对整个代码进行作用域解析。将变量和函数的声明“提升”到作用域的顶部，可以使解析器在代码运行之前快速定位所有变量和函数，从而优化代码执行过程。如果没有提升，解析器必须动态检查代码块中是否存在变量，这会显著增加解析器的复杂性和性能开销。

那么为什么不把这逆天机制改了呢？

还是有请GPT：

1. 向下兼容性
JavaScript 已经被广泛应用，去掉提升会破坏大量现有代码的运行。因此，ECMAScript 保留了提升特性，同时通过引入 let 和 const 来改进。
2. 保留历史遗留行为
JavaScript 的早期设计中考虑了宽松的语法规则以适应快速开发环境，提升就是这些规则的遗留产物。删除提升会导致历史代码中的行为发生改变，难以维护。
3. 提升的替代方案更复杂
没有提升的语言通常需要更严格的声明规则（如 Python），这与 JavaScript 的宽松设计理念相悖。虽然提升容易被滥用，但它为开发提供了一种低门槛的动态方式。

行，我起码是信了，但我觉得历史原因是更多的。Git也是如此，即使现在SHA-1已经不安全了，但还是因为历史原因未用SHA-256去替换。

最佳实践

如何避免提升的陷阱？

  1. 使用 let 和 const
    它们也会被提升，但由于存在 暂时性死区（TDZ），未初始化前访问会抛出 ReferenceError，从而避免了意外行为。
    console.log(x); // ReferenceError
let x = 10;
  2. 严格模式
    使用 strict mode，避免变量未声明时被使用：
    "use strict";
console.log(a); // ReferenceError
a = 5;
  3. 遵循“先声明，后使用”规则
    避免依赖提升，让代码更加直观。

后记

呼，结束了，但感觉有开了个坑，作用域解析机制、[[JS作用域]] 或许有的一讲🫡，下次在说吧。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2247527.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

详细探索xinput1_3.dll：功能、问题与xinput1_3.dll丢失的解决方案

详细探索xinput1_3.dll：功能、问题与xinput1_3.dll丢失的解决方案

本文旨在深入探讨xinput1_3.dll这一动态链接库文件。首先介绍其在计算机系统中的功能和作用，特别是在游戏和输入设备交互方面的重要性。然后分析在使用过程中可能出现的诸如文件丢失、版本不兼容等问题，并提出相应的解决方案，包括重新安装相关…
阅读更多...
生成对抗网络模拟缺失数据，辅助PAMAP2数据集仿真实验

生成对抗网络模拟缺失数据，辅助PAMAP2数据集仿真实验

PAMAP2数据集是一个包含丰富身体活动信息的数据集，它为我们提供了一个理想的平台来开发和测试HAR模型。本文将从数据集的基本介绍开始，逐步引导大家通过数据分割、预处理、模型训练，到最终的性能评估，在接下来的章节中&#xff0c…
阅读更多...
IEC61850读服务器目录命令——GetServerDirectory介绍

IEC61850读服务器目录命令——GetServerDirectory介绍

IEC61850标准中的GetServerDirectory命令是变电站自动化系统中非常重要的一个功能，它主要用于读取服务器的目录信息，特别是服务器的逻辑设备节点（LDevice）信息。以下是对GetServerDirectory命令的详细介绍。 目录 一、命令功能 …
阅读更多...
基于CNN+RNNs（LSTM, GRU）的红点位置检测（pytorch）

基于CNN+RNNs（LSTM, GRU）的红点位置检测（pytorch）

1 项目背景 需要在图片精确识别三跟红线所在的位置，并输出这三个像素的位置。 其中，每跟红线占据不止一个像素，并且像素颜色也并不是饱和度和亮度极高的红黑配色，每个红线放大后可能是这样的。 而我们的目标是精确输出每个红点的…
阅读更多...
前端：JavaScript （学习笔记）【2】

前端：JavaScript （学习笔记）【2】

目录 一，数组的使用 1，数组的创建 [ ] 2，数组的元素和长度 3，数组的遍历方式 4，数组的常用方法 二，JavaScript中的对象 1，常用对象 （1）String和java中的Stri…
阅读更多...
全面解析多种mfc140u.dll丢失的解决方法，五种方法详细解决

全面解析多种mfc140u.dll丢失的解决方法，五种方法详细解决

当你满心期待地打开某个常用软件，却突然弹出一个错误框，提示“mfc140u.dll丢失”，那一刻，你的好心情可能瞬间消失。这种情况在很多电脑用户的使用过程中都可能出现。无论是游戏玩家还是办公族，面对这个问题都可能不知所…
阅读更多...
STM32总体架构简单介绍

STM32总体架构简单介绍

目录 一、引言 二、STM32的总体架构 1、三个被动单元 （1）内部SRAM （2）内部闪存存储器 （3）AHB到APB的桥（AHB to APBx） 2、四个主动（驱动）单元 &#x…
阅读更多...
【PHP】 环境以及插件的配置，自学笔记（一）

【PHP】 环境以及插件的配置，自学笔记（一）

文章目录 环境的准备安装 XAMPPWindowMacOS 配置开发环境Vscode 关于 PHP 的插件推荐Vscode 配置 php 环境Apache 启动Hello php配置热更新 参考 环境的准备 下载 XAMPP , 可以从 官网下载 https://www.apachefriends.org/download.html 安装 XAMPP XAMPP 是一个跨平台的集成开…
阅读更多...
跟着问题学5——深度学习中的数据集详解（1）

跟着问题学5——深度学习中的数据集详解（1）

深度学习数据集的创建与读取 数据 （计算机术语） 数据(data)是事实或观察的结果，是对客观事物的逻辑归纳，是用于表示客观事物的未经加工的的原始素材。 数据可以是连续的值，比如声音、图像，称为模拟数据。…
阅读更多...
实验-Linux文件系统和磁盘管理

实验-Linux文件系统和磁盘管理

操作1 远程连接Linux系统 下述连接方式2选一即可。 使用xshell工具连接Linux系统。打开xshell，新建连接，将主机ip修改为实际Linux系统的ip(ifconfig命令查看)，可以新建多个xshell会话，使用不同的用户名登录，方便后续…
阅读更多...
GPTZero：高效识别AI生成文本，保障学术诚信与内容原创性

GPTZero：高效识别AI生成文本，保障学术诚信与内容原创性

产品描述 GPTZero 是一款先进的AI文本检测工具，专为识别由大型语言模型（如ChatGPT、GPT-4、Bard等）生成的文本而设计。它通过分析文本的复杂性和一致性，判断文本是否可能由人类编写。GPTZero 已经得到了超过100家媒体机构的报道&…
阅读更多...
Apple Vision Pro开发003-PolySpatial2.0新建项目

Apple Vision Pro开发003-PolySpatial2.0新建项目

unity6.0下载链接:Unity 实时开发平台 | 3D、2D、VR 和 AR 引擎 一、新建项目 二、导入开发包 com.unity.polyspatial.visionos 输入版本号 2.0.4 com.unity.polyspatial（单独导入），或者直接安装 三、对应设置 其他的操作与之前的版本相同…
阅读更多...
百度在下一盘大棋

百度在下一盘大棋

这两天世界互联网大会在乌镇又召开了。 我看到一条新闻，今年世界互联网大会乌镇峰会发布“2024 年度中国互联网企业创新发展十大典型案例”，百度文心智能体平台入选。 这个智能体平台我最近也有所关注，接下来我就来讲讲它。 百度在下一盘大棋…
阅读更多...
038集——quadtree（CAD—C#二次开发入门）

038集——quadtree（CAD—C#二次开发入门）

效果如下： using Autodesk.AutoCAD.ApplicationServices; using Autodesk.AutoCAD.DatabaseServices; using Autodesk.AutoCAD.EditorInput; using Autodesk.AutoCAD.Geometry; using System; using System.Collections.Generic; using System.Linq; using System.T…
阅读更多...
深入探讨 Puppeteer 如何使用 X 和 Y 坐标实现鼠标移动

深入探讨 Puppeteer 如何使用 X 和 Y 坐标实现鼠标移动

背景介绍 现代爬虫技术中，模拟人类行为已成为绕过反爬虫系统的关键策略之一。无论是模拟用户点击、滚动，还是鼠标的轨迹移动，都可以为爬虫脚本带来更高的“伪装性”。在众多的自动化工具中，Puppeteer作为一个无头浏览器控制库&am…
阅读更多...
RabbitMQ2：介绍、安装、快速入门、数据隔离

RabbitMQ2：介绍、安装、快速入门、数据隔离

欢迎来到“雪碧聊技术”CSDN博客！ 在这里，您将踏入一个专注于Java开发技术的知识殿堂。无论您是Java编程的初学者，还是具有一定经验的开发者，相信我的博客都能为您提供宝贵的学习资源和实用技巧。作为您的技术向导，我将…
阅读更多...
Linux 下进程基本概念与状态

Linux 下进程基本概念与状态

文章目录 一、进程的定义二、 描述进程-PCBtask_ struct内容分类 三、 进程状态 一、进程的定义 狭义定义：进程是正在运行的程序的实例（an instance of a computer program that is being executed）。广义定义：进程是一个具有一定…
阅读更多...
数据库MYSQL——表的设计

数据库MYSQL——表的设计

文章目录 前言三大范式：几种实体间的关系：一对一关系：一对多关系：多对多关系： 前言 之前的博客中我们讲解的是关于数据库的增删改查与约束的基本操作， 是在已经创建数据库，表之上的操作。 在实…
阅读更多...
开源动态表单form-create-designer 扩展个性化配置的最佳实践教程

开源动态表单form-create-designer 扩展个性化配置的最佳实践教程

在开源低代码表单设计器 form-create-designer 的右侧配置面板里，field 映射规则为开发者提供了强大的工具去自定义和增强组件及表单配置的显示方式。通过这些规则，你可以简单而高效地调整配置项的展示，提升用户体验。 源码地址: Github | G…
阅读更多...
面试：请阐述MySQL配置文件my.cnf中参数log-bin和binlog-do-db的作用

面试：请阐述MySQL配置文件my.cnf中参数log-bin和binlog-do-db的作用

大家好，我是袁庭新。星球里的小伙伴去面试，面试官问：MySQL配置文件my.cnf中参数log-bin和binlog-do-db的作用？一脸懵逼～不知道该如何回答。 在MySQL的配置文件my.cnf中，log-bin和binlog-do-db是与二进制日志…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023