programing tip

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

itbloger 2020. 6. 8. 21:00
반응형

이 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하면 라이브러리가 서버 측 Javascript 환경 (예 : 전역 객체 가없는 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그런 일이 전에.

This may be easier to think of by showing the most typical case used in jQuery, plugin .noConflict() handling, so for the majority of code you can still use $, even if it means something other than jQuery outside this scope:

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

Tested with 1000000 iterations. This kind of localization had no effect in performance. Not even a single millisecond in 1000000 iterations. This is simply useless.

참고URL : https://stackoverflow.com/questions/2716069/how-does-this-javascript-jquery-syntax-work-function-window-undefined

반응형