>웹 프론트엔드 >JS 튜토리얼 >jQuery.fn은 무엇이며 어떻게 작동하나요?

jQuery.fn은 무엇이며 어떻게 작동하나요?

DDD
DDD원래의
2024-11-05 03:57:02353검색

What is jQuery.fn and How Does It Work?

jQuery.fn: jQuery의 프로토타입 앨리어싱

jQuery에서 jQuery.fn.jquery에서 발견되는 "fn"이라는 용어는 jQuery 생성자 함수의 프로토타입 속성에 대한 별칭($)입니다. 이를 이해하려면 JavaScript의 생성자 함수 개념을 이해하는 것이 중요합니다.

생성자 함수는 객체의 인스턴스를 생성하는 데 사용되며, 각 객체는 생성자의 프로토타입에서 속성과 메서드를 상속받습니다. jQuery의 경우 $ 식별자는 생성자 함수 역할을 합니다.

예를 들어 다음 생성자 함수를 고려해 보세요.

<code class="javascript">function Test() {
  this.a = 'a';
}
Test.prototype.b = 'b';

var test = new Test(); 
test.a; // "a", own property
test.b; // "b", inherited property</code>

Test 생성자 함수는 해당 프로토타입에서 상속되는 인스턴스 테스트를 생성합니다. . 테스트 인스턴스에는 자체 속성 a가 있고 b는 프로토타입에서 상속됩니다.

마찬가지로 jQuery는 비슷한 접근 방식을 따릅니다.

<code class="javascript">(function() {
  var foo = function(arg) { // core constructor
    // ensure to use the `new` operator
    if (!(this instanceof foo))
      return new foo(arg);
    // store an argument for this example
    this.myArg = arg;
    //..
  };

  // create `fn` alias to `prototype` property
  foo.fn = foo.prototype = {
    init: function () {/*...*/}
    //...
  };

  // expose the library
  window.foo = foo;
})();

// Extension:

foo.fn.myPlugin = function () {
  alert(this.myArg);
  return this; // return `this` for chainability
};

foo("bar").myPlugin(); // alerts "bar"</code>

여기서 fn 별칭은 프로토타입의 프로토타입을 가리킵니다. foo 생성자 함수. fn 속성을 확장하면 foo 생성자의 모든 인스턴스에 새 메서드(예: 예제의 myPlugin)를 추가할 수 있습니다.

위 내용은 jQuery.fn은 무엇이며 어떻게 작동하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.