js、Jquery、AngularJs中的extend方法

来源：互联网发布：nginx request body 编辑：程序博客网时间：2024/06/11 05:27

1、js中的extend();
http://www.cnblogs.com/5201314/archive/2009/05/22/1487213.html
js虽然是脚本语言；但是同样支持与java、C#、C++等语言的继承；使用Object.extend()方法实现继承；

Object.extend = function(destination, source) {for (var property in source) {    destination[property] = source[property];}return destination;}

Prototype 对Object类进行的扩展主要通过一个静态函数Object.extend(destination, source)实现了JavaScript中的继承。从语义的角度, Object.extend(destination, source)方法有些不和逻辑, 因为它事实上仅仅实现了从源对象到目标对象的全息拷贝。不过你也可以这样认为：由于目标对象拥有了所有源对象所拥有的特性, 所以看上去就像目标对象继承了源对象(并加以扩展)一样。另外, Prototype对Object扩展了几个比较有用的静态方法, 所有其他的类可以通过调用这些静态方法获取支持；

Object.extend = function(destination, source) { // 一个静态方法表示继承, 目标对象将拥有源对象的所有属性和方法for (var property in source) {    destination[property] = source[property];   // 利用动态语言的特性, 通过赋值动态添加属性与方法}return destination;   // 返回扩展后的对象}Object.extend(Object, { inspect: function(object) {   // 一个静态方法, 传入一个对象, 返回对象的字符串表示    try {      if (object == undefined) return 'undefined'; // 处理undefined情况      if (object == null) return 'null';     // 处理null情况      // 如果对象定义了inspect方法, 则调用该方法返回, 否则返回对象的toString()值      return object.inspect ? object.inspect() : object.toString();     } catch (e) {      if (e instanceof RangeError) return '...'; // 处理异常情况      throw e;    }},keys: function(object) {     // 一个静态方法, 传入一个对象, 返回该对象中所有的属性, 构成数组返回    var keys = [];    for (var property in object)      keys.push(property);     // 将每个属性压入到一个数组中    return keys;},values: function(object) {   // 一个静态方法, 传入一个对象, 返回该对象中所有属性所对应的值, 构成数组返回    var values = [];    for (var property in object) values.push(object[property]); // 将每个属性的值压入到一个数组中    return values;},clone: function(object) {    // 一个静态方法, 传入一个对象, 克隆一个新对象并返回    return Object.extend({}, object);}});

2、Jquery中的extend();
http://api.jquery.com/jQuery.extend/
jq中目前最新版本的extend() 函数如下：

jQuery.extend( [deep ], target, object1 [, objectN ] )

参数的作用分别是：

//deepType: Boolean//如果为true则表示用递归方式进行深复制(If true, the merge becomes recursive (aka. deep copy).)//targetType: Object//目标对象(The object to extend. It will receive the new properties.)//object1Type: Object//复制源对象(An object containing additional properties to merge in.)//objectNType: Object//多个复制源对象(Additional objects containing properties to merge in.)

当复制源的参数的个数是一个或者多个的时候；复制源的属性都会被添加到target对象中的去；如果参数为null或者undefined则会被忽略不进行复制操作；
如果只有一个参数；则表示目标对象被省略；这种情况下当前的jQ对象对假设自己是目标；通过这样做，您可以到 jQuery 命名空间添加新功能。这可用于希望将新方法添加到 JQuery 插件作者。

请牢记这个目标对象（第一个参数）将被修改，并还将从 $.extend() 返回。如果，然而，你想要保护两个原始对象，你可以通过传递一个空对象作为目标︰

var object = $.extend({}, object1, object2);

该方法的递归复制并不是默认的；默认不使用；只有显示地传递参数deep时才进行此项；没有定义的属性不会被复制；但是继承的属性会被复制；通过新的 MyCustomObject(args) 或如日期或正则表达式、内置 JavaScript 类型构造对象的属性不重新构造，并将作为普通对象显示在生成的对象或数组中。在进行深复制时；对象和数组进行扩展，但对象包装在基元类型，如字符串、布尔值和数字不会扩展。深部延伸周期性数据结构将导致错误。

Demo1：

<!doctype html><html lang="en"><head>  <meta charset="utf-8">  <title>jQuery.extend demo</title>  <script src="https://code.jquery.com/jquery-1.10.2.js"></script></head><body><div id="log"></div><script>var object1 = {  apple: 0,  banana: { weight: 52, price: 100 },  cherry: 97};var object2 = {  banana: { price: 200 },  durian: 100};// Merge object2 into object1$.extend( object1, object2 );// Assuming JSON.stringify - not available in IE<8$( "#log" ).append( JSON.stringify( object1 ) );</script></body></html>//{"apple":0,"banana":{"price":200},"cherry":97,"durian":100}

Demo2：

<!doctype html><html lang="en"><head>  <meta charset="utf-8">  <title>jQuery.extend demo</title>  <script src="https://code.jquery.com/jquery-1.10.2.js"></script></head><body><div id="log"></div><script>var object1 = {  apple: 0,  banana: { weight: 52, price: 100 },  cherry: 97};var object2 = {  banana: { price: 200 },  durian: 100};// Merge object2 into object1, recursively$.extend( true, object1, object2 );// Assuming JSON.stringify - not available in IE<8$( "#log" ).append( JSON.stringify( object1 ) );</script></body></html>//defaults -- {"validate":false,"limit":5,"name":"foo"}//options -- {"validate":true,"name":"bar"}//settings -- {"validate":true,"limit":5,"name":"bar"}

3、angularJs中的extend();
http://blog.csdn.net/itsonglin/article/details/47428955
同jq相似；angular中的扩展函数也可单个或者多个复制；angular.extends()方法的第一个参数是要被扩展的对象，后面可以传入一个或多个对象。

如果想要保存一个对象的状态，除了可以调用angular.copy()方法外，还可以把一个空对象｛｝作为第一个对象传入。

但要注意的是，angular.extends()是非递归的，也就是说：如果扩展的属性中有对象，那么二者同时引用同一个对象！

<!DOCTYPE html>  <html ng-app="extendApp">  <head>      <meta charset="UTF-8">      <title></title>      <script src="../js/angular.js"></script>      <script type="text/javascript">          angular.module("extendApp", [])                  .controller("extendController", function($scope)                  {                      $scope.baby =                      {                          cry : function()                          {                              console.log("I can only cry!");                          }                      }                      $scope.adult =                      {                          earn : function()                          {                              console.log("I can earn money!");                          },                          lover:                          {                              love:function()                              {                                  console.log("I love you!");                              }                          }                      }                      $scope.human = {}                      $scope.hehe = "hehe ";                      $scope.extend = function()                      {                          angular.extend($scope.human, $scope.baby, $scope.adult);                          $scope.human.cry();                          $scope.human.earn();                          <!-- 注意，这里修改了lover对象的love()方法，由于extends()方法不是深复制的，$scope.human                           和$scope.adult其实引用的是同一个对象-->                          $scope.human.lover.love = function()                          {                              console.log("I hate you!");                          }                          <!-- 这两行都会输出“I hate you !"，可怜的adult对象,                          他把自己的lover分享给了human! -->                          $scope.human.lover.love();                          $scope.adult.lover.love();                      }                  });      </script>  </head>  <body>  <div ng-controller="extendController">      <button ng-click="extend()">点击我！</button>  </div>  </body>  </html>

console:

I can only cry!  I can earn money!  I hate you!  I hate you!

2 0