jQuery源碼的基礎知識

序言：DOM addEventListener

attachEvent與addEventListener區別
適應的瀏覽器版本不同，同時在使用的過程中要注意
attachEvent方法          按鈕onclick
addEventListener方法    按鈕click

一、arguments對象：

1、arguments 屬性

為當前執行的function對象返回一個arguments對象。 

2、function.arguments

function參數是當前執行函數的名稱，可以省略。 

3、arguments.length

arguments 對象的 length 屬性包含了傳遞給函數的參數的數目。arguments 對象所包含的單個參數，存取方法與數組中所包含的參數的存取方法相同。 

4、arguments當作數組使用

arguments雖然不是數組，但可以當作數組使用，下標由 0 開始，所以：

arguments[0]  表示接收的第一個參數
arguments[1]  表示接收的第二個參數
……

for (var i = 1; i < arguments.length; i++)

   var s = arguments[i];    

5、arguments轉換數組

var args = Array.prototype.slice.call(arguments); 

二、call方法:

文法：call([thisObj[,arg1[, arg2[,   [,.argN]]]]])

定義：調用一個對象的一個方法，以另一個對象替換當前對象。

說明：

call 方法可以用來代替另一個對象調用一個方法。call 方法可將一個函數的物件內容從初始的上下文改變為由 thisObj 指定的新對象。

如果沒有提供 thisObj 參數，那麼 Global 對象被用作 thisObj。 

三、apply方法：

文法：apply([thisObj[,argArray]])

定義：應用某一對象的一個方法，用另一個對象替換當前對象。

說明：

如果 argArray 不是一個有效數組或者不是 arguments 對象，那麼將導致一個 TypeError。

如果沒有提供 argArray 和 thisObj 任何一個參數，那麼 Global 對象將被用作 thisObj， 並且無法被傳遞任何參數。 

四、call方法和apply方法的區別

call和apply方法通常被用來實作類別似繼承一樣的功能，以達到代碼複用的功效。它們的區別主要體現在參數上。

Apply:

var v = new fn( " str " ); 

// 上一句相當於下面的代碼 

var v = {}; 

fn.apply(v, [ "str" ]);

五、prototype原型

1、當我們使用javascript定義一個類的時候，系統會自動產生一個對應的原型，而使用類的prototype可以指向這個原型。 

2、定義類的時候，一般使用函數定義，而那個函數就是建構函式，建構函式可以使用constructor來指定。 

3、當建構函式和prototype定義了相同的屬性或者方法的時候，建構函式的優先順序要更高。 

4、原型中，不能調用建構函式的私人變數，和通過傳參傳進來的值。

 5、prototype中定義的變數和屬性都是公有的。 

 6、任何一個類，當有多次執行個體化的時候，在記憶體中只有一個原型，而建構函式在記憶體中會有多個副本。 

7、在建構函式中可以調用prototype中的屬性和方法。 

執行個體:

function fn(){};fn.prototype={    pro:'原型'}var o=new fn();alert(o.pro); 

六、匿名函數自動執行（function(){……}()）

1. 什麼是自執行的匿名函數?

它是指形如這樣的函數: (function {// code})();

 2. 疑問

 為什麼(function {// code})();可以被執行, 而function {// code}();卻會報錯?

 3. 分析

(1). 首先, 要清楚兩者的區別:

 (function {// code})是運算式, function {// code}是函式宣告.

 (2). 其次, js"先行編譯"的特點:

js在"先行編譯"階段, 會解釋函式宣告, 但卻會忽略表式.

 (3). 當js執行到function() {//code}();時, 由於function() {//code}在"先行編譯"階段已經被解釋過, js會跳過function(){//code}, 試圖去執行();, 故會報錯;

當js執行到(function {// code})();時, 由於(function {// code})是運算式, js會去對它求解得到傳回值, 由於傳回值是一 個函數, 故而遇到();時, 便會被執行.

另外， 函數轉換為運算式的方法並不一定要靠分組操作符()，我們還可以用void操作符，~操作符，!操作符……

如： 

!function(){      alert("另類的匿名函數自執行");    }(); 

七、自訂的extend靜態方法

方法一：

var fn=function(){};fn.extend = function(o, p) {        if ( !p ) {    p = o; o = this;    }        for ( var i in p )    o[ i ] = p[  i ];    alert(o[ i ]);    alert(o);    return o;}fn.extend({      method:function(){           alert("靜態方法");      }});fn.method(); //靜態方法

方法二：

var fn=function(){};fn.extend = function() {       var options,    target = arguments[0] || {};    if ( !options ) {        options = target; target = this;    }        for ( var i in options )    target[ i ] = options[  i ];//執行對象直接量，把options[  i ]裝載到target[ i ]，最後返回target新對象。    return target;}fn.extend({      method:function(){           alert("靜態方法");      }});fn.method();

源碼解析如下：

 

var options={ a:function(){ alert("a"); }, b:function(){ alert("b"); } } var target={}; for ( var i in options ) target[i]=options[i];//複製對象，重新裝載 target.a(); //a

                                    

 

方法三：

var fn=function(){};Object.extend = function(destination, source) {  for (property in source) {     destination[property] = source[property];  }  return destination;}Object.prototype.extend = function(object) {  return Object.extend.apply(this, [this, object]);} fn.extend({      method:function(){           alert("靜態方法");      }});fn.method();