小白一命速通JS中的windowglobal对象

笔者注意到JS中的window对象与global对象经常被混淆,尽管它们在相当一部分使用情况下可以等同,但是本质上仍然存在很多不同,下面是对于两者的详细拆解


1. window 对象

  • 定义window 对象表示 浏览器环境中的全局上下文。
  • 作用域:它是浏览器中运行的任何 JavaScript 代码的顶级对象。
  • 关键特性
    • 包含所有通过 var 声明的 全局变量和函数(在非模块脚本中)。
    • 表示浏览器的 窗口框架,代码运行在其中。
    • 包含浏览器特定的属性和方法,如:
      • window.location(当前 URL)
      • window.document(页面的 DOM 树)
      • window.alert()(弹出框)
    • 隐式引用/自动挂载:通过 var 声明或未使用 let/const/var 创建的全局变量成为 window 的属性。 隐式引用
示例
console.log(window.location.href); // 打印当前页面的 URL
window.alert("Hello!"); // 显示一个警告对话框

2. global对象

  • 定义global对象是所有 JavaScript 环境中(浏览器、Node.js 或其他)可用的顶级对象。
  • 作用域:它作为容器,包含所有全局可访问的实体。
  • 关键特性
    • 它根据 执行环境 的不同而有所不同:
      • 在浏览器中,global对象是 window
      • 在 Node.js 中,global对象是 global
      • 在 Web Workers 中,global对象是 self
    • 包含全局内置对象,如 MathDateJSON 等。
Node.js 示例
console.log(global.setTimeout); // 通过 global 访问 setTimeout
浏览器示例
console.log(window === global); // 在浏览器中为 true

3. 关键区别

方面window 对象global对象
作用域仅限于浏览器通用(浏览器、Node.js 等)
环境仅在浏览器中可用取决于环境(windowglobalself
内容包含浏览器特定的 API 和方法包含标准的全局对象(MathJSON 等)
全局变量作为 window 的属性可访问作为全局对象的属性可访问
Node.js 支持不可用使用 global 代替

4. 使用 globalThis 实现通用访问

  • ES2020 引入了 globalThis,提供了一种不依赖于环境的通用方式来访问全局对象:
    • 在浏览器中,globalThis 等同于 window
    • 在 Node.js 中,globalThis 等同于 global
    • 在 Web Workers 中,globalThis 等同于 self
示例
// 在不同环境中都有效
console.log(globalThis.setTimeout === setTimeout); // true

5. 重叠与差异

重叠

在浏览器中:

var x = 10; // 声明一个全局变量
console.log(window.x); // 10(与 global.x 相同)
差异
// Node.js 示例
global.x = 10; // 在 global 中可用
console.log(global.x); // 10
console.log(window.x); // 错误:window 未定义

结论

  • 当处理与浏览器相关的功能(如 DOM 操作、位置、警告等)时,使用 window 对象
  • 使用 全局对象(或 globalThis 以确保跨环境兼容性)编写与环境无关的代码。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

机器学习2 (笔记)(朴素贝叶斯,集成学习,KNN和matlab运用)

朴素贝叶斯模型 贝叶斯定理: 常见类型 算法流程 优缺点 集成学习算法 基本原理 常见方法 KNN(聚类模型) 算法性质: 核心原理: 算法流程 优缺点 matlab中的运用 朴素贝叶斯模型 朴素贝叶斯模型是基于贝叶斯…

HTB:Active[RE-WriteUP]

目录 连接至HTB服务器并启动靶机 信息收集 使用rustscan对靶机TCP端口进行开放扫描 将靶机TCP开放端口号提取并保存 使用nmap对靶机TCP开放端口进行脚本、服务扫描 使用nmap对靶机TCP开放端口进行漏洞、系统扫描 使用nmap对靶机常用UDP端口进行开放扫描 使用nmap对靶机…

Git图形化工具【lazygit】

简要介绍一下偶然发现的Git图形化工具——「lazygit」 概述 Lazygit 是一个用 Go 语言编写的 Git 命令行界面(TUI)工具,它让 Git 操作变得更加直观和高效。 Github地址:https://github.com/jesseduffield/lazygit 主要特点 主要…

58.界面参数传递给Command C#例子 WPF例子

界面参数的传递,界面参数是如何从前台传送到后台的。 param 参数是从界面传递到命令的。这个过程通常涉及以下几个步骤: 数据绑定:界面元素(如按钮)的 Command 属性绑定到视图模型中的 RelayCommand 实例。同时&#x…

51单片机(STC89C52)开发:点亮一个小灯

软件安装: 安装开发板CH340驱动。 安装KEILC51开发软件:C51V901.exe。 下载软件:PZ-ISP.exe 创建项目: 新建main.c 将main.c加入至项目中: main.c:点亮一个小灯 #include "reg52.h"sbit LED1P2^0; //P2的…

RoboMaster- RDK X5能量机关实现案例(一)识别

作者:SkyXZ CSDN:https://blog.csdn.net/xiongqi123123 博客园:https://www.cnblogs.com/SkyXZ 在RoboMaster的25赛季,我主要负责了能量机关的视觉方案开发,目前整体算法已经搭建完成,实际方案上我使用的上…

MySQL误删数据怎么办?

文章目录 1. 从备份恢复数据2. 通过二进制日志恢复数据3. 使用数据恢复工具4. 利用事务回滚恢复数据5. 预防误删数据的策略总结 在使用MySQL进行数据管理时,误删数据是一个常见且具有高风险的操作。无论是因为操作失误、系统故障,还是不小心执行了删除命…

RDK X5运行DeepSeek-R1-Distill-Qwen-1.5B,体验长思维链的语言大模型!

简介 本文介绍了在RDK X5上,如何从HuggingFace的原始模型权重(safetensors)经过量化和编译,的到llama.cpp推理框架所需要的GGUF格式的模型,然后演示了如何使用llama.cpp运行量化后的DeepSeek-R1-Distill-Qwen-1.5B模型…

【Proteus仿真】【51单片机】简易计算器系统设计

目录 一、主要功能 二、使用步骤 三、硬件资源 四、软件设计 五、实验现象 联系作者 一、主要功能 1、LCD1602液晶显示 2、矩阵按键​ 3、可以进行简单的加减乘除运算 4、最大 9999*9999 二、使用步骤 系统运行后,LCD1602显示数据,通过矩阵按键…

留学毕业论文如何利用不同问题设计问卷

在留学毕业论文的写作中,我们经常会遇到各种问题,例如选择合适的问题,选择合适的研究方法,以及设计合理的研究过程。然而在完成留学毕业论文的过程中,我们往往会在研究设计这里卡住。即使我们选准了研究问题和研究方法…

Python中的函数(上)

Python中的函数是非常重要的编程概念,以下是详细的介绍: 函数定义基础 在Python中,函数是组织好的、可重复使用的代码块,用于执行特定任务。通过函数,我们可以将复杂的程序分解为较小的、更易管理的部分&#xff0c…

图漾相机搭配VisionPro使用简易教程

文章目录 1.下载并安装VisionPro软件2.下载PercipioCameraForVisionPro软件包3.软件部署4.测试流程4.1 遍历VisionPro SDK支持的参数4.2 设置示例4.2.1_cameraSingle.SetTriggerMode4.2.2 _cameraSingle.SetRegistration4.2.3_cameraSingle.SetInt4.2.4 _cameraSingle.GetInt4.…

新版IDEA创建数据库表

这是老版本的IDEA创建数据库表,下面可以自己勾选Not null(非空),Auto inc(自增长),Unique(唯一标识)和Primary key(主键) 这是新版的IDEA创建数据库表,Not null和Auto inc可以看得到,但Unique和Primary key…

(非技术)从一公里到半程马拉松:我的一年跑步经历

在24年初,从来不运动的我,连跑步一公里都不能完成。而在一年之后的2025年的1月1日,我参加了上海的蒸蒸日上迎新跑,完成了半程马拉松。虽然速度不快,也并不是什么特别难完成的事情,但对我来说还是挺有意义的…

论“0是不存在的”

你看这又是一个悖论的例子。 你会说,既然你都写出来了“0”,咋还能说它不存在? 总是刷到谢尔顿说零不存在那个视频。可能有些小伙伴不解其意,为啥那小谢尔顿坚持说0不存在。我这说一个最简单的视角,怎么理解这句话。…

单路由及双路由端口映射指南

远程登录总会遇到登陆不上的情况,可能是访问的大门没有打开哦,下面我们来看看具体是怎么回事? 当软件远程访问时,主机需要两个条件,一是有一个唯一的公网IP地址(运营商提供),二是开…

Spring AI 在微服务中的应用:支持分布式 AI 推理

1. 引言 在现代企业中,微服务架构 已成为开发复杂系统的主流方式,而 AI 模型推理 也越来越多地被集成到业务流程中。如何在分布式微服务架构下高效地集成 Spring AI,使多个服务可以协同完成 AI 任务,并支持分布式 AI 推理&#x…

Kafak 单例生产者实现-C#操作

前面写了一篇入门操作的文章,因为工作需要,简单修改了下如何实现单例生产者。 Kafka入门-C#操作_c# kafka-CSDN博客文章浏览阅读1.6k次,点赞20次,收藏9次。2).报错:“kafka.zookeeper.ZooKeeperClientTimeoutException: Timed out waiting for connection while in state…

2024年记 | 凛冬将至

放弃幻想,准备斗争! 考研or就业? 上大学以来,考研上名校在我的心里一直是一颗种子,2024年初,当时的想法是考研和就业两手抓。买了张宇的高数现代,想要死磕! 也记了挺多笔记... 如果…

vue-有关于TS与路由器

title: vue(TS)路由器 date: 2025-01-28 12:00:00 tags:- 前端 categories:- 前端Vue3-第二部分 这里是代码中出现TS的,后面是路由器 现在先上代码,步步分析。 eg1-props的使用 步步分析代码(先理解,再实践) 框架…