jQuery扩展与角度扩展

张永嘉

2023-03-14

问题内容：

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

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

尽管jquery.extend有充分的文档记录，但是angular.extend缺少详细信息，并且注释没有提供答案。（https://docs.angularjs.org/api/ng/function/angular.extend）。

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

问题答案：

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>

jQuery扩展与角度扩展

相关阅读

相关文章

相关问答

相关工具

相关文档