O jQuery possui as funções $.extend
e $.fn.extend
.
- Pra quê elas servem?
- Como usá-las?
Stack Overflow em Português é um site de perguntas e respostas para programadores profissionais e entusiastas. Leva apenas um minuto para se inscrever.
Inscreva-se para participar desta comunidadeA função do extend
é copiar propriedades de um ou mais objetos para um objeto de destino. Ou seja, é uma função utilitária, que atua sobre objetos "normais", nada específico do jQuery.
var a = { foo:10 };
var b = { bar:20 };
$.extends(a, b);
// a agora possui { foo:10, bar:20 }
Um dos seus usos mais comuns é para se clonar um objeto. Para isso, basta usar um novo objeto (vazio) como primeiro argumento:
var a = { foo:10, bar:[20, 30, 40] };
var b = $.extend({}, a); // Cópia rasa (shallow copy)
a.bar[1] = 50;
console.log(b.bar[1]); // 50
Ou, para se conseguir uma "cópia profunda" (deep copy), passando-se true
como primeiro argumento:
var a = { foo:10, bar:[20, 30, 40] };
var b = $.extend(true, {}, a); // Cópia profunda (deep copy)
a.bar[1] = 50;
console.log(b.bar[1]); // 30
Outra possibilidade é se criar um objeto que é um conjunto de vários outros. Isso pode ser usado, por exemplo, para se implementar mixins:
var classeA = { ... }; // Uma "classe" no caso é somente um conjunto de propriedades
var classeB = { ... }; // e métodos relacionados. Poderia-se "herdar" dessa classe
var classeC = { ... }; // usando-a como protótipo, mas como herdar de várias?
var mixin = $.extend({}, classeA, classeB, classeC);
Como regra geral, o primeiro objeto passado como argumento é modificado, e os demais apenas contribuem propriedades a ele. Se houver um true
no início, a cópia é profunda, caso contrário ela é rasa.
E quanto ao $.fn.extend
? Isso é somente um "atalho" para se adicionar novas propriedades ao próprio $.fn
:
$.fn.extend({ ... }, { ... }, ...);
// É equivalente a:
$.extend($.fn, { ... }, { ... }, ...);
(E pra quem não sabe, $.fn
é onde ficam definidas as funções que se aplicam a qualquer objeto jQuery. Ex.: $(seletor).foo(10, 20)
implica que existe uma função foo
em $.fn
.)
O $.extend
serve para "fundir" dois ou mais objetos no primeiro
Ex: (retirado de http://api.jquery.com/jquery.extend/ )
var object1 = {
maça: 0,
banana: { peso: 52, preço: 100 },
cereja: 97
};
var object2 = {
banana: { preço: 200 },
laranja: 100
};
$.extend( object1, object2 );
Ao imprimir o objeto 1 tem-se:
{"maça"0, "banana":{preço:200}, cereja:97, laranja:100}
Nesse caso o objeto 1 (que contém maça, banana e cereja) é fundido com o objeto 2 (que contem banana e laranja). Perceba que ao fundir os objetos a banana é susbstituida (antes possuia preço e peso agora só possui preço) e a nova propriedade (laranja) é adicionada.