在jQuery的API手册中,jQuery.extend和jQuery.fn.extend,是挂载在jQuery和jQuery.fn上的两个方法,挂载对象不同,但是jQuery的内部实现中是相同的,只是功能不太一样.

官方的解释是这样的

• jQuery.extend(): Merge the contents of two or more objects together into the first object.(把两个或者更多的对象合并到第一个当中)；

• jQuery.fn.extend():Merge the contents of an object onto the jQuery prototype to provide new jQuery instance methods.(把对象挂载到jQuery的prototype属性，来扩展一个新的jQuery实例方法)

理解jQuery.extend

我们先把jQuery看成一个类,jQuery.extend是扩展的jQuery这个类

假设我们把jQuery这个类看成是人类,能吃饭喝水能跑能跳,我们现在用extend方法给人类扩展一个能说话(speak)的技能,这样的话所有的人类,都能继承这个技能.

1
2
3
4
5

JQuery.extend({
    speak:function(){
         alert("how are you!");
    }
});

那么,我们需要使用这个技能的时候,直接使用$.speak()就可以成功调用这个方法了.

这说明,$.speak变成了jQuery这个类本身的方法,现在人类都能说话了

所以,这个扩展也就是所谓的静态方法, 只跟这个类本身有关,跟你具体的实例化对象是没有关系的.

理解jQuery.fn.extend

从字面理解,这个扩展的是jQuery.fn的方法,那么jQuery.fn是什么呢?

在jQuery源码的开通部分,有这样的一段代码

1
2
3
4
5

jQuery.fn = jQuery.prototype = {
      init:funtion(selector,context){
            //..... 
     }
}

所以显而易见,jQuery,fn其实扩展的就是jQuery这个对象原型上面的方法.

也就是说,这个方法必须使用在jQuery实例化的对象上,就不能直接使用jQuery.xxx() 这样调用了,而是必须指明实例化的对象,然后在对象上面调用.

1

$('person1').speak()

两者区别的总结

两者调用方式不同：

jQuery.extend(),一般由传入的全局函数来调用，主要是用来拓展个全局函数，如$.init()，$.ajax();

Query.fn.extend(),一般由具体的实例对象来调用，可以用来拓展个选择器，例如$.fn.each();

两者的主要功能作用不同：

jQuery.extend(object); 为扩展jQuery类本身，为自身添加新的方法。

jQuery.fn.extend(object);给jQuery对象添加方法

大部分插件都是用jQuery.fn.extend()

JQuery的extend扩展方法：

Jquery的扩展方法原型是:

1

extend(dest,src1,src2,src3...);

作用是将src1 src2 … 合并到dest上,然后返回,返回值是合并之后的dest,也就是说这个时候dest是被修改了的.

如果我们不想修改dest的值,可以这样

1

extend([],src1,src2,src3...);

这样的话,就不会有值会被改变了

jQuery中extend的内部实现

jQuery的内部多次使用了其自己定义的merge方法,作用就是将后面的值往前面的值身上加,这种方法在extend方法上得到了很好的实现.