¿Cómo funciona extend () en jQuery?

119

Vi esto en un complemento:

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

¿Como funciona?

¿Qué extend()hacer?

Todd Terry
fuente
1
Puede leerlo en la documentación de jQuery, pero supongo que esta es una mejor explicación.
ifaour
jQuery tiene buenos documentos. api.jquery.com Simplemente escriba el nombre del método en el campo Buscar jQuery .
user113716
42
Creo que Todd quiere saber cómo funciona jQuery.extend, NO cómo usarlo. Por ejemplo, ¿recorre cada propiedad para crear un objeto completamente nuevo o utiliza la herencia de prototipos de alguna manera asombrosa?
b01

Respuestas:

178

Múltiples parámetros

La documentación no es precisa para explicar cómo funciona extender, así que realicé una pequeña prueba:

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

(Los console.log función está diseñada para funcionar en Firebug; reemplácela con alert () o alguna otra función de salida si lo desea).

Los resultados son:

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 esto podemos ver que jQuery.extend ():

  • Comienza con el objeto proporcionado por el primer parámetro.
  • Le agrega cualquier propiedad en el segundo parámetro. Si la propiedad ya existe en el primer parámetro, se sobrescribe. El objeto del segundo parámetro no se modifica.
  • Repite lo anterior con cualquier parámetro posterior.
  • Devuelve el primer parámetro.

Esto es útil para combinar el usuario y los objetos de opción predeterminados juntos para obtener un conjunto completo de opciones:

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

Tenga en cuenta que "nulo" es un valor válido para sobrescribir, pero "no definido" no lo es. Es posible que pueda hacer uso de esto.

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

Resultados en:

A: Foo=null Bar=a

Parámetro único

Si pasa solo un objeto a jQuery.extend(), entonces jQuery asume que el jQueryobjeto en es el "primer" parámetro (es decir, el que se va a modificar), y su objeto es el "segundo" (es decir, el que se agrega al primero) . Entonces:

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

Resultados en:

Before: undefined
After: 1
Craig Walker
fuente
3
así que si b.baz fuera un objeto, digamos en {zed: 'dark'}lugar de 2y tú estableces r.baz.zed = 'light', ¿cuál sería el valor de b.baz.zed? es decir, ¿las propiedades se copian o fusionan por referencia?
ErichBSchulz
4
para responder a mi propia pregunta, b.baz.zedsería light- es decir, los valores se fusionan por referencia. ver un violín
ErichBSchulz
4
espléndida explicación, +1
Carrie Kendall
2
Espero que la documentación oficial sea tan clara como esta. +1
Thariq Nugrohotomo
2
$ .extend (verdadero, objeto1, objeto2); y $ .extend (objeto1, objeto2); diferencia ...
Vinay S Jain
27

Se funde el contenido de un objeto a otro . Si pasamos dos objetos, las propiedades del segundo objeto se agregan al primer objeto / primer parámetro

Ex: $.extend(object1, object2);

Ahora object1 contiene propiedades de object2

Si queremos fusionar dos objetos , necesitamos pasar un objeto vacío en el primer parámetro

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

Ahora newObject contiene ambas propiedades de object1 y object2 .

Gopal
fuente
12

De la documentación de jQuery

Fusionar el contenido de dos o más objetos en el primer objeto.

En el contexto de un complemento: si el usuario no establece los parámetros opcionales para la función, se utilizará un valor predeterminado en su lugar.

JOBG
fuente
1
Esta respuesta debería estar en un comentario.
Nolo
¡Gracias JOBG!
Harsha Vardhan
7

¿Cómo funciona extend () en jQuery? [Resuelto]

jQuery tiene copia profunda y copia ligera. El primer booleano lo decide, verdadero para profundo y falso para ligero.

Por ejemplo:

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

    el resultado será: {'a': {'a2': 2}} porque esta es una copia ligera, simplemente compare el nivel 1.

    ingrese la descripción de la imagen aquí

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

    el resultado será: {'a': {'a1': 1, 'a2': 2}} Esta es una copia profunda con muchos niveles de objeto (como el nivel de la matriz)

    ingrese la descripción de la imagen aquí

  • jQuery.extend (a, b, c) con a, b, c es objeto o matriz. El flujo de sobreescritura será b-> a, c -> a (b sobreescribe a, c sobreescribe a ...) esta función devolverá ay a también cambiará el valor.

Ejemplos avanzados:

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

    En caso de que solo pase un parámetro. jQuery se extenderá. console.log (jQuery ['number_param']) generará 1.

    ingrese la descripción de la imagen aquí

  • jQuery.extend (1, {'number_param': '2'}); Este ejemplo no es un anexo de jQuery. El primer parámetro debe ser booleano. En este caso, devolverá {'number_param': '2'} y jQuery no se actualizará.

    ingrese la descripción de la imagen aquí

  • jQuery.extend (a, b, c, d, e, f); El orden de fusión será. b -> a, c -> a, d -> a, e -> a, f -> a (b anula a, c anula a ...). Y la devolución del resultado será un.

    con a = {'p': 1}. jQuery.extend (a, {'p': 2}, {'p': 3}, {'p': 4}, {'p': 5}) devolverá a, y a = {'p': 6}. El número de parámetros que se pasan a esta función es ilimitado.

    ingrese la descripción de la imagen aquí

Christian Nguyen
fuente
1
Desde los muelles "Advertencia: No se admite pasar falso para el primer argumento".
Nolo
2

El propósito es ampliar un objeto existente. Por ejemplo, si tenemos un objeto de plantilla y queremos extenderlo agregando más propiedades o anulando propiedades existentes, jquery extend puede ser útil.

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

};

ahora si queremos extenderlo, $.extend(true, {"color":"red"}, carObjectTemplate, {"model": 'amaze'}); nos dará salida, extendiendo carObjectTemplate y agregando

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

El primer parámetro booleano verdadero / falso es para indicar si necesitamos una copia profunda o superficial

Sanjay Bharwani
fuente
¿Qué significa copia profunda o superficial?
Selva Ganapathi
0

Hace exactamente esto

Descripción : fusiona el contenido de dos o más objetos en el primer objeto.

Más en jQuery.extend ()

Gabriele Petrioli
fuente
1
Las respuestas de una línea y los enlaces a documentos no son de mucha utilidad como respuesta y deben dejarse en un comentario.
Nolo