jQuery 의 prototype 과 fn 은 어떤 용도로 사용되는가?

jQuery 1.2.6 코드를 살펴보면, 아래와 같은 부분이 있다.

jQuery.fn = jQuery.prototype = {
    init: function( selector, context ) {
        // Make sure that a selection was provided
        selector = selector || document;
        ..........
    },
};

이 코드에 나와있는 prototype 과 fn 이,  jQuery 에서 하는 역할을 살펴보고자 한다.

모든 object 는 prototype 이라는 속성을 가지고 있다.

이것은 단순히 다른 오브젝트들이 상속받을 수 있는 속성이라고 보면 된다.

function Person(name) {
    this.name = name;
}
Person.prototype.sayHello = function () {
    alert(this.name + " says hello");
};

var james = new Person("James");
james.sayHello(); // Alerts "James says hello"

위의 예에서 보면, Person 은 생성자(Constructor) 함수인데, 이것은 new 연산자(operator)를 이용하여

인스턴스를 생성할 수 있다.

생성자 안에 있는 this 라는 키워드는 인스턴스를 참조하게 되는데, 

그래서 모든 인스턴스는 name 이라는 속성을 가지게 된다. 

이때, Person 의 prototype 은 모든 인스턴스에서 공통적으로 공유된다.

그래서, 모든 Person 의 인스턴스는 sayHello 라는 함수를 가지게 된다는 말이다. 

이렇게 Person 의 prototype 방식으로 sayHello 라는 함수를 정의하게되면, 메모리를 절약할 수 있다.

다시말해,  sayHello 함수를 Person 생성자 내에 정의하게 되면, 인스턴스를 생성할 때마다 

sayHello 함수가 정의되기 때문에 메모리 낭비를 초래하게되고, 중복되는 코딩이 생기게 된다.

그러므로, 인스턴스마다 차이가 없이 공통적으로 사용되는 함수를 prototype 에 정의해 두면,

메모리 낭비없이, 보다 빠르게.... 사용할 수 있다. 

참고로, prototype 과 fn 은 완전히 같은 것이고 단순히 키입력을 줄이기 위해 fn 으로 짧게 표시해도 된다. 

본 문서는, 아래 포스팅을 참고하여 번역한 것입니다.

http://stackoverflow.com/questions/13140292/what-does-prototype-mean-here-in-the-jquery-source-code