Question

这两个扩展功能有什么区别？

  angular.extend(a,b);
  $.extend(a,b);

虽然jquery.extend已有详细记录，但angular.extend缺少详细信息，而那里的注释没有提供任何答案。（https://docs.angularjs.org/api/ng/function/angular.extend）。

angular.extend是否也提供深层复制？

Answer 1

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本身就是目标。 / p>

共同点：

这是一个浅薄的副本。因此，如果src具有引用对象的属性p，则dst将获得引用相同对象的属性p（不是对象的副本）。
它们都返回目标对象。
它们都支持多个源对象。
它们都按顺序执行多个源对象，因此如果多个源对象具有相同的属性名称，则最后一个源对象将“获胜”。

测试页面：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>

Answer 2

两者之间存在一个微妙的差异，这在以前的答案中没有提及。

jQuery的.extend（）允许您有条件地添加键值对，仅在定义值时。所以在jQuery中，$.extend({}, {'a': x ? x : undefined});将返回{}，以防x未定义。

在Angular的.extend（）中，即使angular.extend({}, {'a': x ? x : undefined});未定义，此{'a': undefined}也会返回x。无论如何，关键都在那里。

根据您的需要，这可能是好事也可能是坏事。无论如何，这两个库之间的行为存在差异。

Answer 3

1.0.7 angularjs构建状态，扩展＆amp;复制方法不再复制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做了浅拷贝。

Answer 4

AngularJS中的

.extend（）与jQuery的.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);

jquery extend vs angular extend

4 个答案: