Menu
What is the difference between these two extend functions?
angular.extend(a,b); $.extend(a,b); While the jquery.extend is well documented the angular.extend lacks details and the comments there provide no answers. (https://docs.angularjs.org/api/ng/function/angular.extend).
Does angular.extend also provide deep copy?
990
Extends the destination object dst by copying own enumerable properties from the src object(s) to dst . You can specify multiple src objects. If you want to preserve original objects, you can do so by passing an empty object as the target: var object = angular. extend({}, object1, object2) .
The jQuery. extend() method is used to merge contents of two or more objects together. The object is merged into the first object.
angular. merge is an Angular 1.4+ API that is to deep (recursively) copy the properties of the source objects to the destination object.
angular.extend and jQuery.extend are very similar. They both do a shallow property copy from one or more source objects to a destination object. So for instance:
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 provides a deep copy:
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. Getting back to extend: I only see one significant difference, which is that jQuery's extend allows you to specify just one object, in which case jQuery itself is the target.
Things in common:
It's a shallow copy. So if src has a property p that refers to an object, dst will get a property p that refers to the same object (not a copy of the object).
They both return the destination object.
They both support multiple source objects.
They both do the multiple source objects in order, and so the last source object will "win" in case more than one source object has the same property name.
Test page: Live Copy | 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> There is one subtle difference between the two which was not mentioned in previous answers.
jQuery's .extend() allows you to conditionally add key,value pairs, only if the value is defined. So in jQuery, this: $.extend({}, {'a': x ? x : undefined}); will return {} in case x is undefined.
In Angular's .extend() however, this: angular.extend({}, {'a': x ? x : undefined}); will return {'a': undefined}, even if x is undefined. So the key will be there, no matter what.
This could be a good or a bad thing, depending on what you need. Anyway this is a difference in behavior between the two libraries.
43
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
