이 JavaScript / jQuery 구문은 어떻게 작동합니까 : (function (window, undefined) {}) (window)?

jQuery 1.4 소스 코드를 살펴본 후 다음과 같은 방식으로 캡슐화되는 방법을 살펴 보았다.

(function( window, undefined ) {

  //All the JQuery code here 
  ...

})(window);

JavaScript Namespacing 에 대한 기사 와 " Parens of Parens "라는 다른 기사를 읽었 으므로 여기서 무슨 일이 일어나고 있는지 알 수 있습니다.

그러나 나는이 특정 구문을 본 적이 없다. 무엇이다 undefined이 일을? 그리고 왜 window지나 가서 다시 끝에 나타나야 하는가?

정의되지 않은 변수는 일반 변수이며으로 간단히 변경할 수 있습니다 undefined = "new value";. 따라서 jQuery는 정의되지 않은 로컬 "정의되지 않은"변수를 만듭니다.

창 변수는 성능상의 이유로 로컬로 만들어집니다. JavaScript는 변수를 찾을 때 변수 이름을 찾을 때까지 로컬 변수를 먼저 통과합니다. 발견되지 않으면 JavaScript는 전역 변수를 통해 필터링 할 때까지 다음 범위 등을 거칩니다. 따라서 창 변수를 로컬로 만들면 JavaScript가 더 빨리 찾을 수 있습니다. 추가 정보 : JavaScript 속도 향상-Nicholas C. Zakas

찾으시는 주소가 없습니다

undefined인수 로 선언 하지만 값을 전달하지 않으면 전역 범위에서 단순히 덮어 쓸 수있는 변수이기 때문에 항상 정의되지 않습니다. 이렇게하면 몇 가지 문자를 절약 할 수 a === undefined있는 안전한 대안이됩니다 typeof a == 'undefined'. 또한 코드를 더 undefined축소하기 쉽게 만들 수 있습니다. u예를 들어 몇 문자를 더 절약 할 수 있습니다.

창문

window인수로 전달 하면 로컬 범위에 사본이 보관되어 성능에 영향을줍니다 ( http://jsperf.com/short-scope) . 에 대한 모든 액세스 window는 이제 스코프 체인보다 한 단계 아래로 이동해야합니다. 와 마찬가지로 undefined로컬 사본을 다시 사용하면보다 적극적인 축소가 가능합니다.

사이드 노트 :

이것이 jQuery 개발자의 의도가 아닐 수도 있지만, 전달 window하면 라이브러리가 서버 측 자바 스크립트 환경 (예 : 전역 객체 가없는 node.js)에보다 쉽게 통합 될 수 있습니다 window. 이러한 상황에서는 한 줄만 변경하면 window개체를 다른 줄로 바꿀 수 있습니다 . jQuery의 경우 windowHTML 스크래핑 목적으로 모의 객체를 생성하고 전달할 수 있습니다 ( jsdom 과 같은 라이브러리 가이를 수행 할 수 있음).

다른 사람들은 설명했다 undefined. undefined모든 값으로 재정의 할 수있는 전역 변수와 같습니다. 이 기술은 누군가가 누군가 undefined = 10어딘가에 썼다면 정의되지 않은 모든 검사가 중단되는 것을 방지하는 것 입니다. 전달되지 않은 인수 undefined는 변수 의 값에 관계없이 실제 값 이어야 합니다undefined .

창을 통과 한 이유는 다음 예에서 설명 할 수 있습니다.

(function() {
   console.log(window);
   ...
   ...
   ...
   var window = 10;
})();

콘솔 로그는 무엇입니까? window객체 의 가치가 맞습니까? 잘못된! 10? 잘못된! 기록 undefined합니다. Javascript 인터프리터 (또는 JIT 컴파일러)는 다음과 같이 다시 작성합니다.

(function() {
   var window; //and every other var in this function

   console.log(window);
   ...
   ...
   ...
   window = 10;

})();

그러나 window변수를 인수로 사용하면 var가 없으므로 놀라움이 없습니다.

jQuery가 그것을하고 있는지 모르겠지만 window어떤 이유로 든 함수의 어느 곳에서나 지역 변수를 재정의하는 경우 전역 범위에서 빌려주는 것이 좋습니다.

window누군가가 IE에서 창 객체를 재정의하기로 결정한 경우와 같이 전달됩니다 undefined. 나중에 나중에 다시 할당 될 경우를 위해 동일하다고 가정합니다 .

이 window스크립트 의 최상위 는 "window"라는 인수의 이름을 지정하는 것입니다. 전역 window참조와이 클로저 내부의 코드에서 사용하는 것 보다 더 로컬 인 인수입니다 . window끝에 실제로이 경우, 첫 번째 인수에 대한 현재의 의미를 전달하는 것을 지정하는 것입니다 window희망은 당신이 망쳐하지 않은 것입니다 ... window그런 일이 전에.

이 플러그인, jQuery를에 사용되는 가장 일반적인 경우를 보여줌으로써 생각하는 것이 더 쉬울 수 있습니다 .noConflict()그래서 당신은 여전히 사용할 수있는 코드의 대부분, 처리 $뭔가 의미 경우에도, 다른 이상 jQuery이 범위 밖에서 :

(function($) {
  //inside here, $ == jQuery, it was passed as the first argument
})(jQuery);

1000000 회 반복 테스트되었습니다. 이러한 종류의 지역화는 성능에 영향을 미치지 않았습니다. 1000000 반복에서 단일 밀리 초조차도 아닙니다. 이것은 단순히 쓸모가 없습니다.