`

jQuery中的extend方法

阅读更多

jQuery中的extend方法jQuery中的extend方法通过不同的参数实现了几种不同的继承方法:

    * 1.extend(src)

    将src对象的属性和方法逐一复制给jQuery或jQuery对象

    * 2.extend(dest,src1,src2,src3...srcN)

        将 src1、src2...对象的属性和方法逐一复制给dest对象,需要注意的是,在复制的过程中,排在后面的参数(对象)将会覆盖排在前面的参数的属性和方法;实际上,该方法和后面的方法3都提供了一种“深度继承”的方法,即:参数一表示的对象可以通过该方法一次实现逐一按层次的父类继承。
    如下图所示:
    srcN
    ...
    src3
    src2
    src1
    dest
        使用该方法,可以一次将”继承“dest的多个父类,需要注意的是src3提供的属性和方法由可能会被src2,src1重载。

    * 3.extend(boolean,dest,src1,src2...)

    与其他的类库不同的是,jQuery的extend方法提供了“深层拷贝”的功能,如果你传入的第一个参数为boolean型变量,则该变量为深层拷贝的标志,第二个参数为extend方法的目标对象,其余参数为需要进行继承的“父类”。如果第一个参数的值为true(深层拷贝),并且dest和src元素都包括相同名称的对象属性,则对该对象属性的方法和属性再进行一次复制。

    * 最后我们来通过分析源代码,来加深对该继承机制的理解:

jQuery.extend = jQuery.fn.extend = function() {
    // copy reference to target object
    var target = arguments[0] || {}, i = 1, length = arguments.length, deep = false, options;

    // Handle a deep copy situation  /*如果第一个参数为boolean值,则取第二个参数为目标对象*/
    if ( target.constructor == Boolean ) {
        deep = target;
        target = arguments[1] || {};
        // skip the boolean and the target
        i = 2;
    }

    // Handle case when target is a string or something (possible in deep copy)
    /*如果目标参数不是object或者function,那么就有可能是深度copy,*/
    if ( typeof target != "object" && typeof target != "function" )
        target = {};

    // extend jQuery itself if only one argument is passed /*如果参数长度为1,则将参数表示的对象的属性和方法复  制给jQuery本身*/
    if ( length == i ) {
        target = this;
        --i;
    }

    for ( ; i < length; i++ )
        // Only deal with non-null/undefined values当参数都为非空时,
        if ( (options = arguments[ i ]) != null )
            // Extend the base object
            for ( var name in options ) {
                var src = target[ name ], copy = options[ name ];

                // Prevent never-ending loop /*防止死循环*/
                if ( target === copy )
                    continue;

                // Recurse if we're merging object values/*深度继承的实现*/
                if ( deep && copy && typeof copy == "object" && !copy.nodeType )
                    target[ name ] = jQuery.extend( deep,
                        // Never move original objects, clone them
                        src || ( copy.length != null ? [ ] : { } )
                    , copy );

                // Don't bring in undefined values  /*正常情况下的继承实现*/
                else if ( copy !== undefined )
                    target[ name ] = copy;

            }

    // Return the modified object
    return target;
};

    * 注意:

在这里还有一个特殊的地方,就是在函数开头的地方有jQuery.extend = jQuery.fn.extend,而在程序的前面已经将jQuery.prototype赋值给jQuery.fn了,所以在后面的调用中会出现 jQuery.extend()和jQuery.fn.extend()的不同调用,这两个方法调用产生的结果也不一样,jQuery.extend() 的调用并不会把方法扩展到对象的实例上,引用它的方法也需要通过jQuery类来实现,如jQuery.init(),而 jQuery.fn.extend()的调用把方法扩展到了对象的prototype上,所以实例化一个jQuery对象的时候,它就具有了这些方法,这是很重要的,在jQuery.js中到处体现这一点

 

本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/quickgu/archive/2009/12/18/5030262.aspx

分享到:
评论

相关推荐

    原生js实现jquery $.extend方法

    原生js实现jquery $.extend方法 通过遍历对象属性来实现

    jQuery.extend 函数详解

    `jQuery.extend`允许省略`destination`参数,此时只能有一个源对象,并且该对象的属性会被合并到调用`extend`方法的对象中。 **1. 合并到jQuery全局对象** ```javascript $.extend({ hello: function() { alert...

    jQuery.extend

    jQuery.extend是jQuery库中的一个非常重要的方法,用于合并两个或更多的对象属性到一个目标对象中。这个功能在开发过程中非常实用,尤其是在处理配置选项、扩展插件功能或者进行对象拷贝时。本篇文章将深入探讨...

    jQuery.extend和jQuery.fn.extend的区别

    在jQuery的API中,`jQuery.extend`和`jQuery.fn.extend`是两个重要的方法,它们用于合并对象属性,但作用范围和用途有所不同。本文将深入探讨这两个方法的差异,并通过实例解析它们的工作原理。 首先,`jQuery....

    jQuery:jQuery.extend函数详解

    除了扩展静态方法之外,还可以使用`$.fn.extend`向每个jQuery实例对象中添加方法: ```javascript $.fn.extend({ hello: function () { alert('Hello!'); } }); ``` 现在,可以在任何jQuery对象上调用`hello`...

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

    jQuery中的`extend()`和`fn.extend()`方法是用于合并对象属性和方法的工具,它们在扩展和定制jQuery功能时起着关键作用。 首先,`jQuery.extend()`方法允许开发者将一个或多个对象的属性和方法合并到一个现有对象上...

    jQuery的extend方法【三种】

    jQuery的`extend`方法是其库中非常关键的一部分,它提供了合并对象、扩展功能和实现继承的能力。在面试中,熟悉`extend`的用法对于理解jQuery的核心机制至关重要。接下来,我们将深入探讨`extend`的三种主要用法。 ...

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

    jQuery自定义了jQuery.extend()和jQuery.fn.extend()方法.其中jQuery.extend()方法能够创建全局函数或者选择器,而jQuery.fn.extend()方法能够创建jQuery对象方法. 例如: 代码如下: jQuery.extend({ showName : ...

    jQuery中extend函数的实现原理详解

    在 jQuery 中,extend 函数是一个非常核心的函数,它用于将一个或多个对象的内容合并到目标对象中。这个函数主要被用来在 jQuery 插件开发中扩展对象,以及 jQuery 内部扩展其静态方法和实例方法。extend 函数是如此...

    分析了一下JQuery中的extend方法实现原理

    `jQuery.extend`是jQuery库中的一个非常重要的方法,它用于合并一个或多个对象到目标对象中,从而扩展或合并对象的属性。这个方法在开发中经常用来创建配置对象或者进行对象间的属性拷贝。让我们深入解析一下`jQuery...

    jQuery中的deferred对象和extend方法详解

    jQuery中的`deferred对象`和`extend方法`是JavaScript异步编程的重要工具,尤其在处理AJAX请求和其他异步操作时非常有用。`deferred对象`是jQuery 1.5.0版本引入的,它提供了一种更优雅的方式来管理回调函数,解决了...

    浅谈jquery.fn.extend与jquery.extend区别

    1.jquery.extend(object); 为扩展jQuery类本身.为类添加新的方法。 jquery.fn.extend(object);给jQuery对象添加方法。 $.extend({  add:function(a,b){return a+b;} }); //$.add(3,4); //return 7 jQuery添加...

    jQuery_extend 函数详解

    jQuery_extend 函数详解

    详解jQuery插件开发中的extend方法

    Jquery的扩展方法extend是我们在写插件的过程中常用的方法,该方法有一些重载原型,dest是要整合的空间可以使{} 或者不写 src是一个JSON表达式表示的javascript对象…. 因此里面可以添加方法属性等等… 我么通过不同...

    jquery的extend和fn.extend的使用说明

    jQuery为开发插件提拱了两个方法,分别是: 代码如下: jQuery.fn.extend(object); jQuery.extend(object); jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法。 jQuery.fn.extend(object);给jQuery对象...

    jquery $.fn.extend

    `$.fn.extend`是jQuery库中的一个核心方法,主要用于扩展jQuery对象的方法集合。这个方法允许开发者自定义jQuery的函数,从而实现对DOM元素的操作或添加新的功能。在jQuery中,`$.fn`实际上是`$.prototype`的一个...

    jQuery中extend函数详解

    jQuery库中的extend函数是一个非常强大的工具,它允许我们合并对象的属性和方法到指定的对象中。在jQuery的设计中,extend函数有两个重要的用途,分别是扩展jQuery对象本身的功能以及扩展jQuery实例的功能。 首先,...

Global site tag (gtag.js) - Google Analytics