源码网商城，靠谱的源码在线交易网站我的订单购物车帮助

当前位置：首页 > 资讯 > 技术文档

jQuery中extend()和fn.extend()方法详解

时间：2021-09-07 18:13 编辑：来源：阅读：
扫一扫，手机访问

摘要：jQuery中extend()和fn.extend()方法详解

这两个方法用的是相同的代码，一个用于给jQuery对象或者普通对象合并属性和方法一个是针对jQuery对象的实例，对于基本用法举几个例子： html代码如下：

[url=http://www.w3cschool.cc/manual/jquery/]http://www.w3cschool.cc/manual/jquery/[/url] 下面来分析下1.7.1源码中是怎么实现的：

[u]复制代码[/u] 代码如下:

jQuery.extend = jQuery.fn.extend = function() {

    var options, name, src, copy, copyIsArray, clone,

        target = arguments[0] || {},

        i = 1,

        length = arguments.length,

        deep = false;

       ...

}

首先是定义了一组变量，因为参数个数不确定所以就直接调用arguments对象访问传递的参数变量 options：指向某个源对象。 ‰ ‰ 变量 name：表示某个源对象的某个属性名。 ‰ ‰ 变量 src：表示目标对象的某个属性的原始值。 ‰ ‰ 变量 copy：表示某个源对象的某个属性的值。 ‰ ‰ 变量 copyIsArray：指示变量 copy 是否是数组。 ‰ ‰ 变量 clone：表示深度复制时原始值的修正值。 ‰ ‰ 变量 target：指向目标对象。 ‰ ‰ 变量 i：表示源对象的起始下标。 ‰ ‰ 变量 length：表示参数的个数，用于修正变量 target。 ‰ ‰ 变量 deep：指示是否执行深度复制，默认为 false。为了更好地了解代码实现这里以上面举的一个例子作为演示观察源代码执行情况

[u]复制代码[/u] 代码如下:

      var obj1={name:'Tom',love:{drink:'milk',eat:'bread'}};

      var obj2={name:'Jack',love:{drink:'water',sport:'football'}};

      $.extend(true,obj1,obj2)

源码分析

[u]复制代码[/u] 代码如下:

// Handle a deep copy situation

    if ( typeof target === "boolean" ) {

        deep = target;

        target = arguments[1] || {};

        // skip the boolean and the target

        i = 2;

    }

判断是不是深度复制，如果第一个参数是布尔值那么就把第一个参数的值给deep,然后把第二个参数作为目标对象，如果第二个参数不存在就赋值为一个空对象，把源对象的下标改为2，在这个例子里面是走这里的因为第一个参数是ture然后把deep变成了true ,target被修正成了第二个参数也即是obj1,源对象的起始下标为2就是从第三个开始作为源对象也就是本例中的obj2

[u]复制代码[/u] 代码如下:

// Handle case when target is a string or something (possible in deep copy)

    if ( typeof target !== "object" && !jQuery.isFunction(target) ) {

        target = {};

    }

这里对target又进一步进行了处理对于非对象和函数的数据类型而言增加自定义属性是无效的比如字符串自能调用自带的方法和属性

[u]复制代码[/u] 代码如下:

// extend jQuery itself if only one argument is passed

    if ( length === i ) {

        target = this;

        --i;

    }

如果length属性等于i的值那就表示没有目标对象存在，正常情况下length应该是大于i的值的，那么这个时候就把this作为目标对象把i值减一实现length值大于i值（比i大1）这个就是jQuery给自己扩展属性的方法的实现原理，只要不传入目标对象就可以啦两种可能的情况：$.extend(obj) 或者 $.extend(false/true,obj)；

[u]复制代码[/u] 代码如下:

    for ( ; i < length; i++ ) {

        // Only deal with non-null/undefined values

        if ( (options = arguments[ i ]) != null ) {

            // Extend the base object

            for ( name in options ) {

                src = target[ name ];

                copy = options[ name ];

                // Prevent never-ending loop

                if ( target === copy ) {

                    continue;

                }

                // Recurse if we're merging plain objects or arrays

                if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {

                    if ( copyIsArray ) {

                        copyIsArray = false;

                        clone = src && jQuery.isArray(src) ? src : [];

                    } else {

                        clone = src && jQuery.isPlainObject(src) ? src : {};

                    }

                    // Never move original objects, clone them

                    target[ name ] = jQuery.extend( deep, clone, copy );

                // Don't bring in undefined values

                } else if ( copy !== undefined ) {

                    target[ name ] = copy;

                }

            }

        }

    }

这个部分就是此方法的核心了，从arguements对象的第i个下标值开始循环操作首先过滤掉源对象是null或者是undefined的情况可以看到其实源对象不一定真的就是对像，也可以是其他类型的值比如字符串比如这样写：

[u]复制代码[/u] 代码如下:

console.log($.extend({'name':'tom'},'aa'));   //Object {0: "a", 1: "a", name: "tom"}

是不是感觉很奇怪啊？究竟是怎么实现的呢？下面接着看过滤完之后开始进行for循环 src保存的是目标对象的某个键的值，copy属性保存的源对象的某个键的值，这两个键都是一样的

[u]复制代码[/u] 代码如下:

// Prevent never-ending loop

                if ( target === copy ) {

                    continue;

                }

如果源对象的某个属性值就是目标对象可能会造成死循环导致程序崩溃所以这里做了一个限制让其跳过此次循环例如：

[u]复制代码[/u] 代码如下:

var o = {};

o.n1 = o;

$.extend( true, o, { n2: o } );

// 抛出异常：

// Uncaught RangeError: Maximum call stack size exceeded

但是这样做也会冤枉一些正常的情况比如：

[u]复制代码[/u] 代码如下:

 var obj1={a:'a'}

 var obj2={a:obj1};

 console.log($.extend(obj1,obj2)); //Object {a: "a"}

这种情况也是满足源对象值等于目标对象的但是结果发现obj1的a的属性值并没有被修改，就是因为执行了continue，下面把源码的这段话注释掉在执行

[u]复制代码[/u] 代码如下:

Object {a: Object}

这个时候就是正常被修改了个人感觉这个地方需要改进；接着就是一个if判断就是区分是不是进行深度复制的先不看深度复制的先看一般的

[u]复制代码[/u] 代码如下:

target[ name ] = copy;

很简单就是只要copy有值就直接复制给目标对象，目标对象有的就修改没有就增加，这样就实现了合并啦。 for循环之后在把新的目标对象返回，所以目标对象最后是被修改的，而且结果和返回的结果是一样的。

[u]复制代码[/u] 代码如下:

// Return the modified object

    return target;

};

下面再来说说深度复制了怎么去处理首先保证deep是true,copy有值并且是对象或者数组（如果不是对象和数组深度复制也就无从谈起）然后再分数组和对象来处理，先来看数组的情况：

[u]复制代码[/u] 代码如下:

if ( copyIsArray ) {

         copyIsArray = false;

         clone = src && jQuery.isArray(src) ? src : [];
} else {

        clone = src && jQuery.isPlainObject(src) ? src : {};

}

如果是数组copyIsArray的值为真然后走里面的把值改成false ，针对当前循环的源对象属性，目标对象可能有也可能没有，有的话判断一下是不是数组是的话就是原来的数组不变不是的话就让它变成一个数组，因为既然源对象的当前属性是数组最后目标元素也必须是数组。不是数组就是对象把目标对象当前属性改成对象。

[u]复制代码[/u] 代码如下:

    // Never move original objects, clone them

     target[ name ] = jQuery.extend( deep, clone, copy );

然后把源对象的当前属性值（是数组或对象）和已经被改造过的目标对象的当前属性进行递归合并最后返回的新的数组或者对象赋值给目标对象，最终实现了深度复制。但是这里面还有一个比较奇怪的现象，比如这样操作：

[u]复制代码[/u] 代码如下:

console.log($.extend({a:1},'aa')); //Object {0: "a", 1: "a", a: 1}

原来源对象不一定真的是对象e而且居然可以把字符串拆开跟目标对象合并，原来for...in循环是操作字符串的

[u]复制代码[/u] 代码如下:

      var str='aa';

      for(var name in str){ 

         console.log(name);

         console.log(str[name])

      }

这样也是可以的，会把字符串拆开按数字下标读取，但是在源码中

[u]复制代码[/u] 代码如下:

if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) )

是有数组和对象限制的，那么深度复制的时候是不是就没有效果了呢？经过我测试深度复制也是可以的，因为在源码里面copy的值竟然变成了匿名函数函数 alert(jQuery.isPlainObject(copy)); //true 至于为什么是函数笔者还没搞清楚留待以后解决吧！

全部评论(0)

上一篇：JQuery在页面中添加和除移DOM示例代码
下一篇：JQuery防止退格键网页后退的实现代码

资讯排行榜
更多>>

关于我们 | 广告合作 | 联系我们 | 隐私条款 | 免责声明 | 网站地图

苏ICP备2024110244号-2 苏公网安备32050702011978号增值电信业务经营许可证编号：苏B2-20251499 | Copyright 2018 - 2025 源码网商城 (www.ymwmall.com) 版权所有

联系客服

客服电话：
400-000-3129

微信版

扫一扫进微信版

返回顶部