jQuery 소스 구조분석 4. 객체 확장 extend() 메서드

jQuery 소스 코드의 전체 구조를 살펴보자.

오픈소스를 제대로 분석하려면 무엇보다 전체적인 구조를 파악해야 한다.

---

4. 객체 확장 extend() 메서드

jQuery 라이브러리 소스 코드에는 

다른 객체의 프로퍼티나 메서드 복사 등으로 객체의 기능을 추가하는 데 extend( ) 메서드를 제공한다.

(Code Line: 174 ~ 237)
jQuery.extend = jQuery.fn.extend = function() {
  var // ...
      target = arguments[0] || {},
      i = 1,
      length = arguments.length;
  // ...

  // ... more Code

  for ( ; i < length; i++ ) {
    // 인자로 넘어온 객체의 프로퍼티를 options로 참조 시키고,
    // 이 프로퍼티가 null이 아닌 경우 블록 안으로 진입한다
    if ( (options = arguments[ i ]) != null ) {
      for ( name in options ) {
        // src  는 반환될 복사본 target의 프로퍼티를 참조하고,
        // copy 는 복사할 원본의 프로퍼티를 참조한다.
        src = target[ name ];
        copy = options[ name ];

        // ... more Code
      }
    }
  }

  return target;
};

extend( ) 메서드가 호출된 부분을 살펴보자.

---

1) jQuery.extend(obj); 

(Code Line: 239 ~ more)
jQuery.extend({

  // ... more Code
});

이 메서드를 호출한 JQuery 함수 객체(this)에 obj 인자로 넘긴 객체의 프로퍼티를 복사하였다.
 

---

2) jQuery.fn.extend(obj);

(Code Line: 239 ~ more)
jQuery.fn.extend({
  // ... more Code
});

이 메서드를 호출한 JQuery.fn 객체(jQuery.prototype 객체)에 obj 인자로 넘긴 객체의 프로퍼티를 복사하였다.
 

---

 즉, 다음과 같다.

jQuery.extend( ) 메서드 호출로 jQuery 함수 객체를,

jQuery.fn.extend( ) 메서드 호출로 jQuery.prototype 객체의 기능을 확장한다.

---

 

by 소년코딩

추천은 글쓴이에게 큰 도움이 됩니다.

악플보다 무서운 무플, 댓글은 블로그 운영에 큰 힘이됩니다.