63

这两个扩展函数有什么区别？

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

虽然 jquery.extend 有据可查，但 angular.extend 缺乏详细信息，并且那里的评论没有提供任何答案。（https://docs.angularjs.org/api/ng/function/angular.extend）。

angular.extend 是否也提供深拷贝？

4

4 回答 4

97

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：我只看到一个显着的区别，那就是 jQueryextend允许您只指定一个对象，在这种情况下，它jQuery本身就是目标。

共通的地方：

  • 这是一个浅拷贝。因此，如果src有一个p引用对象dst的属性，将获得一个p引用同一对象的属性（不是对象的副本）。

  • 它们都返回目标对象。

  • 它们都支持多个源对象。

  • 它们都按顺序执行多个源对象，因此如果多个源对象具有相同的属性名称，最后一个源对象将“获胜”。

测试页面：Live Copy | 直播源

<!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>
于 2013-05-28T17:12:26.567 回答
31

两者之间有一个细微的区别，以前的答案中没有提到。

jQuery 的 .extend() 允许您有条件地添加键值对，前提是值已定义。所以在 jQuery 中， this:$.extend({}, {'a': x ? x : undefined});将在未定义{}的情况下返回。x

然而，在 Angular 的 .extend() 中， this:angular.extend({}, {'a': x ? x : undefined});将返回{'a': undefined}，即使x未定义。所以无论如何，钥匙都会在那里。

这可能是好事也可能是坏事，这取决于您的需要。无论如何，这是两个库之间的行为差​​异。

于 2014-03-14T11:27:11.670 回答
6

1.0.7 angularjs 版本声明扩展和复制方法不再复制 angularjs 内部 $$hashKey 值。

请参阅发行说明 @ https://github.com/angular/angular.js/blob/master/CHANGELOG.md

angular.copy/angular.extend：不要在复制/扩展函数中复制 $$hashKey。（6d0b325f，#1875）

在 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 进行浅拷贝。

于 2013-05-28T17:16:37.800 回答
1

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);
于 2013-12-08T05:18:47.073 回答