1. 程式人生 > >淺析JavaScript中Function對象(一)

淺析JavaScript中Function對象(一)

中一 {} .proto 及其 pro type屬性 tor 下一個 所有

  一、Function對象及其原型對象

  Function對象是js中一個非常重要的對象,所有通過function關鍵字聲明的函數,本質上都是由Function這個特殊的構造器對象創建出來的,也就是new出來的。

  首先要明確的一點就是,在JS中萬物皆對象,所以函數本身也是對象,只不過函數對象比較特殊,比其他對象多一個prototype屬性。所以Function既是對象,也是函數(構造器),其實更準確的說就是函數對象。

  其次,更特殊的一點是,由於js中所有的對象都是由構造器new出來的,那麽Function既然也是個對象,那麽它又是由誰構造出來的呢?這個答案我們可以考察它的prototype和__proto__屬性就能得出答案。

console.log(Function.prototype == Function.__proto__);//true

  也就是說,Function函數的prototype和__proto__指向的是同一個對象,換句話說就是Function自己構造了自己。到了這裏,其實就成了“蛋”和“雞”的關系了。到底是先有雞還是先有蛋?這是個問題,但也不是問題,對於我們開發人員來說,我們壓根沒必要在這個問題上糾結,因為這個問題絲毫不會影響我們開發項目。我們這需要知道有這麽一個扯淡的事情就OK了。

  二、arguments

  其實arguments有2個,驚喜不驚喜,以外不意外?

  1.arguments屬性

  其語法是:function.arguments 屬性:代表傳入函數的實參,它是一個偽數組對象。已廢棄。

function test(var1,var2){
    console.log(test.arguments[0]+test.arguments[1]);
}

  註意: 1)、使用函數名調用;2)、arguments數組訪問的是本次函數調用時傳入的實參,而非上一次調用時的參數(對於嵌套或循環調用需註意!)。推薦使用函數內部的arguments對象:。

  2.arguments對象

  該對象是函數內部的本地變量,而不是函數的屬性。使用示例

function test(var1,var2){
    arguments[
0]=0;//可改變參數的值 alert(arguments[0]+arguments[1]); } test(1,2);//將提示結果為2

  arguments對象並不是一個真正的Array對象,而是一個偽數組,所以它沒有數組的屬性與方法(length除外)。

  arguments對象的主要成員有:arguments.callee,arguments.length。

  ①arguments.callee返回該arguments對象所屬的函數構造器(即函數),從而可實現匿名函數的遞歸等 ,例如

function create() {
   return function(n) {
      if (n <= 1)
         return 1;
      return n * arguments.callee(n - 1);//調用該arguments所屬的匿名函數構造器。
   };
}
var result = create()(5); // returns 120 (5 * 4 * 3 * 2 * 1)

  ②arguments.length : 返回函數被調用時實際傳參的個數。

  來個小例子來說下arguments的用處吧,比如我們封裝一個$(selector){}函數,用來獲取DOM對象,要求這裏的selector能使用各種合法的選擇器,比如:"div",“.hide",”#btn"。那麽我們可以這麽寫:

  function $(selector) {  
        if(arguments.length != 1){
            throw new Error("當前參數為: " + arguments.length + "個,但是函數要求必須為1個參數."); 
        }
        if(selector.length > 0){
            var firstChar = selector.substr(0,1);// [#|.|tag]
            var lastString = selector.substr(1);
            switch(firstChar){
                case "#":
                    return document.getElementById(lastString);
                case ".":
                    return document.getElementsByClassName(lastString);
                default:
                    document.getElementsByTagName(selector);
            }
        }        
    }

  我們首先要判斷用戶有沒有傳遞參數,如果沒有或者參數超過一個就要報錯,那麽如何判斷用戶傳遞的參數的個數呢?這時候arguments.length就派上用場了。

  三、length屬性

  此length屬性表示聲明的函數的形參個數。

  上面說了,在函數內部可以使用arguments對象,arguments對象有一個length屬性。

  其實每一個function對象自己本身也有一個length屬性,這個length屬性是函數對象的一個屬性值,指明該函數期望多少個參數,意即形參的個數。

  四、方法成員:call() 、 apply() 、bind()

  這三個是一個比較難理解的部分,我們放在下一個專題來分析。

淺析JavaScript中Function對象(一)