Extend :
angular.extend(dst, src1, src2, ...)
is to shallow copy the properties
of the source objects from right to left, all the way to the
destination object.
Translating: angular.extend(dst, src1, src2, ...)
is the simple copy of the properties of the source objects from right to left, all the way to the target object.
var src1 = { name: 'David', age: 30 }; // source 1
var src2 = { age: 26, skill: {} }; // source 2
var dst = {}; // destination
console.log(angular.extend(dst, src1, src2));
// Output: { name: 'David', age: 26, skill: {} }
console.log(src2.skill === dst.skill);
// Output: true
// src2 and dst share the same skill object due to shallow copy.
Merge :
angular.merge
is an Angular 1.4+ API that is to deep (recursively)
copy the properties of the source objects to the destination object.
Translating: angular.merge
is deep (recursively), copies the properties of source objects to the target object.
Here's the same example replacing angular.extend
with angular.merge
:
var src1 = { name: 'David', age: 30 };
var src2 = { age: 26, skill: {} };
var dst = {};
console.log(angular.merge(dst, src1, src2));
// Output: { name: 'David', age: 26, skill: {} }
// It seems to the same result as the previous example's, however, ...
console.log(src2.skill === dst.skill);
// Output: false
// src2.skill and dst.skill point to different skill objects due to deep copy.
Reference: Copy vs. Extend vs. Merge