jQuery物件的擴充--extend

寫過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物件可以呼叫所有的jQuy​​er原型上的方法,可以直接透過$( ).xx 的方式調用。

以下是extend的三種不同用法：

1.jQuery.extend( [ object ] )

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

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

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

具體看下源碼分析：

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

透過extend函數，可以看出extend函數透過許多的if 判斷，實現了許多不同的功能：

擴展多個物件到一個物件上；
擴展多個物件到一個物件上，並對要進行擴充的物件進行遍歷，防止將同屬性名稱的物件覆蓋；

• 擴展一個物件到jquery物件上；

• 擴展一個物件到jquery的原型物件上。

後面還可以看到 jq 透過這個方法擴展了很多工具方法到jQuery物件上，不得不說 jq 的結構還是很緊湊的，一個方法不僅提供給外部使用，在內部也多次使用