jQuery.fn 살펴보기: 프로토타입의 별칭

jQuery 라이브러리 내에서 수수께끼의 jQuery.fn을 만날 수 있습니다. 이 신비한 fn은 무엇을 의미하며 어떤 용도로 사용됩니까?

프로토타입의 역할

JavaScript 영역에서 프로토타입 속성은 생성자 함수. 특정 생성자를 사용하여 인스턴스를 생성하면 해당 인스턴스는 생성자의 프로토타입에서 속성과 메서드를 상속합니다.

생성자로서의 jQuery

마찬가지로 jQuery 식별자(또는 $)는 생성자 함수 역할을 합니다. 생성된 모든 jQuery 개체는 jQuery 생성자의 프로토타입을 상속합니다. 이 프로토타입은 fn 속성을 통해 액세스할 수 있으며, 본질적으로 jQuery.fn은 jQuery.prototype의 별칭이 됩니다.

예제를 통한 심층 살펴보기

이 개념을 설명하려면, 간단한 생성자 함수를 만들어 보겠습니다:

function Test() {
  this.a = 'a';
}
Test.prototype.b = 'b';

var test = new Test();

이 예에서 인스턴스 테스트는 Test 생성자의 프로토타입에서 속성 b를 상속합니다.

jQuery Architecture and Extensions

jQuery의 내부 작동은 다음 생성자-프로토타입 구조와 유사합니다.

(function() {
  var foo = function() { // core constructor
    // ...
  };

  foo.fn = foo.prototype = {
    init: function () { /*...*/ }
    // ...
  };

  window.foo = foo;
})();

jQuery 내에서 fn 속성을 통해 프로토타입에 확장 기능을 추가할 수 있으므로 사용자 정의 기능으로 jQuery 객체를 향상시킬 수 있습니다.