jQuery 소스 구조분석 2. 함수 객체, $

jQuery 소스 코드의 전체 구조를 살펴보자.

오픈소스를 제대로 분석하려면 무엇보다 전체적인 구조를 파악해야 한다.

---

2. jQuery 함수 객체

jQuery 실질적인 함수 객체인 익명 함수를 살펴보자.

1) var jQuery

(Code Line: 70 ~ 74)
var jQuery = function( selector, context ) {
    
    return new jQuery.fn.init( selector, context );
 
}

내부 코드에서는 jQuery.fn.init 생성자 함수를 new keyword를 통해 객체를 생성하여 넘겨준다.

즉, jQuery(...)를 하면 객체 하나가 리턴된다는 것을 알고 있자.

 

함수를 참조하는 변수 jQuery는 IIFE에 의해 닫힌 스코프에서 선언된 변수다.

일반적으로 내부 스코프, 닫힌 스코프에서 선언된 변수는 외부에서 접근할 수 없다.

---

2) 전역 변수 $, jQuery

전역 객체(window)의 $, jQuery 프로퍼티에 jQuery 함수를 참조한다.

(Code Line: 10342 ~ 10344)
if (  /*... code/*/ ){
    
    window.jQuery = window.$ = jQuery;
 
}

전역 객체의 프로퍼티가 된다는 것은 전역 변수가 된다는 의미이다.

이후 JavaScript에서는 jQuery(...), $(...)를 통해 접근할 수 있다.

 

이러한 원리 덕분에 $(...) 형태로 축약해서 JQuery의 기능을 호출할 수 있다.

---

 

by 소년코딩

추천은 글쓴이에게 큰 도움이 됩니다.

악플보다 무서운 무플, 댓글은 블로그 운영에 큰 힘이됩니다.