jQuery.fn과 jQuery.prototype_jquery의 차이점 소개

최근에 jQuery의 소스 코드를 읽었습니다.

여기서 이해하기 어려운 점이 있습니다.

여기서 jQuery, jQuery.fn, jQuery,fn,init, jQuery,prototype은 무엇을 의미합니까?

jQuery의 소스 코드가 어떻게 정의되어 있는지 살펴보겠습니다.

코드 복사 코드는 다음과 같습니다. :

(function( window, undefine ) {

var jQuery = (function() {
// jQuery 객체 생성
var jQuery = function( selector, context ) {
return new jQuery.fn.init( selector, context, rootjQuery );
}

// jQuery 객체 프로토타입
jQuery.fn = jQuery.prototype = {
constructor: jQuery ,
init: function( selector, context, rootjQuery ) {
// 할 일
}
}// 초기화 함수에 jQuery 제공 나중에 인스턴스화하기 위한 프로토타입
jQuery.fn.init.prototype = jQuery.fn

// 콘텐츠를 첫 번째 매개변수에 병합하면 대부분의 후속 함수는 이 함수를 통해 확장됩니다.
// jQuery를 통해. fn .extend로 확장된 대부분의 함수는 jQuery.extend로 확장된 동일한 이름의 함수를 호출합니다.
jQuery.extend = jQuery.fn.extend = function() {}

// Expand static on jQuery Method
jQuery.extend({
// Something to do
})

// 이 시점에서 jQuery 객체 생성이 완료되었으며, 다음 코드는 다음과 같습니다. jQuery 또는 jQuery 객체 Extension

})();

window.jQuery = window.$ = jQuery
})(window); 여기에서 볼 수 있습니다:

코드 복사

코드는 다음과 같습니다: var jQuery = function ( selector, context ) { return new jQuery.fn.init( selector, context, rootjQuery ) }

jQuery 실제로 jQuery.fn.init()는 물체. 그러면 jquery.fn.init()는 무엇을 반환합니까?

코드 복사

코드는 다음과 같습니다. jQuery.fn = jQuery.prototype = { 생성자: jQuery, init: function( selector, context, rootjQuery ) { // 할 일

}

}


은 여기서 나옵니다. , 자바스크립트 개체입니다.

여기서 문제가 발생합니다.

코드 복사

코드는 다음과 같습니다. jQuery.fn = jQuery.prototype 그런 다음 jQuery의 프로토타입 객체가 jQuery.fn에 할당됩니다.

아래를 보세요:

코드를 복사하세요

코드는 다음과 같습니다: jQuery.fn.init.prototype = jQuery.fn 이거 보니 생각이 나네요. jQuery.fn.init.prototype에 jQuery.fn을 주면 됩니다.

이전의 jQuery.fn.init.prototype은 무엇이었나요?

그렇지 않나요? 이때 프로토타입은 {}입니다.

이므로 init 외부에서 메서드를 호출할 수 있습니다. 방금 프로세스를 수행했습니다.

jQuery.fn을 jQuery.fn.init.prototype에 할당합니다. 이 경우

jQuery.fn.init.prototype의 프로토타입, 즉 jQuery의 프로토타입 객체는 jQuery입니다. .fn(참고 jQuery = function(return new jQuery.fn.init())).

값을 할당한 후. 호출 시 init에 메소드가 없으면 프로토타입 함수에서 호출됩니다.

그렇다면.

다음과 같이 생각할 수도 있습니다.




코드 복사

코드는 다음과 같습니다. jQuery.extends() jQuery.fn.extends()

둘의 차이점을 이해하셔야 할 것 같습니다.

jQuery.extends()는 jQuery를 직접 확장하며 jQuery.fn.extends()는 분명히 확장된 프로토타입입니다.

이것이 jQuery.fn.extends()의 대부분의 메소드가 jQuery.extends()에서 나온 이유입니다.

여기서 jQuery.fn은 jQuery.fn.init.prototype에 할당됩니다.

그러면 다음과 같은 관계가 있습니다.




복사 코드

코드는 다음과 같습니다. jQuery.prototype = jQuery.fn = jQuery.fn.init.prototype