Ren*_*aud 62 javascript jquery extend angularjs
这两个扩展函数有什么区别？
angular.extend(a,b);
$.extend(a,b);
虽然jquery.extend有很好的文档记录,但angular.extend缺少细节,而那里的注释没有提供任何答案.(https://docs.angularjs.org/api/ng/function/angular.extend).
angular.extend还提供深层复制吗？
T.J*_*der 96
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.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.
回到extend:我只看到一个显着的区别,即jQuery extend允许你只指定一个对象,在这种情况下jQuery它本身就是目标.
共通的地方:
这是一个浅薄的副本.因此,如果src有一个p引用对象dst的属性,将获得一个p引用同一对象的属性(不是该对象的副本).
它们都返回目标对象.
它们都支持多个源对象.
它们都按顺序执行多个源对象,因此如果多个源对象具有相同的属性名,则最后一个源对象将"获胜".
<!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>
asa*_*fge 31
两者之间存在一个微妙的差异,这在先前的答案中没有提到.
jQuery的.extend()允许您有条件地添加键,值对,仅在定义值时.所以在jQuery中,这个:$.extend({}, {'a': x ? x : undefined});将返回{}以防x未定义.
然而,在Angular的.extend()中,这angular.extend({}, {'a': x ? x : undefined});将:返回{'a': undefined},即使x未定义.无论如何,关键将在那里.
根据您的需要,这可能是好事也可能是坏事.无论如何,这是两个库之间的行为差异.
1.0.7 angularjs构建状态,表示extend©方法不再复制angularjs内部$$ hashKey值.
请参阅发行说明@ https://github.com/angular/angular.js/blob/master/CHANGELOG.md
angular.copy/angular.extend:不要在复制/扩展函数中复制$$ hashKey.(6d0b325f,#1875)
在Chomre dev工具方法中对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做了浅拷贝.
| 归档时间： |
|
| 查看次数： |
36384 次 |
| 最近记录： |