jQuery 생성자 분석_jquery에 대한 간략한 토론

지난 기사에서 jQuery의 일반적인 프레임워크에 대해 설명했습니다. 모든 코드는 자체 호출 익명 함수로 작성되었으며 창 개체가 전달된다는 것을 알고 있습니다. 소스 코드는 다음과 같습니다.

(function( window, undefined ) {...})( window );

Alert(jquery)를 통해 객체라는 것을 알 수 있는데, 이 객체는 어떻게 구성되나요? $(document)와 유사한 작성 방법을 사용하여 일반 메서드를 직접 호출하는 것처럼 요소를 얻습니다. jQuery가 일반 함수인가요? 생성자라면 왜 new $(document) 의 일반적인 형태가 아닌가?

사실 jQuery는 객체 지향 js 라이브러리이며 생성자도 있습니다. jQuery 메소드가 호출될 때마다 jQeury 객체가 인스턴스화되지만 jQuery가 작성되는 방식은 매우 영리합니다.

우선 js 객체지향에 대해 이야기해보겠습니다. js는 객체지향 언어는 아니지만 객체지향 작성 방법이 많이 있습니다. Turing의 객체지향 프로그래밍 부분을 살펴보는 것이 좋습니다. "자바스크립트 고급 프로그래밍". 많은 방법 중에서 가장 일반적으로 사용되는 작성 방법은 구성 + 프로토타입 방법입니다. 예를 들면 다음과 같습니다.

var Person=function(name,age){
  this.name=name;
  this.age=age;
}
Person.prototype={
 constructor:Person,
 init:function(msg){
  this.say(msg);
 },
 say:function(msg){
 alert(this.name+'说'+msg);
 }
};
var tom=new Person('tom',23); 
tom.init('你好');// tom说你好

실제로 jQuery에서도 이 방법을 사용하지만, 좀 더 스마트한 작성 방식을 사용합니다. jQuery의 생성자 간의 차이점을 살펴보겠습니다

// Define a local copy of jQuery
var jQuery = function( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
return new jQuery.fn.init( selector, context, rootjQuery );
},

소스 코드를 보면 jQuery의 실제 함수가 init 메소드임을 알 수 있습니다. jQuery를 호출하면 new jQuery() 대신 new init()의 결과가 직접 반환됩니다.

jQuery.fn이 무엇인가요? 나중에 이 코드를 살펴보겠습니다

jQuery.fn = jQuery.prototype = {...

사실 jQuery.fn이 프로토타입 객체인데, 이는 실제 생성자인 jQuery 프로토타입에 init 메소드가 있다는 뜻입니다. 이 방식으로 작성하면 $().init()와 같은 작업을 작성할 필요가 없고 직접 초기화된다는 장점이 있습니다. 그러나 또 다른 문제가 있습니다. init가 생성자이므로 우리가 작성하는 메서드 인스턴스입니다. jQuery를 호출할 수 없나요? 당연히 init의 인스턴스화는 init 메서드만 호출할 수 있습니다.

// Give the init function the jQuery prototype for later instantiation
jQuery.fn.init.prototype = jQuery.fn;

앞서 jQuery.fn=jQuery.protype을 언급했는데, 이는 jQuery의 프로토타입 객체가 init의 프로토타입에 할당된다는 의미이므로 jQuery의 프로토타입 메서드가 자연스럽게 init에서 사용 가능하게 된다는 의미입니다. 이 방법은 매우 간단하며 new jQuery() 작업이나 수동 초기화가 필요하지 않습니다. 일반 함수를 호출하는 것만큼 간단합니다.