jQuery - $.extend 함수

1. $.extend 함수(메소드)란

JQuery.extend() 함수는 복수의 오브젝트를 합쳐서(merge) 되돌려 주는 함수입니다. (플러그인 소스에서 디폴트 설정치를 덮어 쓸때 자주 볼 수 있습니다.)

 

jQuery.extend( [ deep ], target, object1 [, objectN ] )

- deep: boolean 타입이며 true일 경우 깊은 복사로 merge합니다. (생략가능)

- target: object 타입을 받으며, target에 다른 파라미터인 object1, objectN의 값을 merge합니다.

- object1: object 타입을 받으며, target에 병합할 object입니다.

- objectN: object 타입을 받으며 필수값이 아닙니다. object1파라미터뒤에 복수의 오브젝트인자를 입력할수있으며, target에 병합됩니다.

예시) jQuery.extend( true, {}, object1, object2, object3, object4)

 

 

2. 별도의 프로버티가 없는 오브젝트 간의 병합

var ob1 = {
	"name" : "test",
	"score" : 100
};

var ob2 = {
	"name" : "test2",
  	"class" : "first"
};

var ob3 = $.extend(true, {}, ob1, ob2);
console.log(ob3);
/* 결과값
{
  class: "first",
  name: "test2",
  score: 100
} */

별도의 프로퍼티가 없는 오브젝트 간의 결합할 경우, 오브젝트 내의 프로퍼티가 중복되면 가장 마지막에 병합된 프로퍼티로 덮어씁니다. 병합 시 class 프로퍼티는 추가되었고, name 프로퍼티는 덮어쓰기 되었습니다.

 

$.extend(ob1, ob2);

$.extend({}, ob1, ob2);

$.extend(true, {}, ob1, ob2);

별도의 프로버티가 없는 오브젝트 간의 병합 시에는 위의 코드 중에 아무거나 사용해도 결과 값은 같습니다. 하지만 다음 살펴볼 내용은 병합 사용방법의 차이를 보입니다.

 

 

 

3. 계층이 존재하는 오브젝트 간의 병합

var ob1 = {
	style: {
  	width : 100,
    color : "red"
  }
};

var ob2 = {
	style: {
  	width : 200,
    height : 300
  }
};

var ob3 = $.extend({}, ob1, ob2);
console.log(ob3);
/* 결과값
{
  style: {
    height: 300,
    width: 200
  }
} */

 

하위 계층이 존재하는 경우 $.extend({}, ob1, ob2) 방법을 사용하면, 마지막의 오브젝트로 덮어쓰기가 됩니다. 

하위 계층을 병합하고 싶은 경우에는 첫번째 인자에 반드시 true 값을 주어야합니다.-> $.extend(true, {}, ob1, ob2) 

 

 

 

 

 

api.jquery.com/jquery.extend/

 

damedame.tistory.com/entry/jQueryextend-%ED%95%A8%EC%88%98-%EC%82%AC%EC%9A%A9-%EB%B0%A9%EB%B2%95