Как extend () работает в jQuery? - PullRequest
100 голосов
/ 25 декабря 2010

Я видел это в плагине:

var options = $.extend(defaults, options); 

Как это работает?

Что делает extend()?

Ответы [ 7 ]

162 голосов
/ 12 января 2011

Несколько параметров

Документация не дает точных объяснений того, как работает расширение, поэтому я провел небольшой тест:

var a = {foo: 1, bar: 1};
var b = {foo: 2, baz: 2};
var c = {foo: 3};
var r = jQuery.extend(a,b,c);
console.log("A: Foo=" + a.foo + " Bar=" + a.bar + " Baz=" + a.baz);
console.log("B: Foo=" + b.foo + " Bar=" + b.bar + " Baz=" + b.baz);
console.log("C: Foo=" + c.foo + " Bar=" + c.bar + " Baz=" + c.baz);
console.log("R: Foo=" + r.foo + " Bar=" + r.bar + " Baz=" + r.baz);
console.log("A === R?: " + (a === r));

(функция console.log предназначена для работы вFirebug; замените его на alert () или какую-нибудь другую выходную функцию, если хотите).

Результаты:

A: Foo=3 Bar=1 Baz=2
B: Foo=2 Bar=undefined Baz=2
C: Foo=3 Bar=undefined Baz=undefined
R: Foo=3 Bar=1 Baz=2
A === R?: true

Таким образом, мы видим, что jQuery.extend ():

  • Начинается с объекта, указанного в первом параметре.
  • Добавляет к нему любое свойство во втором параметре.Если свойство уже существует в первом параметре, оно перезаписывается.Объект для второго параметра не изменяется.
  • Повторяет вышеуказанное с любым последующим параметром.
  • Возвращает первый параметр.

Это полезно для объединения пользователя иопции-объекты по умолчанию вместе, чтобы получить полный набор опций:

function foo(userOptions) {
  var defaultOptions = {
    foo: 2,
    bar: 2
  };
  var someOtherDefaultOptions = {
    baz: 3
  };

  var allOptions = jQuery.extend(
    defaultOptions,
    someOtherDefaultOptions,
    userOptions
  );
  doSomething(allOptions);
}

foo({foo:1, baz:1});

Обратите внимание, что «null» является допустимым значением для перезаписи, но «undefined» - нет.Вы могли бы использовать это.

var a = {foo: "a", bar: "a"};
var b = {foo: null, bar: undefined};
jQuery.extend(a,b);
console.log("A: Foo=" + a.foo + " Bar=" + a.bar);

Результаты:

A: Foo=null Bar=a

Одиночный параметр

Если вы передаете только один объект jQuery.extend(),тогда jQuery предполагает, что jQuery объект сам является «первым» параметром (т. е. изменяемым), а ваш объект - «вторым» (т. е. добавляемым к первому).).Итак:

console.log( "Before: " + jQuery.foo );
jQuery.extend({foo:1});
console.log( "After: " + jQuery.foo );

Результат:

Before: undefined
After: 1
21 голосов
/ 02 декабря 2014

Это объединяет содержимое одного объекта с другим .Если мы передадим два объекта, свойства второго объекта будут добавлены к первому объекту / первому параметру

Ex: $.extend(object1, object2);

Теперь объект1 содержит свойства объекта2

Если мы хотим объединить два объекта , то нам нужно передать пустой объект в первом параметре

Ex: var newObject = $.extend({}, object1, object2);

Теперь newObject содержит оба свойства object1 и object2 .

10 голосов
/ 25 декабря 2010

Из документации jQuery

Объединить содержимое двух или более объектов вместе в первый объект.

В контексте плагина: Еслипользователь не устанавливает необязательные параметры для функции, вместо этого будет использоваться значение по умолчанию.

4 голосов
/ 30 июля 2016

Как работает extended () в jQuery? [Решено]

jQuery имеет глубокое и светлое копирование. Первое логическое решение решает это, верно для глубокого и ложно для света.

Например:

  • jQuery.extend (false, {'a': {'a1': 1}}, {'a': {'a2': 2}})

    результат будет: {'a': {'a2': 2}}, потому что это светлая копия, просто сравните уровень 1.

    enter image description here

  • jQuery.extend (true, {'a': {'a1': 1}}, {'a': {'a2': 2}})

    результат будет: {'a': {'a1': 1, 'a2': 2}} Это глубокая копия со многими уровнями объекта (так же, как уровень массива)

    enter image description here

  • jQuery.extend (a, b, c) с a, b, c является объектом или массивом. Переопределение потока будет b-> a, c -> a (b перезаписать a, c переопределить a ...), эта функция также возвратит a и значение изменения.

Расширенные примеры:

  • jQuery.extend ({'number_param': 1})

    В случае, если вы просто передадите один параметр. JQuery будет расширяться. console.log (jQuery ['number_param']) выведет 1.

    enter image description here

  • jQuery.extend (1, {'number_param': '2'}); Этот пример не добавляет сам jQuery. Первый параметр должен быть логическим. В этом случае он вернет {'number_param': '2'} и jQuery не будет обновлен.

    enter image description here

  • jQuery.extend (a, b, c, d, e, f); Порядок слияния будет. б -> а, c -> a, d -> a, e -> a, f -> a (b переопределить a, c переопределить a ...). И результат возврата будет.

    с a = {'p': 1}. jQuery.extend (a, {'p': 2}, {'p': 3}, {'p': 4}, {'p': 5}) вернет a и a = {'p': 6}. Число параметров, передаваемых этой функции, не ограничено.

    enter image description here

2 голосов
/ 26 августа 2015

Цель - расширить существующий объект.Например, если у нас есть объект шаблона и мы хотим расширить его, добавив больше свойств или переопределив существующие свойства, расширение jquery может быть полезным.

var carObjectTemplate = {
"make": "honda",
"model":"city",
"mileage":"20",
"variant":"petrol"

};

теперь, если мы хотимчтобы расширить его, $.extend(true, {"color":"red"}, carObjectTemplate, {"model": 'amaze'}); это даст нам выход, расширив carObjectTemplate и добавив

{"color":"red"} property and overriding "model" property from "city" to "amaze"

первый логический параметр true / false, чтобы указать, нужна ли нам глубокая или поверхностная копия

0 голосов
/ 25 декабря 2010

Это именно так

Описание : объединить содержимое двух или более объектов вместе в первый объект.

Еще на jQuery.extend ()

0 голосов
/ 25 декабря 2010

В документации jQuery есть прекрасный пример: .extend () метод

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...