JavaScript 中的全局对象
JavaScript 全局对象允许您访问在全局范围内定义且在代码中随处可见的变量、函数、对象等。
在浏览器中,全局对象命名为 'window',而在 Node.js 中,全局对象命名为 'global'。但是,全局对象在不同的运行时环境中可能具有不同的名称。
“globalThis”已在 ECMAScript 2020 中引入,它作为全局对象适用于大多数浏览器和运行时环境。
语法
我们可以按照下面的语法来使用全局对象来访问 JavaScript 代码中随处可见的变量。
var a = 10;
let b = window.a; // 在浏览器中访问全局变量
在上述语法中,变量 'a' 是全局变量,因为它是在全局范围内使用 var 关键字定义的。
例子
示例:通过全局对象访问全局变量
在下面的示例中,我们使用 var 关键字在全局范围内定义了 'name' 变量。之后,我们使用 window (global) 对象访问 name 变量。
<html>
<body>
<div id = "output">The company name is: </div>
<script>
var name = "qikepucom";
let company = window.name;
document.getElementById("output").innerHTML += company;
</script>
</body>
</html>
输出
同样,如果您在全局范围内定义函数,则可以使用全局对象在任何位置访问它。
示例:通过全局对象访问 global 函数
在下面的示例中,我们在全局范围内定义了 sum() 函数。之后,我们定义了包含 num1、num2 和 sum 属性的 obj 对象。sum 属性使用 sum() 函数返回的值进行初始化。我们使用 ' window' 对象来调用全局 sum() 函数。
因此,您可以使用全局对象在 JavaScript 代码中的任何位置访问全局变量和实例。
<html>
<body>
<p id = "output"> </p>
<script>
function sum(a, b) {
return a + b;
}
const obj = {
num1: 10,
num2: 20,
sum: window.sum(10, 20),
}
document.getElementById("output").innerHTML += "The object is: " + JSON.stringify(obj);
</script>
</body>
</html>
输出
如果你想让值从本地范围全局访问,你可以直接将值作为属性添加到 'window' 对象中。
让我们看看下面的示例。
示例:使变量可从函数范围全局访问
在下面的示例中,我们将 'addition' 属性添加到 sum() 函数体中的 window 对象,使其在任何地方都可用。
之后,我们使用 'window' 对象访问 'addition' 属性。
<html>
<body>
<div id = "output"> </div>
<script>
function sum(a, b) {
window.addition = a + b;
}
sum(20, 30);
document.getElementById("output").innerHTML = "The sum is: " + window.addition;
</script>
</body>
</html>
输出
您还可以在不使用全局对象(如窗口)的情况下访问全局变量,因为默认情况下,脚本由 JavaScript 脚本引擎分配给对象下。但是,您可以使用全局对象将变量或表达式设为全局变量或表达式。
JavaScript 全局对象本身包含各种方法,如 isNaN()、decodeURI() 等。您可以使用浏览器中的 global object-like 窗口和 Node.js 中的 global 窗口来访问它们。
示例:访问全局对象的预定义方法
window 对象的 JavaScript isNaN() 方法用于检查传递的参数是否为数字。如果参数是数字,则返回 false。否则,它将返回 true。
<html>
<body>
<p id = "output"> </p>
<script>
let isNumer = window.isNaN("Hello");
document.getElementById("output").innerHTML = "Is hello not a number? " + isNumer;
</script>
</body>
</html>
输出
将 JavaScript 全局对象用于 Polyfill
您可以使用 JavaScript 全局对象来检查您的浏览器是否支持特定功能。如果用户的浏览器不支持特定功能,则可以显示相关消息。
查看下面的示例,检查用户的浏览器是否支持 Promise。
例在下面的代码中,我们检查 window 对象中是否存在 'promise' 属性。如果是,则浏览器支持 Promise,您可以执行 Promise。否则,您可以打印浏览器不支持 promise 的消息。
<html>
<body>
<p id = "output"> </p>
<script>
const output = document.getElementById("output");
if (window.Promise) {
output.innerHTML += "Your browser supports promises";
} else {
output.innerHTML += "Your browser doesn't support promises";
}
</script>
</body>
</html>
输出
JavaScript 全局对象仅存储真正的全局变量。您不应将变量存储在非全局的全局对象中。否则,它可能会在您的项目中产生冲突。