0

0

jQuery对象的扩展--extend

迷茫

迷茫

发布时间:2017-01-23 15:09:52

|

1586人浏览过

|

来源于php中文网

原创

写过jquery插件的人都知道可以通过jquery提供的extend可以对jquery对象进行扩展,而且该方法不仅可以对jquery对象扩展,还能给一个对象添加新的属性和方法,这个在后面会介绍。

通过不同的方式调用extend扩展的方法也不同:

  • 通过 $.extend() 扩展的是静态方法;

  • 而通过 $.fn.extend() 扩展的是实例方法。

写过jQuery插件的通过应该都知道,很多时候我们都是使用extend来为jQuery对象添加插件的。

插件的写法:

;(function($){
    $.fn.extend({
        Firstplus: function() {}
    });    //这样写的话插件的使用方法就是:$('div').Firstplus();

    $.extend({
        Secondplus: function() {}
    });    //这样写的话插件的使用方法就是:$.Secondplus();})($);

$.extend()和$.fn.extend()调用的其实是同一个函数,那么他们实现的功能为什么不同呢?

jQuery.extend = jQuery.fn.extend = function() {}   //源码285行

主要是因为这个方法都是将传入的对象扩展到了this上。

$.extend( xx ) 的this指向的是jQuery对象,所以此时扩展的是jQuery对象,可以直接通过$.xx 的方式调用。

$.fn.extend( xx ) 的this指向的是jQuery对象的prototyep,所以此时扩展的jQuery对象的原型,实例化的jQuery对象可以调用所有的jQuyer原型上的方法,可以直接通过 $().xx 的方式调用。

以下是extend的三种不同用法:

1.jQuery.extend( [ object ] )

Pixlr
Pixlr

Pixlr是一款2008年推出的在线图片编辑和AI图片处理工具,目前已推出AI 图像生成器、AI 生成填充、AI 删除背景、AI 删除对象和 AI 图像扩展等现代 AI 工具。

下载
>将传入的 object 扩展到 this 对象上

2.jQuery.extend( target, [ object1 ,... objectN ] )

>将后面传入的 object1 到 objectN 扩展到 target 对象上

3.jQuery.extend( [ deep ], target, [object1,... objectN ] )

>如果传入了 deep 参数表示递归后面传入object1到objectN对象然后在扩展到target,这样同名的属性名就不会被覆盖了。

具体看下源码分析:

jQuery.extend = jQuery.fn.extend = function() {//定义了一些变量var options, name, src, copy, copyIsArray, clone,
    target = arguments[0] || {},  //target用来存储传入的第一个对象(目标对象)
    //这个target不仅表示要进行合并的目标对象,也可以表示要扩展到jquery上的对象
    i = 1,  //i用来表示target后面传入的对象是arguments的第几个参数
    length = arguments.length,   
    deep = false;  //deep变量表示,是否进行深度拷贝//先进行了一系列的if判断,来初始化参数,判断到底是要扩展jQuery还是对传入的对象进行扩展//如果第一个参数是布尔类型,则表示是否深度拷贝if ( typeof target === "boolean" ) {
    deep = target;
    target = arguments[1] || {};  //将目标对象置为传入的第二个参数,如果没有置为空对象
    // skip the boolean and the target
    i = 2;   //将i置为2}//如果target不是一个对象,将其置为空对象if ( typeof target !== "object" && !jQuery.isFunction(target) ) {
    target = {};
}//如果arguments和i相等,表示要扩展的jquery对象,让target指向this//这个this具体指向什么之前已经探讨过了if ( length === i ) {  
    target = this;
    --i;  //且让i--,这时arguments[i]表示的才是要扩展到jquery上的对象}for ( ; i < length; i++ ) { //开始遍历传入的 arguments
    // 只有参数不为空时才执行后面的操作
    if ( (options = arguments[ i ]) != null ) {        // 对对象进行扩展,无论传入的target对象,还是jQuery对象,都使用同样的方法进行扩展
        for ( name in options ) {  //遍历传入的对象的属性
            src = target[ name ];
            copy = options[ name ];            //防止target和obj的某个属性指向的是同一对象进入死循环
            if ( target === copy ) {  
                continue;
            }            //是否进行深度拷贝
            //这里说的深度拷贝,和我们平时说的深度拷贝有点区别;这里指的当obj的某个属性是一个对象时,是否对这个属性继续遍历,如果不进行遍历的话,会直接覆盖target对象的同名属性
            if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {                if ( copyIsArray ) {  //如果要拷贝的obj属性为数组
                    copyIsArray = false;
                    clone = src && jQuery.isArray(src) ? src : [];

                } else {  //如果要拷贝的obj属性为对象
                    clone = src && jQuery.isPlainObject(src) ? src : {};
                }                // 进行递归,直到属性不再为一个对象或数组
                target[ name ] = jQuery.extend( deep, clone, copy );
            } else if ( copy !== undefined ) {//如果不进行深拷贝且当前obj的属性不为空
                //扩展target对象,且和当前obj属性名相同。
                target[ name ] = copy;
            }
        }
    }
}return target;   最后返回target对象,如果扩展的jquery对象,则返回的就是jquery对象
};

通过extend函数,可以看出extend函数通过许多的 if 判断,实现了许多不同的功能:

  • 扩展多个对象到一个对象上;

  • 扩展多个对象到一个对象上,并对要进行扩展的对象进行遍历,防止将同属性名的对象覆盖;

  • 扩展一个对象到jquery对象上;

  • 扩展一个对象到jquery的原型对象上。

后面还可以看到 jq 通过这个方法扩展了很多工具方法到jQuery对象上,不得不说 jq 的结构还是很紧凑的,一个方法不仅提供给外部使用,在内部也多次使用

相关专题

更多
Java 桌面应用开发(JavaFX 实战)
Java 桌面应用开发(JavaFX 实战)

本专题系统讲解 Java 在桌面应用开发领域的实战应用,重点围绕 JavaFX 框架,涵盖界面布局、控件使用、事件处理、FXML、样式美化(CSS)、多线程与UI响应优化,以及桌面应用的打包与发布。通过完整示例项目,帮助学习者掌握 使用 Java 构建现代化、跨平台桌面应用程序的核心能力。

37

2026.01.14

php与html混编教程大全
php与html混编教程大全

本专题整合了php和html混编相关教程,阅读专题下面的文章了解更多详细内容。

19

2026.01.13

PHP 高性能
PHP 高性能

本专题整合了PHP高性能相关教程大全,阅读专题下面的文章了解更多详细内容。

37

2026.01.13

MySQL数据库报错常见问题及解决方法大全
MySQL数据库报错常见问题及解决方法大全

本专题整合了MySQL数据库报错常见问题及解决方法,阅读专题下面的文章了解更多详细内容。

19

2026.01.13

PHP 文件上传
PHP 文件上传

本专题整合了PHP实现文件上传相关教程,阅读专题下面的文章了解更多详细内容。

16

2026.01.13

PHP缓存策略教程大全
PHP缓存策略教程大全

本专题整合了PHP缓存相关教程,阅读专题下面的文章了解更多详细内容。

6

2026.01.13

jQuery 正则表达式相关教程
jQuery 正则表达式相关教程

本专题整合了jQuery正则表达式相关教程大全,阅读专题下面的文章了解更多详细内容。

3

2026.01.13

交互式图表和动态图表教程汇总
交互式图表和动态图表教程汇总

本专题整合了交互式图表和动态图表的相关内容,阅读专题下面的文章了解更多详细内容。

45

2026.01.13

nginx配置文件详细教程
nginx配置文件详细教程

本专题整合了nginx配置文件相关教程详细汇总,阅读专题下面的文章了解更多详细内容。

9

2026.01.13

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
jQuery 教程
jQuery 教程

共42课时 | 4.2万人学习

HTML+CSS基础与实战
HTML+CSS基础与实战

共132课时 | 9.5万人学习

tp6+adminlte搭建通用后台
tp6+adminlte搭建通用后台

共39课时 | 5.7万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号