(스크랩) jQuery : $.extend() 와 $.fn.extend()

[jQuery:$.extend() 와 $.fn.extend() 의 혼동]

 

.extend() 함수를 사용할 때 하나의 인수를 넘기는 것과 두 개 이상의 인수를 넘기는 것에는 아주 큰 차이가 있습니다.

.extend() 함수가 하나의 객체를 받을 때 선언된 메소드를 jQuery 나 jQuery.fn (jQuery.prototype, 또는 $.fn 이라고 불리죠.) 에 추가시킵니다.

일반적으로 함수를 위해서는 jQuery 객체를 extend 시키고 메소드를 위해서는 jQuery.fn 을 extend 시킵니다.

함수는 DOM 에서 바로 접근이 불가능하고 메소드는 바로 접근이 가능하죠.

 

다음 예제에서 jQuery.fn 또는 jQuery 객체를 extend 시킬 때 부르는 방식이 달라짐을 눈여겨 보시기 바랍니다.

$.fn.extend({

  myMethod: function(){...}

});

//jQuery("div").myMethod();



$.extend({

  myMethod2: function(){...}

});

//jQuery.myMethod2();

 

 

[jQuery:$.extend() 의 사용]

.extend() 함수가 2개 이상의 객체를 받을 때, 일반적으로 알려진 것 처럼 첫 번째 객체와 두 번째 객체를 병합(merge) 합니다.

var defaults = { size: 3 };

var options = { height: 6 };

var opts = $.extend(defaults, options)

// 'defaults' 가 'options' 에 정의된 메소드와 변수들을 받아옵니다.

// opts == defaults == { size: 3, height: 6 }

// options == { height: 6 };

 

 

만약에 첫 번째 객체가 빈 객체라면, 메소드와 변수들을 새로운 객체에 추가시킵니다.

객체들을 변화시키지 않고 새로운 객체에 만들 때 아주 유용합니다.

var opts = $.extend( {}, defaults, options);

// 'opts' 가 'defaults' 와 'options'에 선언된 모든 메소드와 변수들을 받습니다.

// 'defaults' 와 'options' 는 변하지 않습니다.

// opts == { size: 3, height: 6 }

// defaults == { size: 3 };

// options == { height: 6 };

 

 

 

---

출처 - http://m.blog.naver.com/k_rifle/178134527 

jQuery $.extend() 에 하나의 인수를 넣을 때와 둘 이상의 인수를 넣을 때 차이점.

출처: http://unabated.tistory.com/entry/jQueryextend-와-fnextend [랄라라] 

jQuery:$.extend() 와 $.fn.extend()