Как работает функция extend() в jQuery?

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

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

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

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

Ответ 1

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

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

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

Ответ 2

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

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

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

Ответ 3

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

Ex: $.extend(object1, object2);

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

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

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

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

Ответ 4

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

Ответ 5

Как работает функция extend() в jQuery? [Решено]

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

Например:

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

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

    введите описание изображения здесь

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

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

    введите описание изображения здесь

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

Дополнительные примеры:

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

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

    введите описание изображения здесь

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

    введите описание изображения здесь

  • jQuery.extend(a, b, c, d, e, f); Слияние заказов будет. b → a, 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}. Параметры числа, передаваемые этой функции, не ограничены.

    введите описание изображения здесь

Ответ 6

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

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 указывает, нужна ли нам глубокая или мелкая копия

Ответ 7

Он делает именно это

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

Подробнее в jQuery.extend()

Ответ 8

Чтобы ответить "Как это работает?" - которые никто здесь не пытался сделать.

Вот очень упрощенная версия.

function extend ( target, src ) {
    // convert all arguments ( even those unseen in the function arity )
    // to an array
    var args = Array.prototype.slice.call ( arguments ),
        deep = false;

    if ( typeof target === 'boolean' && target === true ) {
        // recursive copy

        // remove deep copy flag from the arguments list
        deep = args.shift ();

        // copy to the original target
        target = args.shift ();
    }

    for ( var i = 0, l = args.length; i < l; i = i + 1 ) {
        src = args [ i ];
        if ( src ) {
            for ( var key in src) {
                if ( Object.hasOwnProperty ( src, key ) ) {
                    if ( deep && typeof src [ key ] === 'object' ) {
                        // warning this is only a simple version
                        // doesn't handle arrays specifically
                        // but rather converts them to a plain object
                        target [ key ] = extend ( deep, {}, src [ key ] );
                    } else {
                        target [ key ] = src[ key ];
                    }
                }
            }
        }
    }

    return target;
}

Здесь обновлен источник для фактического метода