Como extend () funciona no jQuery?

119

Eu vi isso em um plugin:

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

Como funciona?

O que extend()fazer?

Todd Terry
fonte
1
Você pode ler sobre isso na documentação do jQuery, mas acho que esta é uma explicação melhor para isso.
ifaour
jQuery tem bons documentos. api.jquery.com Basta digitar o nome do método no campo Pesquisar jQuery .
user113716
42
Acho que Todd quer saber como jQuery.extend funciona, NÃO como usá-lo. Por exemplo, ele faz um loop em cada propriedade para criar um objeto totalmente novo ou usa a herança de protótipo de alguma maneira incrível.
b01

Respostas:

178

Parâmetros múltiplos

A documentação não é precisa para explicar como a extensão funciona, então fiz um pequeno teste:

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));

(A console.logfunção deve funcionar no Firebug; substitua-a por alert () ou alguma outra função de saída, se desejar).

Os resultados são:

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

Por isso, podemos ver que jQuery.extend ():

  • Começa com o objeto fornecido pelo primeiro parâmetro.
  • Adiciona a ele qualquer propriedade no segundo parâmetro. Se a propriedade já existe no primeiro parâmetro, ele é sobrescrito. O objeto do segundo parâmetro permanece inalterado.
  • Repete o anterior com qualquer parâmetro subsequente.
  • Retorna o primeiro parâmetro.

Isso é útil para combinar objetos de opções padrão e de usuário para obter um conjunto completo de opções:

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});

Observe que "nulo" é um valor válido para sobrescrever, mas "indefinido" não é. Você pode ser capaz de fazer uso disso.

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);

Resulta em:

A: Foo=null Bar=a

Parâmetro Único

Se você passar apenas um objeto para jQuery.extend(), o jQuery assume que o própriojQuery objeto é o "primeiro" parâmetro (ou seja: aquele a ser modificado), e seu objeto é o "segundo" (ou seja: aquele a ser adicionado ao primeiro) . Assim:

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

Resulta em:

Before: undefined
After: 1
Craig Walker
fonte
3
então, se b.baz fosse um objeto say em {zed: 'dark'}vez de 2e você definir r.baz.zed = 'light', qual seria o valor de b.baz.zed? ou seja, as propriedades são copiadas ou mescladas por referência?
ErichBSchulz,
4
para responder à minha própria pergunta, b.baz.zedseria light- ou seja, os valores são fundidos por referência. veja um violino
ErichBSchulz
4
explicação esplêndida, +1
Carrie Kendall
2
Espero que a documentação oficial seja tão clara quanto esta. +1
Thariq Nugrohotomo
2
$ .extend (true, object1, object2); e $ .extend (objeto1, objeto2); diferença ...
Vinay S Jain
27

Ele mescla o conteúdo de um objeto com outro . Se passarmos dois objetos, as propriedades do segundo objeto são adicionadas ao primeiro objeto / primeiro parâmetro

Ex: $.extend(object1, object2);

Agora object1 contém propriedades de object2

Se quisermos fundir dois objetos , precisamos passar o objeto vazio no primeiro parâmetro

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

Agora newObject contém as propriedades de object1 e object2 .

Gopal
fonte
12

Da documentação jQuery

Mescle o conteúdo de dois ou mais objetos no primeiro objeto.

Em um contexto de plug-in: Se o usuário não definir os parâmetros opcionais para a função, um valor padrão será usado.

JOBG
fonte
1
Esta resposta deve ser um comentário.
Nolo
Obrigado JOBG !!
Harsha Vardhan de
7

Como extend () funciona no jQuery? [Resolvido]

jQuery tem deep copy e light copy. O primeiro booleano decide isso, verdadeiro para profundo e falso para luz.

Por exemplo:

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

    o resultado será: {'a': {'a2': 2}} porque esta é uma cópia leve, basta comparar o nível 1.

    insira a descrição da imagem aqui

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

    o resultado será: {'a': {'a1': 1, 'a2': 2}} Esta é uma cópia profunda com muitos níveis de objeto (assim como o nível de matriz)

    insira a descrição da imagem aqui

  • jQuery.extend (a, b, c) com a, b, c é um objeto ou array. A sobrescrita de fluxo será b-> a, c -> a (sobrescrever b a, sobrescrever c a ...) esta função retornará ae também alterará o valor.

Exemplos avançados:

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

    Caso você passe apenas um parâmetro. jQuery se estenderá. console.log (jQuery ['number_param']) produzirá 1.

    insira a descrição da imagem aqui

  • jQuery.extend (1, {'number_param': '2'}); Este exemplo não é o próprio jQuery. O primeiro parâmetro deve ser booleano. Neste caso, ele retornará {'number_param': '2'} e jQuery não será atualizado.

    insira a descrição da imagem aqui

  • jQuery.extend (a, b, c, d, e, f); A fusão do pedido será. b -> a, c -> a, d -> a, e -> a, f -> a (b anula a, c anula a ...). E o retorno do resultado será a.

    com a = {'p': 1}. jQuery.extend (a, {'p': 2}, {'p': 3}, {'p': 4}, {'p': 5}) retornará a, e a = {'p': 6}. Os parâmetros numéricos passados ​​para esta função são ilimitados.

    insira a descrição da imagem aqui

Christian Nguyen
fonte
1
Das docas "Aviso: passar falso para o primeiro argumento não é suportado."
Nolo
2

O objetivo é estender um objeto existente. Por exemplo, se temos um objeto de modelo e queremos estendê-lo adicionando mais propriedades ou sobrescrevendo propriedades existentes, jquery extend pode ser útil.

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

};

agora, se quisermos estendê-lo, $.extend(true, {"color":"red"}, carObjectTemplate, {"model": 'amaze'}); ele nos dará saída, estendendo carObjectTemplate e adicionando

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

o primeiro parâmetro booleano true / false é para indicar se precisamos de uma cópia profunda ou superficial

Sanjay Bharwani
fonte
O que significa cópia profunda ou superficial?
Selva Ganapathi
0

Faz exatamente isso

Descrição : mescle o conteúdo de dois ou mais objetos no primeiro objeto.

Mais em jQuery.extend ()

Gabriele Petrioli
fonte
1
Respostas de uma linha e links para documentos não são muito úteis como resposta e devem ser deixados em um comentário.
Nolo