ID를 변수 이름으로 사용할 수 있습니까?

Question

내가 예를 들어, 요소의 ID와 동일한 이름의 변수를 설정하는 것이 편리 찾기 :

이는 크롬과 파이어 폭스,하지만 IE8에서 작동

randomDiv = document.getElementById("randomDiv"); 
    randomDiv.onclick = function(){ /* Whatever; */ } 
    randomDiv.property = "value"; 

; 오류가 발생하면 개체가이 속성 또는 메서드을 지원하지 않습니다.

요소 ID가 잘못된 (또는 나쁜 습관) 이름과 일치하는 변수를 만들거나 Internet Explorer의 다른 인스턴스가 작동합니까?

Answer 1

는 말할 어려울 수 있습니다 때문에 자동으로 나쁜 관행으로 간주됩니다 전역 변수를 만들기 : 당신이 document.getElementById를 를 입력 마음에 들지 않으면, 그냥 등을위한 작은 래퍼 함수를 ​​만들 어떤 코드에서는 그것이 목적에 맞는지 또는 어딘가에서 변수를 선언하는 것을 잊어 버렸습니다. 이 코드는 doesn’t work in ES5 strict mode과 같은 전역 변수를 자동으로 생성하며 향후 버전의 ECMAScript에서 단계적으로 제거 될 수 있습니다.

브라우저에서 JavaScript의 전역 범위는 실제로 window입니다. document을 참조하면 window.document이됩니다. 브라우저에서 전역 변수를 만드는 가장 좋은 방법은 window (Node.js의 global)에 추가하는 것입니다. 여기 an example from jQuery는 다음과 같습니다 window에

window.jQuery = window.$ = jQuery; 

일부 속성 (따라서 일부 글로벌 변수) 읽기 전용, 당신이 그들을 덮어 쓸 수 없습니다. window.document은 하나입니다 (크롬에서 테스트,이 모든 브라우저 별이며 변경 될 수 있습니다) :

window.document; // → Document 
window.document = 'foo'; // → "foo" // It worked! 
window.document; // → Document // Hmm, no it didn’t 

이 대부분의 브라우저는 문서의 각 ID에 대한 window (따라서 전역 변수)에 대한 속성을 만들 것으로 나타났다. 대부분의 브라우저는 읽기 전용으로 만 만들지는 않습니다. 사용자가 직접 브라우저를 덮어 쓸 수는 있지만 Internet Explorer는이를 덮어 쓸 수 있습니다.

JavaScript의 전역 변수가 위험 할 수있는 또 다른 이유는 ID 중 하나가 읽기 전용 window 속성 (현재 또는 일부 브라우저)과 일치 할 수 있기 때문입니다.

var은 전역 변수를 선언합니다 (함수 내부가 아님). 최상위 수준에 var document = 'foo'을 지정하면 오류가 발생하지 않지만 document은 여전히 ​​이되며 "foo"이 아닙니다.(ES5를 지원하는) 당신이 Object.defineProperty하여 자신의 읽기 전용 전역을 만들 수있는 새로운 틱 브라우저 : 여담으로

내가 당신을 위해 세 가지 옵션이있어

Object.defineProperty(window, 'foo', { value: 'bar', writable: false }); 
foo = 'baz'; 
foo; // → "bar" 

---

.

는

1. 해 두십시오 요소에 대한 전역 변수를 사용하지만, 이미 존재하는 경우 (코드 ES5와 명확하고 시원한 명시 적으로 window에 그들을 만드는) 그들을 내버려두고 :

   if (! window.randomDiv) { 
       window.randomDiv = document.getElementById('randomDiv'); 
   } 
   

2. 객체를 생성 , window에서 다른 라이브러리 또는 브라우저를 방해하지 않는 앱 자체 네임 스페이스로 사용할 수 있습니다. 이것은 자바 스크립트 파일을 통해 액세스 할 필요 특히, 일반 꽤 좋은 연습 간주됩니다

   // Early in your code… 
   window.Fantabulum = {}; 
   // Later on… 
   Fantabulum.randomDiv = document.getElementById("randomDiv"); 
   

3. 피가 전역을. 응용 프로그램의 코드가 (! 너무 다른 변수는 글로벌 아니며 동일한 제한이없는 이미이어야한다) 함수 내부에 있는지 확인하고 요소에 대한 변수를 선언 :

   (function(){ 
       var randomDiv = document.getElementById("randomDiv"); 
   })(); 
   

Answer 2

randomDiv은 정의 된/알려진 "전역 범위 변수"가 아닙니다.

Declaring global variable

Answer 3

는 요소 ID 및 이름과 같은 이름의 전역 변수를 생성하는 IE의 특질이다. 같은 이름으로 글로벌을 만들 수 있지만 그와 관련된 단점이 있습니다.

꽤 끔찍한 생각입니다. 찾고,

funciton get(id) { 
    return typeof id == 'string'? document.getElementById(id) : id; 
}