js의function.prototype jQuery에서의 활용

1828 단어
jQuery 원본에서 jQuery는 하나의 구조 함수이다. 이 특수한 구조 함수로 인해'jQuery()'는 jQuery의 대상을 구성할 수 있다.'new jQuery()'를 사용하지 않아도 jQuery의 구조 함수는 매우 특수하다. 오늘 한 대신의 박문을 보고 많은 것을 얻었다. 오늘 이 노트를 정리하여 썼다.오늘은 내가 처음으로 js에서this의 매력을 느꼈다.
jQuery              


(function(window){

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

  jQuery.fn = jQuery.prototype = {    //jQuery    .
        b:3
    };
    //  jQuery     init  .
    var init = jQuery.fn.init = function( selector, context, root ){ 
        this.a = 3;
    }
    //  window       jQuery  ,      .
    window.$ = window.jQuery = jQuery;
    
})(window)

console.log($().a) //3
console.log($().b) //   undefined


문제가 발생했습니다. new jQuery.fn.init( selector, context )
문장은 jQuery를 사용하지 않습니다.prototype 아래의 속성을 초기화합니다. 단지
init 함수 아래의 속성이 초기화되었고 문제가'init.prototype'에 발생했습니다.

     

init.prototype = jQuery.fn;


이렇게 완전한 코드는 다음과 같아야 한다.

(function(window){

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

  jQuery.fn = jQuery.prototype = {    //jQuery    .
        b:3
    };
    //  jQuery     init  .
    var init = jQuery.fn.init = function( selector, context, root ){ 
        this.a = 3;
    }
    // jQuer.prototype    init.prototype
    init.prototype = jQuery.fn;

    //  window       jQuery  ,      .
    window.$ = window.jQuery = jQuery;
    
})(window)

console.log($().b) //3


init가 바뀌었어요.prototype 후 출력이 정상입니다.
js 구조 함수에서this는 구조의 새로운 대상을 가리키기 때문에 init 함수 아래에서 정의합니다
a 속성은 대상에서 찾을 수 있지만 init.prototype은 jquery가 아닙니다.prototype 그래서
새 대상은 jquery를 가지지 않습니다.prototype 아래에 대량의 중요한 방법과 속성이 있습니다.

좋은 웹페이지 즐겨찾기