JavaScript 全局对象允许你访问那些在全局作用域内定义并在代码中任何地方都可用的变量、函数、对象等。
在浏览器环境中,全局对象名为 window
;而在 Node.js 环境中,全局对象名为 global
。然而,在不同的运行时环境中,全局对象可能有不同的名称。
ECMAScript 2020 引入了 globalThis
,它作为全局对象在大多数浏览器和运行时环境中工作。
语法
我们可以按照以下语法使用全局对象来访问 JavaScript 代码中各处可用的变量:
var a = 10;
let b = window.a;
在上述语法中,变量 a
是一个全局变量,因为它是在使用 var
关键字的全局作用域内定义的。
示例
示例:通过全局对象访问全局变量
在下面的例子中,我们在全局作用域内使用 var
关键字定义了变量 name
。然后,我们通过 window
(全局)对象访问 name
变量。
<html>
<body>
<div id="output">公司名称是: </div>
<script>
var name = "Tutorialspoint";
let company = window.name;
document.getElementById("output").innerHTML += company;
</script>
</body>
</html>
输出:
公司名称是: Tutorialspoint
类似地,如果你在全局作用域内定义了函数,你可以使用全局对象在任何地方访问它。
示例:通过全局对象访问全局函数
在下面的例子中,我们在全局作用域内定义了 sum()
函数。之后,我们定义了对象 obj
,其中包含 num1
、num2
和 sum
属性。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 += "对象是: " + JSON.stringify(obj);
</script>
</body>
</html>
输出:
对象是: {"num1":10,"num2":20,"sum":30}
如果你想让某个值从局部作用域内变为全局可访问,你可以直接将该值作为属性添加到 window
对象上。
让我们看下面的例子。
示例:从函数作用域使变量全局可访问
在下面的例子中,我们在 sum()
函数体内向 window
对象添加了 addition
属性,使其在各处都可访问。
之后,我们使用 window
对象访问 addition
属性。
<html>
<body>
<div id="output"> </div>
<script>
function sum(a, b) {
window.addition = a + b;
}
sum(20, 30);
document.getElementById("output").innerHTML = "和是: " + window.addition;
</script>
</body>
</html>
输出:
和是: 50
你也可以不使用全局对象如 window
直接访问全局变量,因为 JavaScript 脚本引擎默认会将脚本分配给该对象。然而,你可以使用全局对象来使一个变量或表达式成为全局的。
全局对象本身包含多种方法,例如 isNaN()
, decodeURI()
等。你可以使用浏览器中的 window
或 Node.js 中的 global
对象来访问它们。
示例:访问全局对象的预定义方法
JavaScript 的 isNaN()
方法用于检查传递的参数是否为数字。如果参数是数字,则返回 false
。否则,返回 true
。
<html>
<body>
<p id="output"> </p>
<script>
let isNumer = window.isNaN("Hello");
document.getElementById("output").innerHTML = "Hello 不是数字吗? " + isNumer;
</script>
</body>
</html>
输出:
Hello 不是数字吗? true
使用 JavaScript 全局对象进行功能填充(Polyfills)
你可以使用 JavaScript 全局对象检查你的浏览器是否支持某个特定特性。如果用户的浏览器不支持特定特性,你可以显示相关的消息。
看下面的例子来检查用户的浏览器是否支持 Promises。
示例
在下面的代码中,我们检查 Promise
属性是否存在于 window
对象中。如果存在,则说明浏览器支持 Promises,并且你可以执行 Promise。否则,你可以打印一条消息,告知浏览器不支持 Promises。
<html>
<body>
<p id="output"> </p>
<script>
const output = document.getElementById("output");
if (window.Promise) {
output.innerHTML += "您的浏览器支持 Promises";
} else {
output.innerHTML += "您的浏览器不支持 Promises";
}
</script>
</body>
</html>
输出:
您的浏览器支持 Promises
JavaScript 全局对象只存储真正的全局变量。你不应该将非全局的变量存储在全局对象中。否则,这可能会在你的项目中造成冲突。