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


Posted in Javascript onFebruary 27, 2015

很久没有发表帖子了,今天突然分析了一下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中什么是深度拷贝呢?
 
    我的理解如下:如果一个对象中包含引用对象(如:数组或对象),那么拷贝该对象时不是简单的进行引用对象的地址拷贝,而是将引用对象的内容复制过来保存成一个单独的对象(如下图)。

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

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

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

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

那么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方法的理解,如有不正确的地方请指正。非常谢谢!

Javascript 相关文章推荐
jQuery中文入门指南,翻译加实例,jQuery的起点教程
Feb 09 Javascript
JS随机漂浮广告代码具体实例
Nov 19 Javascript
js的延迟执行问题分析
Jun 23 Javascript
JavaScript监听和禁用浏览器回车事件实例
Jan 31 Javascript
jQuery插件Tooltipster实现漂亮的工具提示
Apr 12 Javascript
js字符串与Unicode编码互相转换
May 17 Javascript
JS身份证信息验证正则表达式
Jun 12 Javascript
three.js中文文档学习之如何本地运行详解
Nov 20 Javascript
解决angularjs service中依赖注入$scope报错的问题
Oct 02 Javascript
JS实现的获取银行卡号归属地及银行卡类型操作示例
Jan 08 Javascript
Vue Render函数创建DOM节点代码实例
Jul 08 Javascript
Vue3+elementui plus创建项目的方法
Dec 01 Vue.js
JS实现在页面随时自定义背景颜色的方法
Feb 27 #Javascript
JQuery中绑定事件(bind())和移除事件(unbind())
Feb 27 #Javascript
Jquery中Event对象属性小结
Feb 27 #Javascript
jQuery中hover方法和toggle方法使用指南
Feb 27 #Javascript
JS实现往下不断流动网页背景的方法
Feb 27 #Javascript
jQuery+easyui中的combobox实现下拉框特效
Feb 27 #Javascript
asp.net+js实现金额格式化
Feb 27 #Javascript
You might like
PHP的开发框架的现状和展望
2007/03/16 PHP
php传值赋值和传地址赋值用法实例分析
2015/06/20 PHP
PHP中register_shutdown_function函数的基础介绍与用法详解
2017/11/28 PHP
php-fpm服务启动脚本的方法
2018/04/27 PHP
在图片上显示左右箭头类似翻页的代码
2013/03/04 Javascript
JavaScript实现弹出模态窗体并接受传值的方法
2016/02/12 Javascript
JQuery+EasyUI轻松实现步骤条效果
2016/02/22 Javascript
leaflet的开发入门教程
2016/11/17 Javascript
angular+ionic 的app上拉加载更新数据实现方法
2017/01/16 Javascript
Bootstrap表单控件学习使用
2017/03/07 Javascript
webpack构建react多页面应用详解
2017/09/15 Javascript
D3.js实现简洁实用的动态仪表盘的示例
2018/04/04 Javascript
在vue中使用Autoprefixed的方法
2018/07/27 Javascript
jQuery选择器之基本过滤选择器用法实例分析
2019/02/19 jQuery
angular多语言配置详解
2019/05/16 Javascript
vue中的面包屑导航组件实例代码
2019/07/01 Javascript
JavaScript函数IIFE使用详解
2019/10/21 Javascript
python打开网页和暂停实例
2014/09/30 Python
python读写json文件的简单实现
2017/04/11 Python
Python简单删除列表中相同元素的方法示例
2017/06/12 Python
20行python代码的入门级小游戏的详解
2019/05/05 Python
Python3自动生成MySQL数据字典的markdown文本的实现
2020/05/07 Python
python -v 报错问题的解决方法
2020/09/15 Python
HTML5 Canvas绘制五星红旗
2016/05/04 HTML / CSS
HTML5中使用json对象的实例代码
2018/09/10 HTML / CSS
美国蔬菜和植物种子公司:Burpee
2017/02/01 全球购物
大四自我鉴定
2014/02/08 职场文书
驾驶员安全责任书范本
2014/07/24 职场文书
纪念九一八事变演讲稿:忘记意味着背叛
2014/09/14 职场文书
青年岗位能手事迹材料
2014/12/23 职场文书
2015年教学管理工作总结
2015/05/20 职场文书
开业庆典致辞
2015/08/01 职场文书
NodeJs内存占用过高的排查实战记录
2021/05/10 NodeJs
浅谈Python类的单继承相关知识
2021/05/12 Python
船舶调度指挥系统——助力智慧海事
2022/02/18 无线电
Python中的datetime包与time包包和模块详情
2022/02/28 Python