• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >jquery > 分析了一下JQuery中的extend方法实现原理

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

作者: 字体:[增加 减小] 来源:互联网 时间:2017-08-16

通过本文主要向大家介绍了JQuery,extend等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

很久没有发表帖子了,今天突然分析了一下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方法的理解,如有不正确的地方请指正。非常谢谢!

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • 基于jQuery对象和DOM对象和字符串之间的转化实例
  • jquery+css实现简单的图片轮播效果
  • 使用jQuery实现鼠标点击左右按钮滑动切换
  • jQuery实现上传图片前预览效果功能
  • jQuery初级教程之网站品牌列表效果
  • 基于jquery实现多选下拉列表
  • jQuery接受后台传递的List的实例详解
  • 详解jquery选择器的原理
  • jQuery上传插件webupload使用方法
  • 关于jquery form表单序列化的注意事项详解

相关文章

  • 2017-08-16jquery转盘抽奖功能实现
  • 2017-08-16jquery高级编程的最佳实践详解
  • 2017-08-16jQuery响应鼠标事件并隐藏与显示input默认值
  • 2017-08-16跟我一起学JQuery插件开发
  • 2017-08-16基于HTML+CSS+JS实现增加删除修改tab导航特效代码
  • 2017-08-16jQuery实用技巧必备(下)
  • 2017-08-16jquery 读取页面load get post ajax 四种方式代码写法
  • 2017-08-16jQuery 使用手册(五)
  • 2017-08-16详解jQuery中基本的动画方法
  • 2017-08-16jQuery实现新消息闪烁标题提示的方法

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • jquery 3D球状导航的文章分类
    • jquery实现鼠标滑过显示二级下拉菜单效果
    • jQuery过滤选择器经典应用
    • jQuery制作可自定义大小的拼图游戏
    • jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
    • jQuery给多个不同元素添加class样式的方法
    • jQuery解析json格式数据简单实例
    • jQuery中width()方法用法实例
    • jQuery制作仿Mac Lion OS滚动条效果
    • 这些年、我收集的JQuery代码小结

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有