다메다메의 기술블로그

jQuery.extend() 함수 사용 방법 본문

JQuery

jQuery.extend() 함수 사용 방법

다메 2016. 6. 21. 13:33

알고 계신 분들도 많을 거라 생각하지만 사용법을 설명 해 보도록 하겠습니다.



JQuery.extend() 함수는 복수의 오브젝트를 합쳐서(merge) 되돌려 주는 함수입니다.

(플러그인 소스에서 디폴트 설정치를 덮어 쓸때 자주 볼 수 있습니다)



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



이런식으로 사용합니다.

오브젝트 a와 b를 합치고 싶은 경우



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var a = {
    id: 1,
    name: 'TAM'
};
 
var b = {
    name: 'TAM-new',
    hobby: 'football'  
};
 
$.extend(a, b);
 
console.log(a);
// 결과:
//  {
//      id: 1,
//      name: "TAM-new",
//      hobby: "football"
//  }



$.extend(a, b) 를 실행하면 a에 b를 합쳐 줍니다.

같은 프로퍼티가 존재 한다면 b의 값으로 덮어쓰기를 하며 b에 있는 프로퍼티가 새로운 값이라면 추가를 합니다.



그리고 extend() 함수는 파라메타로 넣을 오브젝트의 갯수 제한이 없습니다.



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var a = {
    id: 1,
    name: 'TAM'
};
 
var b = {
    name: 'TAM-new',
    hobby: 'football'  
};
 
var c = {
    name: 'TAM-new-new',
    job: 'designer'
};
 
$.extend(a, b, c);
 
console.log(a);
// 결과:
//  {
//      id: 1,
//      name: "TAM-new-new",
//      hobby: "football",
//      job: "designer"
//  }



이런식으로 무제한으로 파라메터를 설정 할 수 있으며

$.extend(a, b, c)를 실행할 경우 a의 값에 b를 합치며 그 값에 c를 합칩니다.



합쳐진 결과 값이 직접적으로 a 오브젝트(첫번째 파라메터)에 반영이 되므로

첫번째 파라메터가 변하는걸 원치 않는 경우에는



1
2
3
4
5
6
7
8
9
10
11
var a = {
    id: 1,
    name: 'TAM'
};
 
var b = {
    name: 'TAM-new',
    hobby: 'football'  
};
 
var newobject = $.extend({}, a, b);



이런식으로 첫번째 파라메터를 {}으로 지정 한 뒤 리턴값을 새로운 오브젝트에 넣어주면 됩니다.



마지막으로 프로퍼티가 오브젝트일 경우를 알아보겠습니다.



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var a = {
    style: {
        top: 100,
        left: 200,
        width: 300
    },
    duration: 1000
};
 
var b = {
    style: {
        height: 400
    }
};
 
$.extend(a, b);
 
console.log(a);
// 결과:
//  {
//      style: {
//          height: 400
//      },
//      duration: 1000
//  }



프로퍼티가 오브젝트일 경우 a.style.top, a.style.left, a.style.width는 모두 지워 지고 b.style.height만 덮어 씌워지게 됩니다.

밑의 계층까지 합치고 싶은 경우에는 extend()의 첫번째 파라메터에 true를 넣으면 됩니다.



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
var a = {
    style: {
        top: 100,
        left: 200,
        width: 300
    },
    duration: 1000
};
 
var b = {
    style: {
        height: 400
    }
};
 
$.extend(true, a, b);
 
console.log(a);
// 결과:
//  {
//      style: {
//          top: 100,
//          left: 200,
//          width: 300
//          height: 400
//      },
//      duration: 1000
//  }


이걸로 style의 프로퍼티들도 합칠 수 있습니다.

저작자표시
공유하기 링크
Comments