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 시킬 때 부르는 방식이 달라짐을 눈여겨 보시기 바랍니다.

 

1. $.fn.extend({
2. myMethod: function(){...}
3. });
4. //jQuery("div").myMethod();
5.  
6. $.extend({
7. myMethod2: function(){...}
8. });
9. //jQuery.myMethod2(); 

 

 

.extend() 함수가 2개 이상의 객체를 받을 때

일반적으로 알려진 것 처럼 첫 번째 객체와 두 번째 객체를 병합(merge) 합니다.

 

1. var defaults = { size: 3 };
2. var options = { height: 6 };
3. var opts = $.extend(defaults, options)
4. // 'defaults' 가 'options' 에 정의된 메소드와 변수들을 받아옵니다.
5. // opts == defaults == { size: 3, height: 6 }
6. // options == { height: 6 };

 

 

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

만약 여러 개의 객체들을 단 하나의 객체도 변화시키지 않고 새로운 객체에 만들 때 아주 유용합니다.

 

1. var opts = $.extend( {}, defaults, options);
2. // 'opts' 가 'defaults' 와 'options'에 선언된 모든 메소드와 변수들을 받습니다.
3. // 'defaults' 와 'options' 는 변하지 않습니다.
4. // opts == { size: 3, height: 6 }
5. // defaults == { size: 3 };
6. // options == { height: 6 };

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