jQuery原始碼之extend的實現

2022-07-11 04:27:15 字數 2231 閱讀 1451

extend是jquery中乙個比較核心的**，如果有檢視jquery的原始碼的話，就會發現jquery在多處呼叫了extend方法。

作用對任意物件進行擴充套件

擴充套件某個例項物件

對jquery本身的例項方法進行擴充套件

實現基礎版本， 對簡單物件進行擴充套件

jquery.prototype.extend = jquery.extend = function(); //獲取第乙個引數作為目標結果


var i = 1; //設定開始擴充套件的下標，擴充套件時第乙個引數不會進行改變，不需要遍歷


var length = arguments.length;


var option;


if(typeof target !== 'object') ;


}for(; i< length; i++)


}return target


}//呼叫


var i = ;


var b = ;


console.log($().extend(i,b)) //
在上面，我們已經寫出的extend的基礎版本，但是如果我們簡單測試一下，就會發現仍是有問題存在的。

我們可以使用上面的方法，對下面的物件進行擴充套件

var n = 


}var b = };


console.log($().extend(n,b)) // }
簡單的從結果來看，返回的結果並不符合我們的預期，基礎版本的方法似乎只是簡單的值替換而已。那麼來簡單公升級一下**吧。

在公升級**之前，需要了解一下關於淺拷貝和深拷貝的相關。

淺拷貝

對於淺拷貝，我的簡單理解就是： 淺拷貝就是對最表面的層級進行拷貝，如果某一被拷貝物件的值發生了改變，最終的拷貝結果也會隨之發生改變。

var i = ;


var b = ;


console.log($().extend(i,b)) // 


i.a = 90
深拷貝深拷貝主要的是面對複雜物件，如果淺拷貝是對最表面的一層進行拷貝，那麼深拷貝就是，對拷貝物件的每乙個層級都進行拷貝，某種層面來說，勉強算得上是遞迴的淺拷貝吧，但是比較不同的是，深拷貝中，如果某乙個被拷貝物件的值發生了改變，拷貝結果是不會隨之發生變化的，是乙個獨立的儲存空間。

var n = 


}var b = };


console.log($().extend(true,{},n,b))


console.log(n)


n.al = "cs"
結果：

廣州品牌設計公司

jquery.extend是提供深拷貝的，需要將第一引數傳為true。

基本思路:首先先對第乙個傳入引數進行判斷，判斷是否是boolean型別,來決定是否需要進行深拷貝;

var deep = false;


if (typeof target === 'boolean')
對需要遍歷的物件進行判斷，判斷是否是複雜型別。使用extend對jquery進行擴充套件。

if (length === i) 


jquery.extend(,


ispainobj: function(obj) 


})
extend方法改造。

jquery.prototype.extend = jquery.extend = function();


var i = 1;


var length = arguments.length;


var option, copy, src, copyisarray, clone;


for(; i< length; i++) else ;


}target[name] = jquery.extend(clone,copy)


} else if(copy !== undefined) }}


}return target


}
行了，到這裡為止，我們就已經完成了簡單的extend函式了，其實比較重要的是深拷貝和淺拷貝，關於這一點，下次再記錄吧。

jQuery原始碼分析之noConflict方法

1 因為下面函式的返回值是jquery物件，以後用x代替 了 只是名字不同而已 var x noconflict var 123 到這裡 被修改為123，被寫到這裡noconflict裡面的 是沒有意義的 x function 上面把var 123寫在那個位置下面兩行 沒有意義的 那麼什麼時候有意義...

jQuery原始碼學習之extend

extend用於合併物件，可選擇是否深複製。使用時，第乙個引數為合併後的物件。如果要進行深拷貝，則引數1為true，引數2為要合併的目標物件。儘管jquery官方文件明確指出第乙個引數是false的呼叫情況並不支援，但是這個版本的原始碼中，判斷第乙個引數的型別雖有限定是boolean型別，但卻未對其...

jQuery原始碼之init部分

jquery 的入口函式jquery.fn.init。jquery.prototype.init 常用的選擇器介面 空引數，這個會直接返回乙個空的 jquery 物件，即 物件 this document 把傳入的物件包裝成jquery物件 函式 function dom文件載入完成後，載入執行的。...