blob: e9c96e86562029dad37eb2f5a954c7e040b4c530 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
|
---
title: globalThis
slug: Web/JavaScript/Reference/Global_Objects/globalThis
tags:
- JavaScript
- Reference
- global
- globalThis
- this
- 全局
- 参考
- 属性
translation_of: Web/JavaScript/Reference/Global_Objects/globalThis
---
<div>{{jsSidebar("Objects")}}</div>
<p><span class="seoSummary">全局属性 <code>globalThis</code> 包含全局的 <code>this</code> 值，类似于全局对象（global object）。</span></p>
<div>{{EmbedInteractiveExample("pages/js/globalprops-globalthis.html","shorter")}}</div>
<p>{{JS_Property_Attributes(1, 0, 1)}}</p>
<h2 id="语法">语法</h2>
<pre class="syntaxbox notranslate">globalThis</pre>
<h2 id="描述">描述</h2>
<p>在以前，从不同的 JavaScript 环境中获取全局对象需要不同的语句。在 Web 中，可以通过 <code>window</code>、<code>self</code> 或者 <code>frames</code> 取到全局对象，但是在 <a href="/zh-CN/docs/Web/API/Worker">Web Workers</a> 中，只有 <code>self</code> 可以。在 Node.js 中，它们都无法获取，必须使用 <code>global</code>。</p>
<p>在松散模式下，可以在函数中返回 <code>this</code> 来获取全局对象，但是在严格模式和模块环境下，<code>this</code> 会返回 <code>undefined</code>。你也可以使用 <code>Function('return this')()</code>，但那些禁用{{jsxref("eval", "eval()")}}的环境，如在浏览器中的<a href="/zh-CN/docs/Glossary/CSP">CSP</a>，不允许这样使用{{jsxref("Function")}}。</p>
<p><code>globalThis</code> 提供了一个标准的方式来获取不同环境下的全局 <code>this</code> 对象（也就是全局对象自身）。不像 <code>window</code> 或者 <code>self</code> 这些属性，它确保可以在有无窗口的各种环境下正常工作。所以，你可以安心的使用 <code>globalThis</code>，不必担心它的运行环境。为便于记忆，你只需要记住，全局作用域中的 <code>this</code> 就是 <code>globalThis</code>。</p>
<h3 id="HTML_与_WindowProxy">HTML 与 WindowProxy</h3>
<p>在很多引擎中， <code>globalThis</code> 被认为是真实的全局对象的引用，但是在浏览器中，由于 iframe 以及跨窗口安全性的考虑，它实际引用的是真实全局对象（不可以被直接访问）的 {{jsxref("Proxy")}} 代理。在通常的应用中，很少会涉及到代理与对象本身的区别，但是也需要加以注意。</p>
<h3 id="命名">命名</h3>
<p>并没有采用一些更常见的命名方式，如 <code>self</code> 和 <code>global</code>，这是为了避免影响现存代码的兼容性。更多相关信息可以查看 <a href="https://github.com/tc39/proposal-global/blob/master/NAMING.md">language proposal's "naming" document</a> 。</p>
<h2 id="示例">示例</h2>
<p>在 <code>globalThis</code> 之前，获取某个全局对象的唯一方式就是 <code>Function('return this')()</code>，但是这在某些情况下会违反 <a href="/zh-CN/docs/Web/HTTP/CSP">CSP</a> 规则，所以，<a href="https://github.com/paulmillr/es6-shim">es6-shim</a> 使用了类似如下的方式：</p>
<pre class="brush: js notranslate">var getGlobal = function () {
if (typeof self !== 'undefined') { return self; }
if (typeof window !== 'undefined') { return window; }
if (typeof global !== 'undefined') { return global; }
throw new Error('unable to locate global object');
};
var globals = getGlobal();
if (typeof globals.setTimeout !== 'function') {
// 此环境中没有 setTimeout 方法！
}
</pre>
<p>但是有了 <code>globalThis</code> 之后，只需要：</p>
<pre class="brush: js notranslate">if (typeof globalThis.setTimeout !== 'function') {
// 此环境中没有 setTimeout 方法！
}</pre>
<h2 id="规范">规范</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">规范</th>
</tr>
<tr>
<td>{{SpecName("ESDraft", "#sec-globalthis", "<code>globalThis</code>")}}</td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<p>{{Compat("javascript.builtins.globalThis")}}</p>
|
