jQuery.extend()

посл. ред. 20.12.2016

Функция jQuery.extend() объединяет два или более объектов в один. Свойства всех объектов записываются в первый переданный объект и jQuery.extend() возвращает ссылку на него. Чтобы не изменять исходные объекты, можно первым аргументом указать пустой объект {}. Все свойства будут записаны в него.

Если в качестве аргументов передаются значения null или undefined, то они просто игнорируются.

Если при копировании встречается свойство с уже существующим именем, то значение этого свойства перезаписывается на новое. Это нормально для примитивных значений. Однако, если старое и новое свойства тоже являются объектами, тогда может возникнуть необходимость их слияния, а не полная перезапись. Чтобы выполнить глубокое слияние объектов, необходимо первым аргументом передать значение true (значение false не поддерживается).

Если jQuery.extend() запускается с одним аргументом, это означает, что целевым объектом для копирования свойств является сам объект jQuery. Это позволяет разработчикам плагинов для jQuery добавлять собственные функции в библиотеку.

Варианты использования

jQuery.extend(объект) => Object: Добавляет свойства переданного объекта в объект jQuery.
jQuery.extend(объект_1, объект_2[, ...]) => Object: Копирует с заменой свойства второго и последующих объектов (если заданы) в первый.
jQuery.extend(true, объект_1, объект_2[, ...]) => Object: Выполняет глубокое копирование свойств второго и последующих объектов (если заданы) в первый.

Примеры

Следующий пример демонстрирует разницу между простым и глубоким копированием свойств.

<html>
<head>
  <title>Функции библиотеки jQuery</title>
  <script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
  <button id="button_1">Простое копирование</button>
  <button id="button_2">Глубокое копирование</button>
  <p></p>
</body>
</html>
 
<script>
var obj_1 = {
  type: 1,
  age: {'Ваня': 15, 'Петя': 18}
};
var obj_2 = {
  type: 2,
  age: {'Ваня': 15, 'Вася': 16}
};

/* В объект jQuery добавлена функция write, которая возвращает свойства объекта в виде строки */
$.extend({
  write: function() {
    obj = arguments[0] || {};
    var props = '';
    $.each(obj, function(prop, value) {
      value = (typeof value == 'object') ? $.write(value) : value;
      props += prop + ': ' + value + ', ';
    });
    return '{' + props.slice(0, -2) + '}';
  }
});

/* Для вывода свойств объекта на экран используется добавленная ранее функция $.write() */
/* Первым объектом в $.extend() указывается пустой объект {}, чтобы не изменять исходные объекты obj_1 и obj_2 */
$('#button_1').click(function() {
  $('p')[0].innerHTML = $.write($.extend({}, obj_1, obj_2));
});
$('#button_2').click(function() {
  $('p')[0].innerHTML = $.write($.extend(true, {}, obj_1, obj_2));
});
</script>