me_javascript 기술로 javascript 전역 변수 배우기

1. 전역 객체를 최대한 적게 사용하세요

전역 변수의 문제점은 JavaScript 애플리케이션과 웹 페이지의 모든 코드가 이러한 전역 변수를 공유하므로 동일한 전역 네임스페이스에 있으므로 프로그램의 서로 다른 두 부분이 동일한 이름을 정의하지만 기능이 서로 다르다는 것입니다. 전역 변수에서는 이름 충돌이 불가피합니다.

또한 웹페이지에는 페이지 개발자가 작성하지 않은 코드가 포함되어 있는 경우가 많습니다. 예:

• 타사 JavaScript 라이브러리
• 광고주의 스크립트 코드
• 타사 사용자 추적 및 분석 스크립트 코드
• 다양한 유형의 위젯, 플래그 및 버튼

예를 들어 타사 스크립트는 result라는 전역 변수를 정의한 다음 함수에 result라는 전역 변수도 정의합니다. 결과적으로 나중 변수가 이전 변수를 덮어쓰고 타사 스크립트가 갑자기 트림됩니다!

실수로 코드 어딘가에서 전역 변수를 수정하면 해당 전역 변수에 의존하는 다른 모듈에서 오류가 발생하기 때문입니다. 게다가 오류의 원인을 디버깅하고 찾아내기도 어렵습니다.

게다가 웹페이지를 실행하려면 윈도우 객체를 사용해야 하고, 브라우저 엔진이 윈도우의 속성을 다시 순회해야 하므로 성능이 저하됩니다.

• 전역 변수는 서로 다른 모듈 간의 링크입니다. 모듈은 전역 변수를 통해 서로 제공되는 기능에만 액세스할 수 있습니다.
• 로컬 변수를 사용할 수 있으면 전역 변수를 사용하지 마세요

var i,n,sum//globals
function averageScore(players){
 sum =0;
 for(i = 1, i = player.length; i<n; i++){
  sum += score(players[i]);
 }
 return sum/n;
}

이러한 변수를 로컬에 유지하고 이를 사용해야 하는 코드의 일부로만 사용하세요.

function averageScore(players){
var i,n,sum;
 sum =0;
 for(i = 1, i = player.length; i<n; i++){
  sum += score(players[i]);
 }
 return sum/n;
}

브라우저에서 this 키워드는 전역 창 개체를 가리킵니다
JavaScript의 전역 네임스페이스는 프로그램의 전역 범위에서 액세스할 수 있는 전역 객체로도 노출되며, 이는 this 키워드의 초기 값 역할을 합니다. 웹 브라우저에서 전역 개체는 전역 창 변수에 바인딩됩니다. 전역 변수를 추가하거나 수정하면 전역 개체가 자동으로 업데이트됩니다.

this.foo; //undefined
foo ="global foo"; //"global foo"
this.foo; //"global foo"

마찬가지로 전역 개체를 업데이트하면 전역 네임스페이스도 자동으로 업데이트됩니다.

var foo ="global foo";
this.foo; //"global foo"
this.foo ="changed";
foo; //"changed"

전역 객체를 변경하는 두 가지 방법, var 키워드를 통해 선언하고 전역 객체에 속성을 설정하는 방법(this 키워드를 통해)

전역 객체를 사용하여 현재 실행 중인 환경에 대한 기능 감지(FeatureDetection)를 수행합니다. 예를 들어 ES5는 JSON 데이터를 조작하기 위해 JSON 객체를 제공한 다음 if(this.JSON)를 사용하여 현재 실행 중인 환경인지 여부를 확인할 수 있습니다. JSON을 지원합니다

if(!this.JSON){
 this.JSON ={
  parse:...,
  stringify:...
 }
}

2. 전역변수를 피하는 방법

방법 1: 전역 변수를 하나만 생성합니다.

MYAPP.stooge = {
 "first-name": "Joe",
 "last-name": "Howard"
};

MYAPP.flight = {
 airline: "Oceanic",
 number: 815,
 departure: {
  IATA: "SYD",
  time: "2004-09-22 14:55",
  city: "Sydney"
 },
 arrival: {
  IATA: "LAX",
  time: "2004-09-23 10:42",
  city: "Los Angeles"
 }
};

방법 2: 모듈 모드 사용

var serial_maker = function ( ) {

// Produce an object that produces unique strings. A
// unique string is made up of two parts: a prefix
// and a sequence number. The object comes with
// methods for setting the prefix and sequence
// number, and a gensym method that produces unique
// strings.

 var prefix = '';
 var seq = 0;
 return {
  set_prefix: function (p) {
   prefix = String(p);
  },
  set_seq: function (s) {
   seq = s;
  },
  gensym: function ( ) {
   var result = prefix + seq;
   seq += 1;
   return result;
  }
 };
}( );

var seqer = serial_maker( );
seqer.set_prefix = 'Q';
seqer.set_seq = 1000;
var unique = seqer.gensym( ); // unique is "Q1000"

소위 모듈 모드는 전용 변수와 권한 있는 개체를 포함하는 함수를 만드는 것입니다. 권한 있는 개체의 내용은 전용 변수에 액세스할 수 있다는 것입니다. closures.function을 사용하고 마지막으로 권한 있는 객체를 반환합니다.

우선 두 번째 방법은 전역 변수로 사용할 수 있을 뿐만 아니라 전역 변수를 로컬에서 선언하는 데에도 사용할 수 있습니다. 왜냐하면 알 수 없는 곳에서 seqer를 수정하더라도 문자열이 아닌 객체이기 때문에 즉시 오류가 보고되기 때문입니다.

방법 3: 전역 변수 0개

제로 전역 변수는 실제로 닫힌 코드의 작은 부분에 적용하기 위해 채택된 지역 변수 처리 방법이며 일부 특수 시나리오에만 사용하기에 적합합니다. 가장 일반적인 것은 다른 스크립트에서 액세스할 수 없는 완전히 독립적인 스크립트입니다.
전역 변수를 0으로 사용하려면 즉시 실행 기능을 사용해야 합니다. 사용법은 다음과 같습니다.

( function ( win ) {

 'use strict' ;
 var doc = win.document ;
 //在此定义其他的变量并书写代码
} )

3. 예상치 못한 전역 변수

자바스크립트의 두 가지 특성으로 인해 무의식적으로 전역 변수를 생성하는 것은 놀라울 정도로 쉽습니다. 첫째, 변수를 선언하지 않고도 사용할 수 있습니다. 둘째, JavaScript에는 암시적 전역 개념이 있습니다. 즉, 선언하지 않은 모든 변수는 전역 객체 속성이 됩니다. 아래 코드를 참고하세요:

function sum(x, y) {
 // 不推荐写法: 隐式全局变量
 result = x + y;
 return result;
}

이 코드의 결과는 선언되지 않았습니다. 코드는 여전히 잘 작동하지만 함수를 호출한 후에는 추가 전역 네임스페이스가 생겨 문제의 원인이 될 수 있습니다.

향상된 sum() 함수에서 볼 수 있듯이 경험적으로 항상 var를 사용하여 변수를 선언하는 것이 좋습니다.

function sum(x, y) {
 var result = x + y;
 return result;
}

암시적 전역 변수 생성에 대한 또 다른 반례는 부분 var 선언에 작업 체인을 사용하는 것입니다. 다음 스니펫에서 a는 지역 변수이지만 b는 전역 변수이므로 아마도 원하는 바가 아닐 것입니다.

// 反例，勿使用
function foo() {
 var a = b = 0;
 // ...
}

此现象发生的原因在于这个从右到左的赋值，首先，是赋值表达式b = 0，此情况下b是未声明的。这个表达式的返回值是0，然后这个0就分配给了通过var定义的这个局部变量a。换句话说，就好比你输入了：

var a = (b = 0);
如果你已经准备好声明变量，使用链分配是比较好的做法，不会产生任何意料之外的全局变量，如：

function foo() {
 var a, b;
 // ... a = b = 0; // 两个均局部变量
}

然而，另外一个避免全局变量的原因是可移植性。如果你想你的代码在不同的环境下（主机下）运行，使用全局变量如履薄冰，因为你会无意中覆盖你最初环境下不存在的主机对象

  总是记得通过var关键字来声明局部变量

 使用lint工具来确保没有隐式声明的全局变量

以上就是对javascript的全局变量介绍，希望对大家的学习有所帮助。