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

很久没有发表帖子了,今天突然分析了一下JQuery中的extend方法实现原理。目的为了提高自己对JQuery的认识,也想了解JavaScript高手是如何编写JS的,如有不足请指正。谢谢!

下面是JQuery.extend方法源代码:

代码如下:

jQuery.extend = jQuery.fn.extend = function() { 
    var options, name, src, copy, copyIsArray, clone, 
        target = arguments[0] || {}, // 目标对象 
        i = 1, 
        length = arguments.length, 
        deep = false; 
    // 处理深度拷贝情况(第一个参数是boolean类型且为true) 
    if ( typeof target === "boolean" ) { 
        deep = target; 
        target = arguments[1] || {}; 
        // 跳过第一个参数(是否深度拷贝)和第二个参数(目标对象) 
        i = 2; 
    } 
    // 如果目标不是对象或函数,则初始化为空对象 
    if ( typeof target !== "object" && !jQuery.isFunction(target) ) { 
        target = {}; 
    } 
    // 如果只指定了一个参数,则使用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 ( name in options ) { 
                src = target[ name ]; 
                copy = options[ name ]; 
                // Prevent never-ending loop 
                if ( target === copy ) { 
                    continue; 
                } 
                // 如果对象中包含了数组或者其他对象,则使用递归进行拷贝 
                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 : {}; 
                    } 
                    // 从不改变原始对象,只做拷贝 
                    target[ name ] = jQuery.extend( deep, clone, copy ); 
                // 不拷贝undefined值 
                } else if ( copy !== undefined ) { 
                    target[ name ] = copy; 
                } 
            } 
        } 
    } 
    // 返回已经被修改的对象 
    return target; 
};

从上面的分析可以看出extend函数支持深度拷贝,那么在JS中什么是深度拷贝呢?
 
    我的理解如下:如果一个对象中包含引用对象(如:数组或对象),那么拷贝该对象时不是简单的进行引用对象的地址拷贝,而是将引用对象的内容复制过来保存成一个单独的对象(如下图)。

从上图可以看出两个学生对象共用好友对象,一方对好友对象的操作同时另一方也可见。如:你将好友的姓成了“zhangsan”那么另一个对象也能看见。

从上图可以看出两个学生对象都有自己的好友对象,一方的修改对另一方完全是透明的(无任何影响)。以上就是我对深度复制的理解,有什么不对的请不要笑话,谢谢。

那么JQuery.extend方法怎样实现浅复制和深度复制呢?

JQuery.extend使用方式:

1、JQuery.extend(源对象)

将源对象扩展到jQuery对象上,即把源对象的属性和方法复制到jQuery上。使用jQuery作为目标对象,源码如下:

代码如下:

// 如果只指定了一个参数,则使用jQuery自身作为目标对象 
if ( length === i ) { 
    target = this; 
    --i; 
}

【 实例1】:将person对象的方法扩展到jQuery对象上。

代码如下:

var person = { 
    sex      : 'male', 
    showName : function(name){ 
            alert("Name: " + name); 
    } 
}; 
jQuery.extend(person); // 将person对象扩展到jQuery($)对象上 
jQuery.showName("admin"); // Name: admin 
$.showName("admin"); // Name: amdin 
alert("Sex: " + $.sex); // Sex: male

【实例2】验证使用此种形式的extend方法为浅复制。

代码如下:

var person = { 
    language : ['java', 'c++', 'sql'], 
    showName : function(name){ 
        alert("Name: " + name); 
    } 
}; 
jQuery.extend(person); // 将person对象扩展到jQuery($)对象上 
alert($.language); // java, c++, sql 
$.language.push('PL/SQL'); // 修改扩展后的对象 
alert(person.language); // java, c++, sql, PL/SQL 
person.language.pop(); 
alert($.language); // java, c++, sql

从上面例子中可以发现,被扩展后的对象($)和源对象(person)任何一方对language数组的修改,都会影响到另一方。这就是浅复制

2、JQuery.extend(目标对象,源对象)

将源对象的属性和方法复制到目标对象上,采用浅复制。
【实例】分别创建person和student对象,然后通过jQuery.extend方法将person的属性和方法扩展到student对象。

代码如下:

var person = { 
    language : ['java', 'c++', 'sql'], 
    showName : function(name){ 
        alert("Name: " + name); 
    } 
}; 
var student = { 
    showNum : function(num){ 
        alert("Num: " + num); 
    } 
}; 
jQuery.extend(student, person); // 将person对象扩展到指定的student对象上 
student.showName("admin"); 
alert(student.language);

3、JQuery.extend(boolean,源对象)

此种方式中的boolean参数表示是否采用深度复制,如果为true,则使用深度复制。
【实例】将person对象扩展到jQuery对象上

代码如下:

var person = { 
    language : ['java', 'c++', 'sql'], 
    showName : function(name){ 
        alert("Name: " + name); 
    } 
}; 
jQuery.extend(true, person); // 将person对象扩展jQuery对象上 
alert($.language); // java, c++, sql 
$.language.push('PL/SQL'); // 修改扩展后的对象 
alert(person.language); // java, c++, sql 
person.language.pop();

从上面例子中可以看出对$.language的修改不会影响到person中的language属性。这就是深度复制

4、JQuery.extend(boolean,目标对象,源对象)

决定是否采用深度复制将源对象扩展到目标对象上面。如下:
【实例】分别创建person和student对象,然后通过jQuery.extend方法将person的属性和方法扩展到student对象。

代码如下:

var person = { 
    showName : function(name){ 
        alert("Name: " + name); 
    } 
}; 
var student = { 
    language : ["java", "c++", "javascript"], 
    showNum : function(num){ 
        alert("Num: " + num); 
    } 
}; 
var target = jQuery.extend(person, student); 
alert(target.language);     // java, c++, javascript 
target.language.push("PL/SQL"); 
alert(student.language);    // java, c++, javascript, PL/SQL 
student.language.pop(); 
alert(target.language);     // java, c++, javascript 
var target2 = jQuery.extend(true, person, student); 
alert(target2.language);    // java, c++, javascript 
target2.language.push("PL/SQL"); 
alert(student.language);    // java, c++, javascript 
student.language.pop(); 
alert(target2.language);    // java, c++, javascript, PL/SQL

以上就是我对extend方法的理解,如有不正确的地方请指正。非常谢谢!

(0)

相关推荐

  • Jquery中扩展方法extend使用技巧

    在使用Jquery开发的过程中,extend是常用的参数处理函数,特别是对默认值的使用. Jquery的扩展方法原型是: var v=$.extend(dest,src1,src2,[,src3...]); 作用是把src1,src2,src3合并到到dest中并返回合并后的dest. 但是在使用过程中,默认值往往是不能被改变的, 如下: var defaut={'selector':'select','default':'默认值','backcolor':'#85e137','forecolo

  • jquery简单插件制作(fn.extend)完整实例

    本文实例讲述了jquery简单插件制作方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang=&qu

  • 浅谈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添加一个为 add的"静态方法",之后便可以在引入 jQuery 的地方,使用这个方法了. 2.jQuery.fn.extend(object); 对jQuer

  • jQuery继承extend用法详解

    本文实例为大家jQuery继承extend用法,供大家参考,具体内容如下 js代码 //直接基于jQuery的扩展,判断是否为空 $.isBlank = function(obj){ return(typeof(obj)=='undefined'||obj==''||obj==null); } //直接基于jQuery的扩展,去除html标签,保留内容 $.htmlContent = function(tag){ var reTag = /<(?:.|\s)*?>/g; return tag.

  • jQuery插件扩展extend的简单实现原理

    相信每位前端的小伙伴对jQuery都不陌生吧,它最大的魅力之一就是有大量的插件,去帮助我们更轻松的实现各种功能. 前几天晚上,闲来无事,就自己动手写了个简单的jQuery插件,功能很简单,只是让选定的元素高亮,但是其中的一些思想,还是很值得学习的,可以戳这里查看代码. 本文不聊怎么写jQuery插件,我们聊聊怎么去实现jQuery的插件扩展功能,extend是怎么实现把我们写的插件挂载到jQuery上的.(大牛可以出门右拐......) 我们可以模拟创建一个迷你jQuery. var $ = {

  • jQuery的extend方法【三种】

    jq中的extend在面试中经常会被问道,今天我总结一个下有关于extend的用法三种进行对比,可能不全,希望大家指点, 用法一: $.extend({})  ,为jQuery类添加方法,可以理解为扩展静态方法 用法二:$.fn.extend({})  插件,对jQuery.prototype进行扩展,提到插件那么就得说一下另一种方法$.fn.method = function(){} 1. $.fn.method = function(){} 可以定义一个方法            2 . $

  • 原生js实现复制对象、扩展对象 类似jquery中的extend()方法

    jq的extend()方法能很方便的实现扩展对象方法,语法如下:$.extend(obj1,boj2,obj3); 现在要实现的是:原生js实现复制对象,扩展对象,类似jq中的extend()方法,具体实例如下: 现有3个对象字面量: var o1={hello:1,old:555}, o2 = { abc: 55555555, hello: 2, fun: function() { alert(111); } }, o3={third:9999}; 实现目标: 复制o1对象,把 o2,o3的对

  • Jquery实现$.fn.extend和$.extend函数

    前面我们扩展了bind方法和ready函数,这次我要讲一下$.fn.extend 和$.extend函数. 其他的不多说,直接切入主题吧! 先来看看这两个函数的区别: $.fn.extend是为查询的节点对象扩展方法,是基于$的原型扩展的方法 $.extend是扩展常规方法,是$的静态方法. 我们之前写的代码看一下: (function (win) { var _$ = function (selector, context) { return new _$.prototype.Init(sel

  • jQuery.extend 函数及用法详细

    jquery.extend函数详解 JQuery的extend扩展方法: Jquery的扩展方法extend是我们在写插件的过程中常用的方法,该方法有一些重载原型,在此,我们一起去了解了解. 一.Jquery的扩展方法原型是: extend(dest,src1,src2,src3...); 它的含义是将src1,src2,src3...合并到dest中,返回值为合并后的dest,由此可以看出该方法合并后,是修改了dest的结构的.如果想要得到合并的结果却又不想修改dest的结构,可以如下使用:

  • jQuery $.extend()用法总结

    jQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(object); jQuery.extend(object); jQuery.extend(object);为扩展jQuery类本身.为类添加新的方法. jQuery.fn.extend(object);给jQuery对象添加方法.这个应该很好理解吧.举个例子. 复制代码 代码如下: <span style="font-size:18px;"><html> <head>

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

    这两个方法用的是相同的代码,一个用于给jQuery对象或者普通对象合并属性和方法一个是针对jQuery对象的实例,对于基本用法举几个例子: html代码如下: 复制代码 代码如下: <!doctype html> <html>    <head>       <title></title>         <script src='jquery-1.7.1.js'></script>    </head>   

随机推荐