Jquery extend() 方法

Jquery 中$.extend() 方法用于实现合并多个对象的属性到第一个对象中。

$.extend(object1, [object2] );

将后两个对象即object1和object2中的属性合并到object1中,默认是合并覆盖操作,不进行迭代。

此时object1 对object2 的拷贝为浅拷贝(公用一份实体,仅仅是引用变量不同)

<script type="text/javascript">
  obj1 = {a: "this is a", b: "this is b"};

  obj2 = {
          a: {a_c: "this is a_c", a_d: "this is a_d"},
          c: "this is c",
          }

  $.extend(obj1, obj2);
  console.log(obj1.a);
  // 输出 Object {a_c: "this is a_c", a_d: "this is a_d"}
  // 覆盖了object1 中的a对象

  console.log(obj1.a.a_c)         // 输出 this is a_c
  obj2.a.a_c = "this is A_C";     // 改变obj2中a.a_c的值
  console.log(obj1.a.a_c);        // 输出 this is A_C
</script>

对于浅拷贝的简单实现

$ = {
     extend : function(target, options) {
        for (name in options) {
            target[name] = options[name];
        }
        return target;
    }
};

若要进行合并迭代操作,则设置第一个参数为true,此时的拷贝为深拷贝(源对象与拷贝对象互相独立,其中任何一个对象的改动都不会对另外一个对象造成影响)

$.extend(true, object1, [object2] );

<script type="text/javascript">
  obj1 = {a: {a_a: "this is a_a"}, b: "this is b"};

  obj2 = {
          a: {a_c: "this is a_c", a_d: "this is a_d"},
          c: "this is c",
          }

  $.extend(true, obj1, obj2);
  console.log(obj1.a);
  // 输出 Object {a_a: "this is a_a", a_c: "this is a_c", a_d: "this is a_d"}
  // 合并并迭代了object1中的a对象,不仅仅是覆盖

  console.log(obj1.a.a_c);        // 输出 this is a_c
  obj2.a.a_c = "this is A_C";     // 改变obj2中a.a_c值
  console.log(obj1.a.a_c);        // 输出 this is a_C

</script>

对于深拷贝的简单实现,需递归调用$.extend()实现迭代操作

$ = {
    extend : function(deep, target, options) {
        for (name in options) {
            copy = options[name];
            if (deep && copy instanceof Array) {
                target[name] = $.extend(deep, [], copy);
            } else if (deep && copy instanceof Object) {
                target[name] = $.extend(deep, {}, copy);
            } else {
                target[name] = options[name];
            }
        }
        return target;
    }
};

循环内有三种情况: 
1. 属性是数组时,target[name]初始化为空数组,递归调用extend; 
2. 属性是对象时,target[name]初始化为空对象,递归调用extend; 
3. 否则,直接复制属性。

时间: 2024-10-10 23:18:31

Jquery extend() 方法的相关文章

jQuery.extend方法和开发中变量的复用

最近在用commonJS规范进行客户端开发,遇到如下问题: 一般一个模块内部可能会定义一系列变量或一系列相关变量,比如写了一个颜色选择弹框模块大概会有如下变量定义 var settings = { //设置它是否绝对定位 position: { //定位可以是绝对定位,可以是相对定位(需要有target),也可以是默认定位 type: "none", top: 30, left: 30, //表示相对于目标的定位 target: "", zindex: 0 }, /

对jQuery.extend()方法的分析

jQuery.extend方法是我们常用的方法,也是jQuery源码中的基础方法.它的主要作用是:将一个或多个“源对象”合并到一个“目标对象”中,并返回目标对象.它主要有三种表现形式: a.jQuery.extend(destination, source1, source2, source3 ....) b.jQuery.extend( source ) c.jQuery.extend(boolean, destination, source1, source2, source3 ....)

jQuery extend方法使用及实现

一.jQuery extend方法介绍 jQuery的API手册中,extend方法挂载在jQuery和jQuery.fn两个不同对象上方法,但在jQuery内部代码实现的是相同的,只是功能却不太一样: 且看官方给出解释: jQuery.extend(): Merge the contents of two or more objects together into the first object.(把两个或者更多的对象合并到第一个当中): jQuery.fn.extend():Merge t

jquery.extend方法

jquery.extend()用来扩展jquery中方法,实现插件. 1.jQuery.extend函数详细用法! 扩展jQuery静态方法. 1$.extend({2test:function(){alert('test函数')}3}) 用法: $.test() 2.jQuery.extend 函数详解 上述两个虽说叫详解,讲解都很简略,下面这篇好一点. 3.jQuery $.extend()用法总结 jQuery.extend(object);为扩展jQuery类本身.为类添加新的方法. j

jQuery extend方法介绍

jQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(object); jQuery.extend(object); jQuery.extend(object);为扩展jQuery类本身.为类添加新的方法. jQuery.fn.extend(object);给jQuery对象添加方法.这个应该很好理解吧.举个例子. 1.合并多个对象. 这里使用的就是$.extend()的嵌套多个对象的功能. 所谓嵌套多个对象,有点类似于数组的合并的操作. <span style=&quo

jQuery extend方法使用

  $(function () { var object1 = { apple: 0, banana: {weight: 52, price: 100}, cherry: 97 }; var object2 = { banana: {price: 200}, durian: 100 }; /* object2 合并到 object1 中 */ $.extend(object1, object2); /*判断是否存在对象如果有则直接调用该对象将普通对象转换成json数据 否则创建一个函数用于讲普通

jQuery.extend()、jQuery.fn.extend()扩展方法详解

jQuery自定义了jQuery.extend()和jQuery.fn.extend()方法.其中jQuery.extend()方法能够创建全局函数或者选择器,而jQuery.fn.extend()方法能够创建jQuery对象方法. 例如: jQuery.extend({ showName : function(name){ alert(name) } }); jQuery.showName("深蓝"); jQuery.extend()除了可以创建插件外,还可以用来扩展jQuery对象

理解一下jQuery.extend()和jQuery.fn.extend()方法

为了方便用户创建插件,jquery提供了jQuery.extend()和jQuery.fn.extend()方法.1. jQuery.extend() 方法有一个重载. jQuery.extend(object) ,一个参数的用于扩展jQuery类本身,也就是用来在jQuery类/命名空间上增加新函数,或者叫静态方法,例如jQuery内置的 ajax方法都是用 jQuery.ajax()这样调用的,有点像 "类名.方法名" 静态方法的调用方式.下面我们也来写个jQuery.extend

jQuery.extend()、jQuery.fn.extend()扩展方法示例详解

jQuery自定义了jQuery.extend()和jQuery.fn.extend()方法. 其中jQuery.extend()方法能够创建全局函数或者选择器, 而jQuery.fn.extend()方法能够创建jQuery对象方法. 例如: 复制代码代码如下: jQuery.extend({ showName : function(name){ alert(name) } }); jQuery.showName("深蓝"); jQuery.extend()除了可以创建插件外,还可以