javascript - jquery 扩展与 Angular 扩展

标签 javascript jquery angularjs extend

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

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

虽然 jquery.extend 有很好的文档记录,但 angular.extend 缺乏细节,那里的评论也没有提供答案。 (https://docs.angularjs.org/api/ng/function/angular.extend)。

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

最佳答案

angular.extendjQuery.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 相同对象(不是对象的副本)。

  • 它们都返回目标对象。

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

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

测试页: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>

关于javascript - jquery 扩展与 Angular 扩展,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16797659/

相关文章:

javascript - 未捕获的类型错误 : Cannot read property '0' of null

jquery - 从按钮行为提交表单

asp.net - Javascript DoEvents 等效吗?

java - 使用 AngularJS 调用 WS Rest Java

javascript - 如何在运行时检查类的字段是否允许为 null/未定义,以验证 JSON?

javascript - 监听先前选择的输入的变化

javascript - 在 enzyme 中模拟 history.back()

angularjs - Bootstrap-Tour 与 angularJS

javascript - 在 $stateChangeStart 触发之前解决抽象父级中的 promise

javascript - 用户脚本在 Firefox 中有效,但 Chrome 给出 : Uncaught TypeError: Cannot read property 'length' of null