홈페이지>웹 디자인 튜토리얼>자바스크립트 튜토리얼

전역 객체

저자：Eve Cole 업데이트 시간：2024-12-20 17:46:34

전역 개체는 어디서나 사용할 수 있는 변수와 함수를 제공합니다. 기본적으로 언어나 환경에 내장된 것입니다.

브라우저에서는 window 라는 이름이 붙고, Node.js의 경우에는 global 이며, 다른 환경에서는 다른 이름이 있을 수 있습니다.

최근에는 모든 환경에서 지원되어야 하는 전역 개체의 표준화된 이름으로 globalThis 언어에 추가되었습니다. 모든 주요 브라우저에서 지원됩니다.

여기서는 환경이 브라우저라고 가정하고 window 사용하겠습니다. 스크립트가 다른 환경에서 실행될 수 있는 경우 대신 globalThis 사용하는 것이 좋습니다.

전역 개체의 모든 속성에 직접 액세스할 수 있습니다.

 Alert("안녕하세요");
//와 같다
window.alert("안녕하세요");

브라우저에서 var ( let/const 아님!)로 선언된 전역 함수와 변수는 전역 개체의 속성이 됩니다.

 var gVar = 5;

경고(window.gVar); // 5 (전역 객체의 속성이 됨)

함수 선언은 동일한 효과를 갖습니다(함수 표현식이 아닌 기본 코드 흐름에 function 키워드가 있는 명령문).

그것에 의존하지 마십시오! 이 동작은 호환성상의 이유로 존재합니다. 최신 스크립트는 그러한 일이 발생하지 않는 JavaScript 모듈을 사용합니다.

대신 let 사용하면 이런 일이 발생하지 않습니다.

 gLet = 5라고 하자;

경고(window.gLet); // 정의되지 않음(전역 객체의 속성이 되지 않음)

값이 너무 중요해서 전역적으로 사용할 수 있도록 하려면 해당 값을 속성으로 직접 작성하세요.

 // 현재 사용자 정보를 전역으로 만들어 모든 스크립트에서 액세스할 수 있도록 합니다.
window.currentUser = {
  이름: "존"
};

// 코드의 다른 곳
경고(현재사용자.이름);  // 존

// 또는 이름이 "currentUser"인 지역 변수가 있는 경우
// 명시적으로 창에서 가져옵니다(안전합니다!)
경고(window.currentUser.name); // 존

즉, 전역 변수를 사용하는 것은 일반적으로 권장되지 않습니다. 전역 변수는 가능한 한 적어야 합니다. 함수가 "입력" 변수를 가져오고 특정 "결과"를 생성하는 코드 디자인은 외부 또는 전역 변수를 사용하는 경우보다 오류가 덜 발생하고 테스트하기가 더 쉽습니다.

폴리필에 사용

우리는 최신 언어 기능 지원을 테스트하기 위해 전역 개체를 사용합니다.

예를 들어, 내장된 Promise 객체가 존재하는지 테스트해 보세요(실제로 오래된 브라우저에는 존재하지 않습니다).

 if (!window.Promise) {
  Alert("브라우저가 너무 오래되었습니다!");
}

폴리필이 없으면(예를 들어 오래된 브라우저를 사용하고 있는 경우) "폴리필"을 만들 수 있습니다. 즉, 해당 환경에서는 지원되지 않지만 최신 표준에는 존재하는 기능을 추가할 수 있습니다.

 if (!window.Promise) {
  window.Promise = ... // 최신 언어 기능의 사용자 정의 구현
}

요약

  • 전역 객체는 어디에서나 사용할 수 있는 변수를 보유합니다.

    여기에는 Array 와 같은 JavaScript 내장 기능과 브라우저의 창 높이인 window.innerHeight 와 같은 환경별 값이 포함됩니다.

  • 전역 객체의 범용 이름은 globalThis .

    …그러나 window (브라우저) 및 global (Node.js)과 같은 "구식" 환경별 이름으로 참조되는 경우가 더 많습니다.

  • 우리 프로젝트에 대해 실제로 전역적인 경우에만 전역 객체에 값을 저장해야 합니다. 그리고 그 수를 최소한으로 유지하십시오.

  • 브라우저 내에서는 모듈을 사용하지 않는 한 var 로 선언된 전역 함수와 변수가 전역 개체의 속성이 됩니다.

  • 코드를 미래에 대비하고 이해하기 쉽게 만들려면 window.x 와 같이 전역 개체의 속성에 직접 액세스해야 합니다.

관련 기사