최근에 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); 여기에서 볼 수 있습니다:
코드 복사
jQuery 실제로 jQuery.fn.init()는 물체. 그러면 jquery.fn.init()는 무엇을 반환합니까?
코드 복사
}
}
은 여기서 나옵니다. , 자바스크립트 개체입니다.
여기서 문제가 발생합니다.
코드 복사
아래를 보세요:
코드를 복사하세요
이전의 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를 직접 확장하며 jQuery.fn.extends()는 분명히 확장된 프로토타입입니다.
이것이 jQuery.fn.extends()의 대부분의 메소드가 jQuery.extends()에서 나온 이유입니다.
여기서 jQuery.fn은 jQuery.fn.init.prototype에 할당됩니다.
그러면 다음과 같은 관계가 있습니다.
복사 코드