1. 程式人生 > >jquery源碼之extend

jquery源碼之extend

log 防止 pos () var jquery new name 關於

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