Javascript 简明教程
JavaScript - Global Object
Global Objects in JavaScript
JavaScript global object 让你可以访问在全局作用域内定义的变量、函数、对象等,在代码中的任何地方都可以使用。
The JavaScript global object allows you to access the variables, functions, objects, etc., defined in the global scope and available everywhere in the code.
在浏览器中,一个全局对象被命名为 window ,在 Node.js 中,全局对象被命名为 global 。不过,全局对象在不同的运行时环境中可能有不同的名称。
In the browser, a global object is named as 'window', and in Node.js, the global object is named 'global'. However, the global object could have different names in different run-time environments.
ES2020 中引入了 globalThis ,它可在大多数浏览器和运行时环境中作为全局对象使用。
The 'globalThis' has been introduced in ECMAScript 2020, which works with most browsers and run time environments as a global object.
Syntax
我们可以按照下面的语法使用全局对象来访问 JavaScript 代码中随处可用的变量。
We can follow the syntax below to use the global object to access the variables available everywhere in the JavaScript code.
var a = 10;
let b = window.a; // Accessing the global variable in the browser
在上面的语法中,变量 'a' 是一个全局变量,因为它使用 var 关键字在全局作用域中定义。
In the above syntax, variable 'a' is a global variable, as it is defined in the global scope using the var keyword.
Examples
Example: Accessing global variables through the global object
在下面的例子中,我们使用 var 关键字在全局作用域中定义了 'name' 变量。然后,我们使用 window(全局)对象访问 name 变量。
In the below example, we have defined the 'name' variable in the global scope using the var keyword. After that, we access the name variable using the window (global) object.
<html>
<body>
<div id = "output">The company name is: </div>
<script>
var name = "Tutorialspoint";
let company = window.name;
document.getElementById("output").innerHTML += company;
</script>
</body>
</html>
The company name is: Tutorialspoint
同样,如果你在全局作用域中定义了一个函数,也可以使用全局对象在任何地方访问它。
Similarly, if you define the function in the global scope, you can access it anywhere using the global object.
Example: Accessing the global function through the global object
在下面的例子中,我们在全局作用域中定义了 sum() 函数。然后,我们定义包含 num1、num2 和 sum 属性的 obj 对象。sum 属性使用 sum() 函数返回的值初始化。我们使用 window 对象调用全局 sum() 函数。
In the below example, we have defined the sum() function in the global scope. After that, we have defined the obj object containing the num1, num2, and sum properties. The sum properties are initialized with a value returned by the sum() function. We used the' window' object to invoke a global sum() function.
因此,你可以使用全局对象在 JavaScript 代码中的任何地方访问全局变量和实例。
So, you can access the global variable and instances anywhere in the JavaScript code using the global object.
<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>
The object is: {"num1":10,"num2":20,"sum":30}
如果你要从局部作用域让值在全局范围内可访问,可以直接把值作为属性添加到 window 对象中。
If you want to make value globally accessible from the local scope, you can directly add value to the 'window' object as a property.
我们来看一下下面的示例。
Let’s look at the example below.
Example: Making variable globally accessible from the function scope
在下面的例子中,我们把 addition 属性添加到 window 对象(在 sum() 函数的主体中),让它到处可用。
In the example below, we add the 'addition' property to the window object in the sum() function’s body to make it available everywhere.
然后,我们使用 window 对象访问 addition 属性。
After that, we access the 'addition' property using the 'window' object.
<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>
The sum is: 50
JavaScript global object 本身包含多种方法,比如 isNaN()、decodeURI() 等。你可以使用类似于浏览器中的窗口和 Node.js 中全局对象的全局对象来访问它们。
The JavaScript global object itself contains various methods like isNaN(), decodeURI(), etc. You can access them using the global object-like window in the browser and global in Node.js.
Example: Accessing pre-defined methods of the global object
window 对象的 JavaScript isNaN() 方法用于检查传递的参数是否为数字。如果参数是数字,它将返回 false。否则,它将返回 true。
The JavaScript isNaN() method of the window object is used to check whether the argument passed is a number or not. If the argument is a number, it returns false. Otherwise, it returns 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>
Is hello not a number? true
Using the JavaScript Global Object for Polyfills
可以使用 JavaScript 全局对象检查浏览器是否支持特定功能。如果用户的浏览器不支持特定功能,你可以显示相关消息。
You can use the JavaScript global object to check whether your browser supports a particular feature. You can show a related message if the user’s browser does not support a particular feature.
请看下面的示例,用于检查用户的浏览器是否支持 Promise。
Look at the example below to check whether the user’s browser supports the promises.
Example
在下面的代码中,我们检查 'promise' 属性是否存在于 window 对象中。如果是,说明浏览器支持 Promise,你可以执行 Promise。否则,你可以打印消息以告知浏览器不支持 Promise。
In the below code, we check whether the 'promise' property exists in the window object. If yes, promises are supported by the browser, and you can execute the promise. Otherwise, you can print the message that your browser doesn’t support 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>
Your browser supports promises
JavaScript 全局对象仅存储真正的全局变量。不应将非全局变量存储在全局对象中。否则,它可能会在项目中创建冲突。
The JavaScript global object only stores the truly global variables. You shouldn’t store the variable in the global object that is not global. Otherwise, it can create conflicts in your project.