프런트엔드/jquery

[jquery] extends() 사용법

API문서를 확인해본 결과

크게 2가지 형식으로 쓸 수 있는 것 같다.

 

1. jQuery.extend (target, object1 [, objectN])
 -> var object = $.extend({}, object1, object2);

 -> target객체에 뒤에 받는 object1, object2... 를 확장한다.
 -> 같은 이름을 가진 오브젝트는 뒤에 있는 오브젝트에 값으로 덮어쓰기가 된다

<!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
};
 
// Merge object2 into object1
$.extend( object1, object2 );
 
// Assuming JSON.stringify - not available in IE<8
$( "#log" ).append( JSON.stringify( object1 ) );
</script>
 
</body>
</html>
{"apple":0,"banana":{"price":200},"cherry":97,"durian":100}

 

2. jQuery.extend( [deep ], target, object1 [, objectN ] )
 -> var object = $.extend( true, object1, object2 );
 -> 재귀호출을 통해 객체안에 값을 확장한다.
 -> 첫번쨰 받는 boolean값은 false가 들어올 수 없다.

<!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
};
 
// Merge object2 into object1, recursively
$.extend( true, object1, object2 );
 
// Assuming JSON.stringify - not available in IE<8
$( "#log" ).append( JSON.stringify( object1 ) );
</script>
 
</body>
</html>
{"apple":0,"banana":{"weight":52,"price":200},"cherry":97,"durian":100}


참고자료: https://api.jquery.com/jquery.extend/

 

jQuery.extend() | jQuery API Documentation

Description: Merge the contents of two or more objects together into the first object. When two or more object arguments are supplied to $.extend(), properties from all of the objects are added to the target object. Arguments that are null or undefined are

api.jquery.com