본문 바로가기
Javascript/jQuery

jQuery.extend()

by 카리3 2020. 6. 13.

jQuery.extend()

두 개 이상의 객체의 내용을 첫번째 객체에 복사

 

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

target : 추가 객체가 전달될 경우 새 속성을 수신할 객체

object1: 병합할 추가 속성이 들어있는 객체

objectN: 병합할 추가 속성이 들어있는 객체

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.extend demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div id="log"></div>
<div id="log2"></div> 

<script>
var object1 = {
  apple: 0,
  banana: { weight: 52, price: 100 },
  cherry: 97
};
var object2 = {
  banana: { price: 200 },
  durian: 100
};
var object3 = {
  banana: { price: 450 },
  strawberry: 150
}; 

// object2를 object1에 Merge
$.extend( object1, object2 );
$( "#log" ).append( JSON.stringify( object1 ) ); 
//결과: {"apple":0,"banana":{"price":200},"cherry":97,"durian":100}

//object2, object3를 object1에 Merge
$.extend( object1, object2, object3 );
$( "#log2" ).append( JSON.stringify( object1 ) ); 
//결과: {"apple":0,"banana":{"price":450},"cherry":97,"durian":100,"strawberry":150}

// Assuming JSON.stringify - not available in IE<8

</script>
 
</body>
</html>

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

deep : true일 경우 병합은 재귀적(일명 깊은 복사)이 된다. false는 지원하지 않는다. 

target : 추가 객체가 전달될 경우 새 속성을 수신할 객체

object1: 병합할 추가 속성이 들어있는 객체

objectN: 병합할 추가 속성이 들어있는 객체

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.extend demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div id="log"></div>
 
<script>
var object1 = {
  apple: 0,
  banana: { weight: 52, price: 100 },
  cherry: 97
};
var object2 = {
  banana: { price: 200 },
  durian: 100
};
 
// object2를 object1에 복사, recursively
$.extend( true, object1, object2 );
//결과:  {"apple":0,"banana":{"weight":52,"price":200},"cherry":97,"durian":100}
 
// Assuming JSON.stringify - not available in IE<8
$( "#log" ).append( JSON.stringify( object1 ) );
</script>
 
</body>
</html>

 

PlugIn 개발 패턴에서 주로 사용하는 default를 수정하지 않고 option을 default에 복사하는 방법

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.extend demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div id="log"></div>
 
<script>
var defaults = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
 
// Merge defaults and options, without modifying defaults
var settings = $.extend( {}, defaults, options );
 
// Assuming JSON.stringify - not available in IE<8
$( "#log" ).append( "<div><b>defaults -- </b>" + JSON.stringify( defaults ) + "</div>" );
//defaults -- {"validate":false,"limit":5,"name":"foo"}
$( "#log" ).append( "<div><b>options -- </b>" + JSON.stringify( options ) + "</div>" );
//options -- {"validate":true,"name":"bar"}
$( "#log" ).append( "<div><b>settings -- </b>" + JSON.stringify( settings ) + "</div>" );
//settings -- {"validate":true,"limit":5,"name":"bar"}
</script>
 
</body>
</html>

 

'Javascript > jQuery' 카테고리의 다른 글

jQuery 플러그인  (0) 2020.06.28
Function.prototype.bind()  (0) 2020.06.13
Function.prototype.apply()  (0) 2020.06.13
Function.prototype.call()  (0) 2020.06.13
jQuery.fn.extend()  (0) 2020.06.13