javascript - jquery extender vs angular extender
angularjs (4)
.extend () en AngularJS funciona de forma similar a jQuery''s .extend ()
http://jsfiddle.net/Troop4Christ/sR3Nj/
var o1 = {
a: 1,
b: 2,
c: {
d:3,
e:4
}
},
o2 = {
b: {
f:{
g:5
}
}
};
console.log(angular.extend({}, o1, o2));
console.log(o1);
console.log(o2);
¿Cuál es la diferencia entre estas dos funciones de ampliación?
angular.extend(a,b);
$.extend(a,b);
Mientras que jquery.extend está bien documentado, angular.extend carece de detalles y los comentarios no proporcionan respuestas. ( https://docs.angularjs.org/api/ng/function/angular.extend ).
¿Angular.extend también proporciona una copia profunda?
Hay una sutil diferencia entre los dos que no se mencionó en las respuestas anteriores.
jQuery''s .extend () le permite agregar de manera condicional clave, pares de valores, solo si el valor está definido . Entonces en jQuery, esto: $.extend({}, {''a'': x ? x : undefined}); devolverá {} en caso de que x no esté definido.
Sin embargo, en .extend () de Angular, esto: angular.extend({}, {''a'': x ? x : undefined}); devolverá {''a'': undefined} , incluso si x no está definido. Entonces la llave estará allí, no importa qué.
Esto podría ser bueno o malo, dependiendo de lo que necesite. De todos modos, esta es una diferencia de comportamiento entre las dos bibliotecas.
La versión 1.0.7 angularjs establece que los métodos extender y copiar ya no copian sobre los valores angulares $$ hashKey de angularjs.
Consulte las notas de la versión @ https://github.com/angular/angular.js/blob/master/CHANGELOG.md
angular.copy / angular.extend: no copie $$ hashKey en las funciones copiar / ampliar. (6d0b325f, # 1875)
Una prueba rápida de angular.copy en el método Chomre dev tools muestra que sí hace una copia profunda.
x = {p: 3, y: {x: 5}}
Object {p: 3, y: Object}
x
Object {p: 3, y: Object}
z = angular.copy(x);
Object {p: 3, y: Object}
z
Object {p: 3, y: Object}
x
Object {p: 3, y: Object}
z.y.x = 1000
1000
x
Object {p: 3, y: Object}
p: 3
y: Object
x: 5
__proto__: Object
__proto__: Object
z
Object {p: 3, y: Object}
p: 3
y: Object
x: 1000
__proto__: Object
__proto__: Object
angular.extend por otro lado hace una copia superficial.
angular.extend y jQuery.extend son muy similares. Ambos hacen una copia de propiedad superficial de uno o más objetos fuente a un objeto de destino. Entonces, por ejemplo:
var src = {foo: "bar", baz: {}};
var dst = {};
whatever.extend(dst, src);
console.log(dst.foo); // "bar"
console.log(dst.baz === src.baz); // "true", it''s a shallow copy, both
// point to same object
angular.copy proporciona una copia profunda :
var src = {foo: "bar", baz: {}};
var dst = angular.copy(src);
console.log(dst.baz === src.baz); // "false", it''s a deep copy, they point
// to different objects.
Volviendo a extend : solo veo una diferencia significativa, que es que la extend de jQuery le permite especificar solo un objeto, en cuyo caso jQuery es el objetivo.
Cosas en comun:
Es una copia superficial. Entonces, si
srctiene una propiedadpque se refiere a un objeto,dstobtendrá una propiedadpque se refiere al mismo objeto (no una copia del objeto).Ambos devuelven el objeto de destino.
Ambos admiten múltiples objetos fuente.
Ambos hacen los múltiples objetos de origen en orden , por lo que el último objeto de origen "ganará" en caso de que más de un objeto de origen tenga el mismo nombre de propiedad.
Página de prueba: Live Copy | Fuente en vivo
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
<meta charset=utf-8 />
<title>Extend!</title>
</head>
<body>
<script>
(function() {
"use strict";
var src1, src2, dst, rv;
src1 = {
a: "I''m a in src1",
b: {name: "I''m the name property in b"},
c: "I''m c in src1"
};
src2 = {
c: "I''m c in src2"
};
// Shallow copy test
dst = {};
angular.extend(dst, src1);
display("angular shallow copy? " + (dst.b === src1.b));
dst = {};
jQuery.extend(dst, src1);
display("jQuery shallow copy? " + (dst.b === src1.b));
$("<hr>").appendTo(document.body);
// Return value test
dst = {};
rv = angular.extend(dst, src1);
display("angular returns dst? " + (rv === dst));
dst = {};
rv = jQuery.extend(dst, src1);
display("jQuery returns dst? " + (rv === dst));
$("<hr>").appendTo(document.body);
// Multiple source test
dst = {};
rv = angular.extend(dst, src1, src2);
display("angular does multiple in order? " +
(dst.c === src2.c));
dst = {};
rv = jQuery.extend(dst, src1, src2);
display("jQuery does multiple in order? " +
(dst.c === src2.c));
function display(msg) {
$("<p>").html(String(msg)).appendTo(document.body);
}
})();
</script>
</body>
</html>