理解jquery的$.extend

理解jquery的$.extend

今日在寫js插件過程當中須要使用擴展對象的方法，便想到了jQuery.extend這個方法，但又不甚瞭解，故去查了下官方API文檔，本身也進行了相應嘗試，現將所得總結以下：

$.extend和$.fn.extend的相關用法

jQuery.fn

jQuery.fn = jQuery.prototype = {
　　　init: function( selector, context ) {//….
//……
};

由上述代碼能夠看出$.fn是至關於$.prototype的，而jQuery是一個封裝很好的類，所以當咱們使用$.fn時至關於給jQuery這個類添加成員函數，添加後jQuery類的實例便可以使用這個「成員函數」，例如當咱們使用$("#input-demo")時至關於建立了一個jQuery實例，當咱們要開發一個插件時，例如作一個特殊的編輯框，當它獲取焦點時彈框顯示當前輸入框的內容，咱們能夠作以下操做：

$.fn.extend({
  alertContentWhenFocus: function() {
    $(this).on('focus', function() {
      alert($(this).val());
    )
  }
})
$("#input-demo").alertContentWhenFocus();

$.extend(object)

當想給jQuery類添加靜態方法時，咱們能夠作以下操做：

$.extend({
  min: function(x, y) {return x < y ? x : y;},
  max: function(x, y) {return x > y ? x : y;}
})

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

該方法可用於一個或其它多個對象來擴展其中一個對象，並返回被擴展的對象，當咱們提供兩個或兩個以上的對象給$.extend時，對象全部的屬性將會添加到目標對象,所以目標對象的參數將會被修改，若咱們想保留原對象，咱們能夠傳遞一個空對象做爲目標對象。當目標對象爲空時，jQuery對象將會被默認爲目標對象，這時至關於咱們在jQuery的命名空間下添加新的功能，這是常見的插件開發模式。

• deep:
  可選屬性,當其值爲true時，遞歸合併（又叫作深拷貝），當缺省時默認爲false，是不會進行遞歸的合併操做的，但不可第一個參數傳遞false

• target:
  目標對象，將附加對象所包含的額外屬性傳遞給目標對象做爲新的參數，若是它是惟一的參數，這也爲着目標參數被省略，此時，jQuery對象自己將被默認爲目標對象，將擴展jQuery的命名空間，當咱們想向jQuery中添加新函數時須要用到

• object1:一個對象，它包含額外的屬性合併到第一個參數 objectN:包含額外的屬性合併到第一個參數

實例

var object = $.extend({}, object1, object2);

合併object1和object2對象，並在不修改object1對象的狀況，合併後結果將會賦值給object

var settings = {first:'hello', second: 'world'};
var options = {first:'hello', second: 'JavaScript',third: 'nodeJs'};
var results = $.extend({}, settings, options);

輸出：results 爲 {first: "hello", second: "JavaScript", third: "nodeJs"}

$.extend(obj1,obj2)

合併兩個對象，並修改第一個對象

var obj1 = {first: 1, second: {height: 178, weight: 70,length:100}};
var obj2 = {second: {height:180, weight:65, width: 90}, third: 90};
$.extend(obj1, obj2);

輸出結果爲：{first: 1, second: {height:180,weight:65, width: 90}, third: 90}

細心的讀者可能會發現，輸出的結果和咱們預想的結果好像有點不一樣，輸出結果的second屬性與目標對象的second屬性相比少了length這個屬性，緣由是在這種狀況下，$.extend()的合併操做不是遞歸的，這意味着當若是目標對象的屬性自己是一個對象或者數組，那麼第二個對象相同的key屬性的value值將會覆蓋第一個對象的value值，說明兩個對象相同key的value值不是合併的關係，而是覆蓋與被覆蓋的關係。

$.extend(true,obj1,obj2)

當第一個值爲true時，那麼在對象上將會進行遞歸的合併，而不是簡單的替換關係了，這樣說可能有點深奧，下面看個例子就明白了。

var obj1 = {first: 1, second: {height: 178, weight: 70}};
var obj2 = {second: {height:180, weight: 65, width: 90}, third: 90};
$.extend(true,obj1,obj2)

輸出結果爲:{first: 1, second: Object, third: 90}

有注意的讀者應該會發現，這個例子和上述的例子基本是相同的，但結果倒是咱們預想的結果了，當$.extend()的第一個參數爲true時，在對象執行的合併將會是遞歸的合併，是比較合併的，而不是簡單的替換與覆蓋。

[後記]：這篇博文一樣花費了挺久的時間，是本身在工做閒暇之餘抽空搜尋資料創做的。在撰寫的過程當中，我發現一個現象，一個並不難的知識點，若本身在網上搜尋資料看懂理解並不須要花費多少時間，但如果要將本身所理解撰寫成博文卻要難上數倍，首先要理清本身表達的思路，要將本身理解的過程梳理清楚，由淺至深結合例子將這個知識點分析透徹，以求讀者在閱讀這篇文章的過程當中能花費更短的時間讀懂。我不是一個聰明的人，因此我看明白一個知識點須要花費的功夫可能會比其餘人更長些，所以寫出來的東西每每囉嗦些，但願這篇博文對你們有所幫助。以上皆我的愚見，請笑納！