JavaScript globalThis 对象

2025 年 3 月 18 日 | 3 分钟阅读

JavaScript 可以通过 global object 属性来访问全局对象。在 Web 浏览器中，JavaScript 的全局对象称为 window。它也根据环境被称为 global 或 web worker。使用 Web 服务器的 JavaScript 框架使用 globalThis 属性来统一访问全局对象。

我们为什么要使用 globalThis 对象？

方便开发人员： 各种环境使得构建可在多个平台上运行的 JavaScript 代码变得困难。在不同的环境中，需要以不同的方式引用全局对象等环境。
框架的设置： JavaScript 框架借助 GlobalThis 对象解决了所有这些问题。我们现在可以在框架的多个环境中执行 JavaScript 代码。
窗口和非窗口环境： 我们可以使用全局资源，而无需创建额外的检查和测试。我们现在可以在窗口或非窗口环境中执行我们的函数。
代码执行： 当不确定环境和代码执行时，此对象非常有用。它有助于以简单的方式使我们的代码在多个环境中可执行。

全局关键字及其环境表

下表显示了 JavaScript 输出环境及其支持的全局关键字。

JavaScript 环境	全局关键字
Web 浏览器	this
Web Workers	self
Node.js	全局

语法

脚本标签中使用以下语法来操作全局对象。

它直接在控制台和其他输出选项卡中使用。

示例

多个示例展示了带有全局数据的 JavaScript 变量在输出选项卡中的情况。

示例 1

以下基本示例显示了带有控制台选项卡中进程的 gloabalThis 变量。

<!DOCTYPE html>
<html>
<head>
<title> Javascript globalThis object </title>
</head>
<body>
<h3> Javascript globalThis object </h3>
<b> Please See the Console Tab. </b>
<script>
console.log("Javascript globalThis object");
console.log(globalThis);
</script>
</body>
</html>

输出

图像显示了全局对象的输出。

示例 2

以下基本示例显示了带有控制台选项卡中其他函数的 gloabalThis 变量。

<!DOCTYPE html>
<html>
<head>
<title> Javascript globalThis object </title>
</head>
<body>
<h3> Javascript globalThis object </h3>
<b> Please See the Console Tab. </b>
<script>
console.log("Javascript globalThis object");
console.log(globalThis.self);
console.log(globalThis.window);
console.log(globalThis.process);
</script>
</body>
</html>

输出

图像显示了全局对象的输出。

示例 3

以下基本示例显示了带有控制台选项卡的 gloabalThis 变量。

<!DOCTYPE html>
<html>
<head>
<title> Javascript globalThis object </title>
</head>
<body>
<h3> Javascript globalThis object </h3>
<b> Please See the Console Tab. </b>
<script>
function setGlobalvariableValue() {
globalThis.myValue ='Hello Students';
}
setGlobalvariableValue();
console.log("Javascript globalThis object");
console.log(globalThis.myValue);
</script>
</body>
</html>

输出

图像显示了全局对象的输出。

示例 4

以下基本示例显示了带有 alert 选项卡的 gloabalThis 变量。

<!DOCTYPE html>
<html>
<head>
<title> Javascript globalThis object </title>
</head>
<body>
<h3> Javascript globalThis object </h3>
<b> Please Run and See the alert box. </b>
<script>
function setGlobalvariableValue() {
globalThis.myValue ='Hello Students';
}
setGlobalvariableValue();
alert("Javascript globalThis object \n" +globalThis.myValue);
</script>
</body>
</html>

输出

图像显示了全局对象的输出。

示例 5

以下基本示例显示了带有 onclick 函数的 gloabalThis 变量。

<!DOCTYPE html>
<html>
<head>
<title> Javascript globalThis object </title>
</head>
<body>
<h3> Javascript globalThis object </h3>
<b> Please click and see the output information. </b> <br>
<button type="button" onclick="setGlobalvariableValue();">
Click me to display Data.</button>
<p id = "demo2"> </p>
<script>
function setGlobalvariableValue() {
globalThis.myValue ='Hello Students';
document.getElementById('demo2').innerHTML = globalThis.myValue;
}
</script>
</body>
</html>

输出

图像显示了全局对象的输出。

示例 6

以下基本示例显示了带有 typeof 函数的 gloabalThis 变量。

<!DOCTYPE html>
<html>
<head>
<title> Javascript globalThis object </title>
</head>
<body>
<h3> Javascript globalThis object </h3>
<b> please click and see the Boolean output. </b> <br> <br>
<button type = "button" onclick = "setGlobalvariableValue();">
Click me to display Data.</button>
<p id = "demo2"> </p>
<script>
function setGlobalvariableValue() {
globalThis.myValue ='Hello Students';
const data_Fetch = typeof globalThis.fetch === 'function';
document.getElementById('demo2').innerHTML = data_Fetch;
}
</script>
</body>
</html>

输出

图像显示了全局对象的输出。

兼容浏览器

以下浏览器支持 JavaScript globalThis 对象。

Chrome
火狐
Opera
边
Safari

结论

JavaScript 中的 "objectThis" 被称为 ES11 或 ES2020。它在 ECMA Script 2020 中可用。globalThis 对象用于创建跨平台代码，使其代码有意义且可在各种 JavaScript 环境中运行。

下一主题JavaScript 逻辑赋值运算符

JavaScript globalThis 对象

我们为什么要使用 globalThis 对象？

全局关键字及其环境表

语法

示例

兼容浏览器

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

JavaScript 基础

JS 变量和数据类型

JS 控制语句

JavaScript 函数

JavaScript 对象

JS 高级函数

JS Promises & Async/Await

JavaScript DOM

JavaScript JSON 对象

JavaScript 验证

JavaScript Cookies

异常处理

JavaScript 集合

JavaScript 事件

JavaScript OOPs

JavaScript BOM

面试题

选择题

差异

JavaScript Map 方法

JavaScript Handler

JavaScript Number 方法

JavaScript Reflect

JavaScript Symbol

Symbol 属性

JavaScript Math 方法

JavaScript Date 方法

JavaScript DataView

JavaScript Object 方法

JavaScript Set 方法

JavaScript 字符串方法

JavaScript TypedArray 方法

JavaScript WeakMap 方法

JavaScript WeakSet 方法

JavaScript 数组方法

JavaScript RegExp 对象

JavaScript 附加内容

JavaScript 杂项

JavaScript 进阶

问题

Lodash

JavaScript globalThis 对象

我们为什么要使用 globalThis 对象？

全局关键字及其环境表

语法

示例

兼容浏览器

结论

相关帖子

使用 JavaScript 框架创建演示文稿

Mouseout 事件在 javascript 中的用法

如何调试 JavaScript

JavaScript 创建和下载 CSV 文件

JavaScript onkeyup 事件

Javascript offsetX 属性

preventDefault() 和 stopPropagation() 方法之间的区别

npm Install 命令

Javascript Mouseenter 和 mouseleave 事件

JavaScript 函数用于检查数组是否为空

订阅 Tpoint Tech