zoukankan      html  css  js  c++  java
  • Query继承的实现(extends)

    Query继承的实现(extends)

    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中到处体现这一点

  • 相关阅读:
    前端与算法 leetcode 344. 反转字符串
    JavaScript闭包使用姿势指南
    前端与算法 leetcode 48. 旋转图像
    前端与算法 leetcode 36. 有效的数独
    前端与算法 leetcode 1. 两数之和
    前端与算法 leetcode 283. 移动零
    前端与编译原理 用js去运行js代码 js2run
    前端与算法 leetcode 66. 加一
    前端与算法 leetcode 350. 两个数组的交集 II
    前端与算法 leetcode 26. 删除排序数组中的重复项
  • 原文地址:https://www.cnblogs.com/qingzhouyi/p/3037201.html
Copyright © 2011-2022 走看看