jquery扩展与角度扩展 | jquery扩展与角度扩展

本文介绍了jquery扩展与角度扩展的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

What is the difference between these two extend functions?

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

虽然 jquery.extend 有据可查，但 angular.extend 缺乏细节，那里的评论也没有提供答案.(https://docs.angularjs.org/api/ng/function/angular.扩展).

While the jquery.extend is well documented the angular.extend lacks details and the comments there provide no answers. (https://docs.angularjs.org/api/ng/function/angular.extend).

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

Does angular.extend also provide deep copy?

推荐答案

angular.extend 和 jQuery.extend 非常相似.它们都从一个或多个源对象到目标对象进行浅属性复制.例如:

angular.extend and jQuery.extend are very similar. They both do a shallow property copy from one or more source objects to a destination object. So for instance:

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 本身就是目标.

Getting back to extend: I only see one significant difference, which is that jQuery's extend allows you to specify just one object, in which case jQuery itself is the target.

共同点:

这是一个浅拷贝.所以如果 src 有一个属性 p 引用一个对象，dst 将得到一个属性 p 引用一个对象相同对象(不是对象的副本).

It's a shallow copy. So if src has a property p that refers to an object, dst will get a property p that refers to the same object (not a copy of the object).

它们都返回目标对象.

它们都支持多个源对象.

They both support multiple source objects.

它们都按顺序处理多个源对象，因此如果多个源对象具有相同的属性名称，最后一个源对象将获胜".

They both do the multiple source objects in order, and so the last source object will "win" in case more than one source object has the same property name.

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

这篇关于jquery扩展与角度扩展的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！