jQuery jquery扩展与角度扩展
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16797659/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery extend vs angular extend
提问by Renaud
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).
虽然 jquery.extend 有据可查，但 angular.extend 缺乏细节，那里的评论也没有提供答案。（https://docs.angularjs.org/api/ng/function/angular.extend）。
Does angular.extend also provide deep copy?
angular.extend 是否也提供深拷贝？
回答by T.J. Crowder
angular.extendand jQuery.extendare verysimilar. They both do a shallowproperty copy from one or more source objects to a destination object. So for instance:
angular.extend并且jQuery.extend是非常相似的。它们都从一个或多个源对象到目标对象进行浅层属性复制。所以例如：
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.copyprovides a deepcopy:
angular.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 extendallows you to specify just one object, in which case jQueryitself is the target.
回到extend：我只看到一个重要的区别，即 jQueryextend允许您只指定一个对象，在这种情况下，它jQuery本身就是目标。
Things in common:
共通的地方：
It's a shallow copy. So if
srchas a propertypthat refers to an object,dstwill get a propertypthat refers to the sameobject (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.
这是一个浅拷贝。所以如果
src有一个属性p引用一个对象，dst就会得到一个p引用同一个对象的属性（不是对象的副本）。它们都返回目标对象。
它们都支持多个源对象。
它们都按顺序执行多个源对象，因此如果多个源对象具有相同的属性名称，则最后一个源对象将“获胜”。
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>
回答by asafge
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 xis undefined.
jQuery 的 .extend() 允许您有条件地添加键值对，仅当值被定义时。所以在 jQuery 中， this:$.extend({}, {'a': x ? x : undefined});将{}在x未定义的情况下返回。
In Angular's .extend() however, this: angular.extend({}, {'a': x ? x : undefined});will return {'a': undefined}, even if xis undefined. So the key will be there, no matter what.
然而，在 Angular 的 .extend() 中， this:angular.extend({}, {'a': x ? x : undefined});将返回{'a': undefined}，即使x是未定义的。因此，无论如何，关键都在那里。
This could be a good or a bad thing, depending on what you need. Anyway this is a difference in behaviorbetween the two libraries.
这可能是好事也可能是坏事，这取决于您的需要。无论如何，这是两个库之间的行为差异。
回答by Mike Pugh
The 1.0.7 angularjs build states that the extend & copy methods no longer copy over the angularjs internal $$hashKey values.
1.0.7 angularjs 构建声明扩展和复制方法不再复制 angularjs 内部 $$hashKey 值。
See release notes @ https://github.com/angular/angular.js/blob/master/CHANGELOG.md
请参阅发行说明@ https://github.com/angular/angular.js/blob/master/CHANGELOG.md
angular.copy/angular.extend: do not copy $$hashKey in copy/extend functions. (6d0b325f, #1875)
angular.copy/angular.extend：不要在复制/扩展函数中复制 $$hashKey。（6d0b325f，#1875）
A quick test of the angular.copy in Chomre dev tools method shows that it does do a deep copy.
在 Chomre 开发工具方法中对 angular.copy 的快速测试表明它确实进行了深度复制。
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 on the other hand does a shallow copy.
另一方面，angular.extend 做一个浅拷贝。
回答by RavenHursT
.extend() in AngularJS works similarly to jQuery's .extend()
AngularJS 中的 .extend() 与 jQuery 的 .extend() 类似
http://jsfiddle.net/Troop4Christ/sR3Nj/
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);
