jquery源碼之extend
jQuery.extend = jQuery.fn.extend = function() {
定義一些變量
if () {} 看是不是深拷貝情況
if () {} 看參數正確不
if () {} 看是不是插件情況
for () { 可能有多個對象情況
if () {} 防止循環引用,如 $.extend(a, {name: a}); //循環引用的情況進行排除;
if () {} 深拷貝
else if () {} 淺拷貝
}
}
知識點梳理:
1、jQuery 是一個函數,jQuery() 返回一個對象,這個對象的構造函數是 jQuery.fn.init(),這個構造函數的原型,即 jQuery.fn.init.prototype = jQuery.fn,而 jQuery.fn = jQuery.prototype,因此,狗仔函數 jQuery.fn.init() 的原型函數就是 jQuery.prototype,總結:調用 jQuery() 之後返回的對象,其實都繼承自 jQuery.prototype 原型;
2、jquery使用同一套源碼實現對於靜態和實例方法的拓展,jquery使用的兩種extend形式分析:
jQuery.extend() :拓展靜態方法
jQuery.fn.extend() :拓展實例方法
$.extend() -> this 指向 $,即jQuery函數 -> 在 this 中添加方法 aaa: this.aaa -> $.aaa()
$.fn.extend() -> this 指向 $.fn = jQuery.prototype,在原型中添加方法aaa: this.aaa -> $().aaa(),需要在實例對象中調用aaa方法
【當只寫一個對象自變量的時候,jq中拓展插件的兩種形式】
$.extend({ // 拓展工具方法
aaa: function() { alert(1); },
bbb: function() { alert(2); }
});
$.aaa(); // 彈出 1
$.bbb(); // 彈出 2
$.fn.extend({ // 拓展jq實例方法
aaa: function() { alert(3); },
bbb: function() { alert(4); }
});
$().aaa();
$().bbb();
【當寫對個對象自變量的時候,後面的對象都是拓展到第一個對象上】
var a = {}; // 拓展對象 a的屬性
$.extend(a, {name: "hello"}, {age: 30});
alert( a ); // 彈出 {name: "hello", age: 30}
var a = {}; // 還可以做 深拷貝 和淺拷貝
var b = {name: {age: 30}};
$.extend(a, b); // $.extend() 做的淺拷貝!
a.name.age = 20;
alert( b.name.age ); // 彈出20
$.extend(true, a, b); // 增加參數 true,告訴jq我要進行深拷貝
a.name.age = 20;
alert( b.name.age ); // 彈出30
3、關於繼承
jq使用的是拷貝繼承,比較靈活;
類式繼承:使用new 構造函數進行繼承;
原型繼承:??
jquery源碼之extend