`GLOBALTHIS` ES 제안 설명

ECMAScript 제안 글로벌이 by Jordan Harband는 전역 개체에 액세스하는 새로운 표준 방법을 제공합니다.

JavaScript의 전역 범위

JavaScript의 변수 범위는 중첩되어 루트가 전역 범위인 트리를 형성합니다. 해당 범위는 스크립트가 웹 브라우저에서 실행될 때만 직접적인 범위입니다. 글로벌에는 두 가지 종류가 있습니다. 변수 :

전역 선언 변수 정상 변수입니다.
그것들은 const, `let 및 class 선언을 통해 스크립트의 최상위 수준에서 생성됩니다.
전역 개체 변수 의 속성에 저장됩니다. 전역 개체 .
var 및 함수 선언을 통해 스크립트의 최상위 수준에서 생성됩니다.
전역 개체를 통해 생성, 삭제 및 읽을 수도 있습니다.
그 외에는 일반 변수처럼 작동합니다.

전역 객체는 globalThis 를 통해 액세스할 수 있습니다. 다음 HTML 조각은 globalThis와 다양한 종류의 전역 변수를 보여줍니다.

global

각 모듈에는 고유한 범위가 있습니다. 따라서 모듈의 최상위 수준에 있는 변수는 전역 변수가 아닙니다. 다음 다이어그램은 다양한 범위가 어떻게 관련되어 있는지 보여줍니다.

이것의 가치

없을때마다 수화기 (메소드 호출의 객체), this 값은 현재 범위에 따라 다릅니다.

최상위 스크립트: 전역 개체(브라우저에는 나중에 탐색할 간접 참조가 있습니다)
ECMAScript 모듈의 최상위 레벨: 정의되지 않음
함수 호출 중:
엄격한 모드(모듈 포함): 정의되지 않음
조잡한 모드: 전역 this와 동일

eval()을 간접적으로 호출하면 전역 범위에서 엉성하게 실행됩니다. 따라서 다음 코드를 사용하여 전역 this를 얻을 수 있습니다.

global

new Function()은 또한 항상 조잡한 모드에서 평가됩니다.

global

그러나 한 가지 중요한 주의 사항이 있습니다. eval, new Function() 등은 CSP(콘텐츠 보안 정책)를 사용하는 경우 사용할 수 없습니다. 따라서 이 접근 방식은 많은 경우에 적합하지 않습니다.

브라우저에서 전역 this는 전역 개체를 직접 가리키지 않습니다.

머신 러닝을 위한 외부 GPU

예를 들어 웹 페이지의 iframe을 고려하십시오.

iframe의 src가 변경될 때마다 새로운 전역 객체를 얻습니다.
그러나 전역 this는 항상 동일한 값을 가지며 iframe 외부에서 확인할 수 있습니다. 기능 제안서에 나와 있는 것처럼 .

브라우저는 두 객체를 구별하여 이를 달성합니다.

창문 전역 개체입니다. 위치가 변경될 때마다 변경됩니다.
창 프록시 현재 Window에 대한 모든 액세스를 전달하는 개체입니다. 이 개체는 절대 변경되지 않습니다.

브라우저에서 전역은 WindowProxy를 나타냅니다. 다른 곳에서는 전역 개체를 직접 참조합니다.

globalThis 및 대안(창 등)

globalThis는 전역 this에 액세스하는 새로운 표준 방법입니다. 기존의 간단한 방법은 플랫폼에 따라 다릅니다.

전역 변수 창: 전역 개체를 참조하는 고전적인 방법입니다. 하지만 Node.js와 웹 작업자에서는 작동하지 않습니다.
전역 변수 self: 일반적으로 웹 작업자 및 브라우저에서 사용할 수 있습니다. 그러나 Node.js에서는 지원하지 않습니다. 어떤 사람들은 코드가 웹 작업자와 일반 브라우저 설정 모두에서 작동한다는 표시로 코드에 나타나는 자기 모습을 취합니다.
전역 변수 global: Node.js에서만 사용할 수 있습니다.

제안은 또한 전역 객체가 프로토타입 체인에 Object.prototype을 가져야 한다고 표준화합니다. 다음은 오늘날 웹 브라우저에서 이미 사실입니다.

 const one = 1; var two = 2; // All scripts share the same top-level scope: console.log(one); // 1 console.log(two); // 2 // Not all declarations create properties of the global object: console.log(globalThis.one); // undefined console.log(globalThis.two); // 2

globalThis의 사용 사례

전역 객체는 이제 이전 버전과의 호환성으로 인해 JavaScript가 제거할 수 없는 실수로 간주됩니다. 성능에 부정적인 영향을 미치며 일반적으로 혼란스럽습니다.

ECMAScript는 전역 객체를 쉽게 피할 수 있는 몇 가지 기능을 도입했습니다. 예를 들면 다음과 같습니다.

const, let 및 class 선언은 전역 범위에서 사용될 때 전역 개체 속성을 생성하지 않습니다.
각 ECMAScript 모듈에는 자체 로컬 범위가 있습니다.

일반적으로 전역 변수를 globalThis의 속성이 아닌 변수로 참조하는 것이 좋습니다. 그것은 항상 모든 JavaScript 플랫폼에서 작동했습니다.

따라서 globalThis에 대한 사용 사례는 비교적 적습니다. 예를 들면 다음과 같습니다.

JavaScript 엔진에서 새로운 기능을 제공하는 폴리필 및 shim.
기능 감지, JavaScript 엔진이 지원하는 기능을 확인합니다.

폴리필

제안서의 저자인 Jordan Harband는 다음과 같이 썼습니다. 폴리필 글로벌이용.

CommonJS 구문과 함께 사용:

const theGlobalThis = eval.call(undefined, 'this');

ES6 모듈 구문과 함께 사용:

const theGlobalThis = new Function('return this')();

패키지는 항상 사용 가능한 가장 기본적인 접근 방식을 사용합니다(Node.js에서는 전역, 일반 브라우저 컨텍스트에서는 창 등).

전역 객체에 대한 참조 계산

내부적으로 polyfill은 getPolyfill() 함수를 사용하여 전역 객체에 대한 참조를 계산합니다. 이것이 달성되는 방법입니다.

폴리필.js :

> Object.prototype.isPrototypeOf(window) true

자주하는 질문: 글로벌이쪽

전역, 자체 또는 창을 모든 곳에서 사용하지 않는 이유는 무엇입니까?

많은 JavaScript 라이브러리가 이러한 변수를 사용하여 실행 중인 플랫폼을 감지하기 때문에 불가능합니다.

globalThis에 대해 어떤 다른 이름이 고려되었습니까?

이슈 제안서의 저장소에는 고려된 이름과 거부된 이유가 나열되어 있습니다.

읽어 주셔서 감사합니다 ❤

맛있는 코인 구매 방법

이 게시물이 마음에 든다면 모든 프로그래밍 친구들과 공유/좋아요를 눌러주세요!

우리를 따라 오세요 페이스북 | 트위터

JavaScript에 대한 추가 읽기

☞ 완전한 JavaScript 과정 2019: 실제 프로젝트 빌드!

☞ Vue JS 2 - 전체 가이드(Vue 라우터 및 Vuex 포함)

☞ JavaScript Bootcamp - 실제 응용 프로그램 빌드

☞ 웹 개발자 부트캠프

☞ JavaScript 프로그래밍 튜토리얼 - 초보자를 위한 전체 JavaScript 코스

☞ 모든 JavaScript 개발자가 알아야 할 새로운 ES2019 기능

☞ 2019년에 사용할 최고의 JavaScript 프레임워크, 라이브러리 및 도구

☞ React vs Angular vs Vue.js 예제

☞ 마이크로프론트엔드 — JavaScript 프레임워크를 함께 연결(React, Angular, Vue 등)

☞ Anime.js로 웹 애니메이션 만들기

☞ Ember.js 대 Vue.js - JavaScript 프레임워크가 귀하에게 더 잘 맞는 것

☞ JavaScript 프레임워크가 여전히 필요한가요?

#자바스크립트 #es6 #웹 개발

2ality.com