jquery 源码分析-核心(2)整个骨架jQuery.extend,jQuery.fn.extend_jquery.extend jquery.fn.extend 源码解析-优快云博客

本文深入分析了jQuery 1.2.5版本中的扩展方法机制，详细解读了$.extend及$.fn.extend的工作原理，并通过源码解析揭示了jQuery如何通过简单的构造实现强大的功能扩展。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jquery 源码分析-核心(2)整个骨架jQuery.extend,jQuery.fn.extend

选取的是jquery1.2.5版本

jquery中`jQuery.extend = jQuery.fn.extend`解析

在jquery添加扩展方法一般都是这样

$.extend({
         a:function(){},
         b:function(){}
});

$.fn.extend({
         c:function(){},
         d:function(){}
});

调用上面的2种方法分别是$.a(),$.b();$(*).c(),$().d();源码中实现这个机制是简化是这样的

jQuery.fn = jQuery.prototype  = function(){
        init:function(){}
}
jQuery.fn.init.prototype = jQuery.fn;
jQuery.extend = jQuery.fn.extend = function() {
    var target = arguments[0] || {}, i = 0, length = arguments.length,  options;
        target = this;
        for ( ; i < length; i++ )
                if ( (options = arguments[ i ]) != null )
                    // Extend the base object
                    for ( var name in options ) {
                        var src = target[ name ], copy = options[ name ];
                            target[ name ] = copy;

                    }
    return target;
}

$.extend,$.fn.extend底层都是调用一个方法,但为什么一个是$.a(),一个是$(*).c();主要就是就是target = this;
这个this的作用，在$.extend中this是指向的jQuery,$.fn.extend就是指向jQuery.prototype.init方法,而init就是返回的一个$()对象
这个设计就很妙啊

jQuery.fn = jQuery.prototype  = function(){
        init:function(){}
}
jQuery.fn.init.prototype = jQuery.fn;
jQuery.extend = jQuery.fn.extend = function()

这三个在一起就很好的完成了整个骨架设计,有了这些jquery就可以很好的添加工具方法模块，ajax模块，Sizzle模块