jquery 원본 학습 노트 3: jQuery 공장 분석

jquery 원본 학습 노트 2: jQuery 공장
jquery 원본 학습 노트 1: 전체 구조
지난 두 편에서query의 핵심은 jQuery 공장이라고 말했다.그 코드는 다음과 같다

function( window, noGlobal ) {

    var jQuery = function( selector, context ) {//        jQuery。  ， jQuery           ，            jQuery $
        return new jQuery.fn.init( selector, context );
    };

    /*  ，     jQuery        、  */
    jQuery.fn = jQuery.prototype = {
        //...
    };
    jQuery.extend = jQuery.fn.extend = function() {
        //...
    };
    var init = jQuery.fn.init = function( selector, context, root ) {
        //...
    };
    init.prototype = jQuery.fn;
    jQuery.extend({
        //...
    });
    jQuery.fn.extend({
        //...
    });

    if ( !noGlobal ) {//  ，   jQuery     ，         “$”
        window.jQuery = window.$ = jQuery;
    }

    return jQuery;
}

사실 현재로서는 가장 이해하기 어려운 것이 바로 이것이다.

var jQuery = function( selector, context ) {
        return new jQuery.fn.init( selector, context );
    };

어떻게 손자를 할아버지께 드렸을까?닭이 먼저냐 알이 먼저냐?
사실은요, 이렇게 봐야 해요.

//            ，     ，           
var jQuery = function( selector, context ) {
        ……
    };

그래, 두 번째 의문은 왜 new jQuery.fn.init( selector, context );이런 실례를 jQuery에게 부여합니까?
왜냐하면 new는 jQuery에게 주고 이렇게 jQuery를 호출할 때 new를 사용하지 않고 간결하게 하기 때문이다.

function( window, noGlobal ) {

    var jQuery = function( selector, context ) {
        return new jQuery.fn.init( selector, context );
    };

    ……

    if ( !noGlobal ) {
        window.jQuery = window.$ = jQuery;
    }

    return jQuery;
}

위 코드에서 알 수 있듯이, jQuery는 이미 new에서 나온 대상이다.이렇게 하면, 우리가 jQuery를 사용할 때, new는 없습니다. 바로 $입니다.또는 $(") 이렇게 사용합니다.
아래를 보면 다음과 같다.

jQuery.fn = jQuery.prototype = {
        //...
    };

왜 이렇게 써요?무슨 현묘함이 있습니까?아니면 순전히 억지를 부리기 위해서?정말 원형 프로토타입을 fn에 부여하는 것은 약자로서'프로토타입'이라고 쓰지 않아도 된다.
네 번째 의혹:

    jQuery.fn = jQuery.prototype = {
        //...
    };
    jQuery.extend = jQuery.fn.extend = function() {
        //...
    };
    jQuery.extend({
        //...
    });
    jQuery.fn.extend({
        //...
    });

jQuery.extend 및 jQuery.fn.extend는 뭐가 달라요?
다르지.jQuery.extend 확장 (말 그대로) 은 실례이고, jQuery.fn.extend 확장은 원형입니다.실례를 확장하고 작용은 실례에만 한정한다.원형을 확장하지만 모든 실례를 혜택할 수 있다.원형을 확장하여 메모리를 절약할 수 있다.잠깐만, jQuery는 실례가 하나밖에 없잖아?
아니야,

var jQuery = function( selector, context ) {
        return new jQuery.fn.init( selector, context );
    };

jQuery는 같은 매개 변수와 달리 여러 가지 실례가 있습니다.예를 들어, $("div")와 $("#div1")는 서로 다른 인스턴스입니다.
의심5:

    var init = jQuery.fn.init = function( selector, context, root ) {
        //...
    };
    init.prototype = jQuery.fn;

왜 jQuery의 원형(jQuery.fn)을 손자(jQuery.fn.init)의 원형으로 덮어씁니까?이렇게 쓰지 않으면 jQuery가 jQuery를 사용할 수 없기 때문이라고 대답했다.fn, 일련의 원형 확장: jQuery.fn.extend () 는 모두 헛수고입니다.왜냐하면

var jQuery = function( selector, context ) {
        return new jQuery.fn.init( selector, context );
    };

이 함수가 실제로 실행되면 jQuery는 손자의 실례로 바뀌기 때문에 정의 단계에서 손자의 원형에 확장을 적용해야 한다는 뜻이다.그렇다면 왜 손자의 원형을 직접 확장하지 않았을까. 굳이 할아버지의 원형을 확장해서 손자의 원형을 덮어주고 손자의 실례를 만들어 할아버지께 드려야 하는가?젠장맞아.오락가락하는 것은 아마도 간결하고 좀 읽을 만해 보이기 위해서일 것이다.봐라, 손자의 이름은 init이다.
전재 대상:https://www.cnblogs.com/leftfist/p/6808670.html