diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:17 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:17 -0500 |
| commit | da78a9e329e272dedb2400b79a3bdeebff387d47 (patch) | |
| tree | e6ef8aa7c43556f55ddfe031a01cf0a8fa271bfe /files/ko/web/javascript/reference/global_objects/globalthis | |
| parent | 1109132f09d75da9a28b649c7677bb6ce07c40c0 (diff) | |
| download | translated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.tar.gz translated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.tar.bz2 translated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.zip | |
initial commit
Diffstat (limited to 'files/ko/web/javascript/reference/global_objects/globalthis')
| -rw-r--r-- | files/ko/web/javascript/reference/global_objects/globalthis/index.html | 89 |
1 files changed, 89 insertions, 0 deletions
diff --git a/files/ko/web/javascript/reference/global_objects/globalthis/index.html b/files/ko/web/javascript/reference/global_objects/globalthis/index.html new file mode 100644 index 0000000000..df3323a00b --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/globalthis/index.html @@ -0,0 +1,89 @@ +--- +title: globalThis +slug: Web/JavaScript/Reference/Global_Objects/globalThis +tags: + - JavaScript + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/globalThis +--- +<div>{{jsSidebar("Objects")}}</div> + +<p>전역 <code><strong>globalThis</strong></code> 속성은 전역 <code>this</code> 값을 가진 전역 객체를 반환합니다.</p> + +<div>{{EmbedInteractiveExample("pages/js/globalprops-globalthis.html")}}</div> + + + +<p>{{JS_Property_Attributes(1, 0, 1)}}</p> + +<h2 id="설명">설명</h2> + +<p>역사적으로, 서로 다른 JavaScript 환경의 전역 범위에 접근하는건 서로 다른 구문을 필요로 했습니다. 웹에서는 {{domxref("Window.window", "window")}}, {{domxref("Window.self", "self")}}, {{domxref("Window.frames", "frames")}}를 사용할 수 있지만, <a href="/ko/docs/Web/API/Worker">Web Workers</a>에서는 <code>self</code>만 동작합니다. Node.js에서는 아무것도 쓸 수 없고, 대신 <code>global</code>을 사용해야 합니다.<br> + 비엄격 모드에서의 함수 내부에서 <code>this</code>를 사용할 수도 있겠지만, 모듈이나 엄격 모드의 함수에서는 {{jsxref("undefined")}}를 가리키는 문제가 있습니다.<code> Function('return this')()</code>를 사용하는 방법도 존재하지만, 브라우저의 {{glossary("CSP")}} 등으로 {{jsxref("eval", "eval()")}}을 사용할 수 없는 환경에선 {{jsxref("Function")}}도 이렇게 사용할 수 없습니다.</p> + +<p><code>globalThis</code> 속성은 환경에 무관하게 전역 <code>this</code> 값, 즉 전역 객체에 접근하는 표준 방법을 제공합니다. <code>window</code>, <code>self</code> 등 비슷한 속성과는 다르게 브라우저/비 브라우저 맥락 모두에서의 동작을 보장합니다. 따라서 코드를 구동하는 환경을 모르더라도 전역 객체에 일관적으로 접근할 수 있습니다.</p> + +<h3 id="HTML과_WindowProxy">HTML과 WindowProxy</h3> + +<p>많은 JavaScript 엔진에서 <code>globalThis</code>는 실제 전역 객체를 가리킬 것이나, 웹 브라우저는 {{htmlelement("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">언어 제안서의 "NAMING" 문서</a>를 방문해 더 자세한 정보를 읽어보세요.</p> + +<h2 id="예제">예제</h2> + +<h3 id="환경별_전역_접근">환경별 전역 접근</h3> + +<p><code>globalThis</code> 없이 현재 환경의 전역 객체를 가져오는 방법 중 유일하게 믿을만한 방법은 <code>Function('return this')()</code> 입니다. 그러나 일부 환경에서는 <a href="/ko/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') { + // no setTimeout in this environment! +} +</pre> + +<p><code>globalThis</code>를 사용할 수 있으면 환경별 전역 객체 검사는 더 이상 필요하지 않습니다.</p> + +<pre class="brush: js notranslate">if (typeof globalThis.setTimeout !== 'function') { + // no setTimeout in this environment! +}</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + </tr> + <tr> + <td>{{SpecName("ESDraft", "#sec-globalthis", "globalThis")}}</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("javascript.builtins.globalThis")}}</p> + +<h3 id="구현_진척도">구현 진척도</h3> + +<p>본 기능은 아직 안정적인 크로스 브라우징에 도달하지 못했으므로, 매일 업데이트되는 아래 표에서 브라우저별 구현 상황을 확인할 수 있습니다. 이 데이터는 각 브라우저 JavaScript 엔진의 나이틀리 빌드 또는 최신 릴리즈판에서, JavaScript 표준 테스트인 <a href="https://github.com/tc39/test262">Test262</a>의 관련 항목을 시험해 생성합니다.</p> + +<p>{{EmbedTest262ReportResultsTable("globalThis")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{jsxref("Operators/this", "this")}}</li> +</ul> |
