jquery extend实现原理

转载 2016年08月31日 11:39:37

今天突然分析了一下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

js继承的实现 extend

Object.extend = function (destination, source) { for ( var property in source) {     destination[p...
  • xl7751125
  • xl7751125
  • 2016年03月01日 16:13
  • 2130

Javascript中extend方法的实现

今天来分析下extend方法在各种js框架下的设计。这个函数的功能基本都是实现对象的拷贝功能,即将一个对象的所有属属性拷贝到另外一个对象上去,这个函数使用的频率也很高,如果我们要将一个类的所有方法拷贝...
  • wjm80839664
  • wjm80839664
  • 2016年03月16日 14:54
  • 418

jquery的extend和fn.extend (扩展jQuery类或jQuery对象方法)

转自:http://www.cnblogs.com/yuanyuan/archive/2011/02/23/1963287.html jQuery为开发插件提拱了两个方法,分别是:  jQ...
  • chelen_jak
  • chelen_jak
  • 2015年11月12日 10:25
  • 1084

jquery extend实现原理

今天突然分析了一下JQuery中的extend方法实现原理。目的为了提高自己对JQuery的认识,也想了解JavaScript高手是如何编写JS的,如有不足请指正。谢谢! 下面是JQuery.e...
  • LONGSHAN123456789
  • LONGSHAN123456789
  • 2016年08月31日 11:39
  • 355

js 自定义extend函数

1.实现
  • juroney1
  • juroney1
  • 2014年05月07日 01:26
  • 2733

深入学习理解jQuery中的extend方法以及JavaScript中对象的复制

深入学习理解jQuery中的extend方法以及JavaScript中对象的复制 本文参见的jQuery版本号是:jquery-1.11.1.js 1. jQuery extend方法介绍      ...
  • shenlei19911210
  • shenlei19911210
  • 2015年07月02日 09:39
  • 5478

JQuery 数据复制$.extend([true],obj,obj)

JQuery 数据复制$.extend([true],obj,obj)         最近在项目中,用vue的数据双向绑定去处理一些页面上同一数据多处使用的问题,刚开始用得还是挺爽的,但最...
  • u014155882
  • u014155882
  • 2017年03月28日 15:04
  • 1079

$.extend()方法和(function($){...})(jQuery)详解

jQuery为开发插件提拱了两个方法,分别是: 1. jQuery.fn.extend(); 2. jQuery.extend(); 一、jQuery.extend() ...
  • wuyou1336
  • wuyou1336
  • 2017年01月06日 22:15
  • 179

详解js中extend函数

为了简化类的声明,可以把派生子类的整个过程包装在一个extend的函数,和其他语言中的extend关键字类似,基于一个给定的类结构创建一个新的类 function extend(subClass,...
  • sysuzhyupeng
  • sysuzhyupeng
  • 2017年02月03日 14:54
  • 471

jQuery $.extend()用法总结

jQuery $.extend()用法总结 jQuery为开发插件提拱了两个方法,分别是:  jQuery.fn.extend(object); jQuery.extend(objec...
  • ssisse
  • ssisse
  • 2016年08月26日 16:36
  • 659
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery extend实现原理
举报原因:
原因补充:

(最多只允许输入30个字)