Quelle est la différence entre ces deux fonctions d’extension?
angular.extend(a,b);
$.extend(a,b);
Bien que jquery.extend soit bien documenté, angular.extend manque de détails et les commentaires ne fournissent aucune réponse. ( https://docs.angularjs.org/api/ng/function/angular.extend ).
Angular.extend fournit-il également une copie en profondeur?
angular.extend et jQuery.extend sont très similaires. Ils font tous les deux un peu profonde de la propriété de la copie à partir d'un ou plusieurs objets de la source à la destination de l'objet. Ainsi, par exemple:
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 fournit une profonde copie:
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.
Pour en revenir à l' extend: je ne vois qu'une différence importante, qui est celle de jQuery extend vous permet de spécifier qu'un seul objet, auquel cas jQuery lui-même est la cible.
De choses en commun:
C'est une copie. Donc, si src a une propriété p qui se réfère à un objet, dst obtiendrez une propriété p qui se réfère au même objet (pas une copie de l'objet).
Ils reviennent tous les deux l'objet de destination.
Ils sont tous deux en charge de multiples objets de la source.
Ils font tous les deux la source de multiples objets dans l'ordre, et donc, la dernière source de l'objet "gagner" dans le cas où plus d'un objet source a le même nom de propriété.
Page de Test: Vivre Copier | Live Source
<!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>
Il y a une différence subtile entre les deux qui n'était pas mentionné dans les réponses précédentes.
jQuery .extend() vous permet de vous conditionnellement ajouter une clé,valeur couples, seulement si la valeur est définie. Donc en jQuery: $.extend({}, {'a': x ? x : undefined}); sera de retour {} en cas x n'est pas défini.
Dans Angulaire .extend() toutefois, ceci: angular.extend({}, {'a': x ? x : undefined}); sera de retour {'a': undefined}, même si x n'est pas défini. Donc, la clé sera là, n'importe quoi.
Cela pourrait être une bonne ou une mauvaise chose, selon ce que vous avez besoin. De toute façon c'est une différence de comportement entre les deux bibliothèques.
La 1.0.7 angularjs construire des états que de l'étendue et de la copie des méthodes plus copier sur la angularjs interne $$hashKey valeurs.
Voir les notes de version @ https://github.com/angular/angular.js/blob/master/CHANGELOG.md
angulaire.copier/angulaire.étendre: ne pas copier $$hashKey en copier/étendre les fonctions. (6d0b325f, n ° 1875)
Un test rapide de l'angle.copie en Chomre outils de dev méthode montre qu'elle fait une copie en profondeur.
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
angulaire.étendre sur l'autre main effectue une copie superficielle.
.extend () dans AngularJS fonctionne de la même manière que jextery .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);
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
