javascript_jquery_basic_4_1a

$(selector)는 어떻게 동작하는가?

'$'변수

// jQuery-3.2.1.js - Code Line 10246
window.jQuery = window.$ = jQuery;

jQuery와 $는 동일한 변수다

jQuery 소스 코드 분석 2. 함수 객체 $

'jQuery' 변수

// jQuery-3.2.1.js - Code Line 94
var jQuery = function( selector, context ) {
    return new jQuery.fn.init( selector, context );
},

jQuery 변수는 jQuery.fn.init 생성자를 호출하여 새로운 인스턴스를 생성하여 반환하는 함수로 정의되어 있다. (new를 사용하는 함수이므로 생성자로 부른다)

Help understanding jQuery's jQuery.fn.init Why is init in fn

jQuery.fn ?

jQuery.fn은 jQuery.prototype의 별칭이다. 이것은 미학적이며 조금만 타이핑을 해도된다.

What does jQuery.fn mean?
Why jQuery do this: jQuery.fn.init.prototype = jQuery.fn?

jQuery.fn.init 생성자

// jQuery-3.2.1.js - Code Line 2960
init = jQuery.fn.init = function( selector, context, root ) {
	var match, elem;

    // HANDLE: $(""), $(null), $(undefined), $(false)
    if ( !selector ) {
        return this;
    }

    // Handle HTML strings
    if ( typeof selector === "string" ) {
        // ... more code
    }

    // ...
    return jQuery.makeArray( selector, this );
};

// jQuery-3.2.1.js - Code Line 3060
init.prototype = jQuery.fn;

jQuery.fn.init 생성자는 jQuery.prototype 객체와 selector로 전달된 DOM 요소의 검색 결과를 포함하여 반환한다. init 함수의 prototype 객체는 jQuery.fn 객체를 가리키도록 설정되어 있다.

즉, 다음과 같은 구조가 형성된다.

정리하면, $("p")를 실행하면 jQuery.fn.init 인스턴스가 생성되며 내부에는 검색된 DOM 요소를 가지게 되고, init.prototype은 jQuery.fn를 가리키므로 jQuery 객체의 메서드를 사용할 수 있게 된다. (프로토타입 기반의 함수 공유)

자바스크립트의 생성 규칙은 모든 객체는 자신을 생성한 생성자 함수의 prototype 프로퍼티가 가리키는 prototype 객체를 자신의 __proto__ 프로퍼티로 연결한다.

// redColor() 동작 과정
(function($) {
  $.fn.redColor = function() {
    // this === jQuery.fn.init 객체
    this.each(function(index) {
      // this === DOM 요소 (p)
      // $(DOM Element) 형태로 다시 검색
      // jQuery-3.2.1.js - Code Line 3041
      // HANDLE: $(DOMElement) {...} 부분에서 해당 DOM 요소포함한 jQuery.fn.init 객체를 반환
      $(this).css("border", "4px solid #f00");
    })
    // 메서드 체인닝 호출을 위해 this 리턴
    return this;
  }
})(jQuery);

redColor() 예제 다시보기

jQuery.fn.each() & jQuery.each()

// jQuery.fn.each
// jQuery-3.2.1.js - Code Line 156
each: function( callback ) {
    return jQuery.each( this, callback );
},

// jQuery.each
// jQuery-3.2.1.js - Code Line 356
each: function( obj, callback ) {
    var length, i = 0;

    if ( isArrayLike( obj ) ) {
        length = obj.length;
        for ( ; i < length; i++ ) {
            if ( callback.call( obj[ i ], i, obj[ i ] ) === false ) {
                break;
            }
        }
    } else {
        for ( i in obj ) {
            // obj[i] === this
            if ( callback.call( obj[ i ], i, obj[ i ] ) === false ) {
                break;
            }
        }
    }
    return obj;
},

jQuery.fn.each()를 호출하면, this를 매개변수로 jQuery.each()를 호출한다.

jQuery 소스 코드 분석 5. jQuery.fn.init
jQuery 소스코드 분석과 함께하는 자바스크립트 공부

jQuery 확장 vs. jQuery.fn 확장

$("p")와 같이 선택자를 사용하려고 하는 경우 jQuery.fn에 메서드를 추가해야 한다.
선택자를 사용하는 경우 jQuery.prototype 객체를 참조하는 jQuery.fn.init 인스턴스가 생성되기 때문에 jQuery 객체에 추가된 메서드는 사용할 수 없다.

• 선택자를 사용하지 않는 경우 jQuery.extend() 사용
• 선택자를 사용하는 경우 jQuery.fn.extend() 사용

jQuery.extend({
    abc: function(){
        alert('abc');
    }
});
// usage: $.abc(). (No selector required like $.ajax().)

jQuery.fn.extend({
    xyz: function(){
        alert('xyz');
    }
});
//usage: $('.selector').xyz(). (Selector required like $('#button').click().)

jQuery : 플러그인 개발
Difference between jQuery.extend and jQuery.fn.extend?