JS 學習筆記--8---Function類型

練習使用的瀏覽器IE10     　　JS 中Function類型實際上是一種對象，每一個函數實際上都是Function類型的一個執行個體，每一個函數都有一些預設的屬性和方法。由於函數是對象，故函數名實際上也是一個指向函數對象的指標變數 1、聲明一個函數     　　直接用關鍵字function來聲明函數，JS是弱類型的語言，聲明的時候參數個數不限，只是需要寫參數名，不需要寫參數的關鍵字var，不需要指定傳回值以及類型，如果有傳回值直接在函數後面一個return value 即可。 　　方法一：function func(num1,num2){return 1;}//num1,num2是參數名，傳回值為1 　　方法二：利用變數來聲明函數，var box=function(num1,num2){};相當於給window對象的自訂屬性box註冊方法     　　方法三：利用解構函式來聲明，但是最好不要用這種方式來聲明，因為這種方式瀏覽器會解析兩次，效率不高，第一次是解析整個ECMAScript運算式，第二次是解析解構函式中傳遞的字串列表，var box=new Function('num1','num2','return num1+num2');注意解構函式裡面的參數以及語句是帶有引號的。這種方式能夠更好的理解 Function是一個對象的，函數名是一個指標的概念 2、調用函數     　　方法一中聲明的函數直接寫函數名就可以調用[fun(10,20)]， 　　方法二和方法三聲明的函數調用時用變數名後面加括弧裡面寫上要傳遞的參數值[box(10,20)];     　　函數的傳回值可以直接賦值給一個變數[var box=func(20,10);]，也可以當做實參直接傳遞給另外的函數[alert(func(10,20));]     　　ECMAScript 中的函數名本身就是變數，所以函數也可以作為值來使用。也就是說，不僅可以像傳遞參數一樣把一個函數傳遞給另一個函數， 而且可以將一個函數作為另一個函數的結果返回        //將一個函數作為結果返回   其實就相當於執行這個函數，然後把這個函數的傳回值給返回    function sum(num1,num2){        return num1+num2;    }    function func(num1){        return sum(num1,10);    }    alert(func(10));//20  //其實函數名，也就是一個對象的變數，執行的是函數的地址，相當於一個指標//將函數名當做一個參數傳遞給另外一個函數，    function sumFunc(num1,num2){        return num1+num2;    }    function func(sum,num1){        return sum(num1,10);    }    alert(func(sumFunc,10));//20  　　JS 中沒有函數重載的說法，函數調用的時候，會以就近原則來調用     　　JS 中調用函數的時候允許調用者和被調用這的參數個數不一樣，也不會報錯，但是如果參數個數不夠的話，在執行時因為有的參數沒有賦值可能會報錯，參數時從前向後對應傳遞接收的 3、函數的內部屬性 arguments     　　arguments 是一個類數組，用來儲存函數傳遞過來的參數，數群組類型     　　在聲明函數的時候，有的時候我們並不知道調用者到底要傳遞多少個參數過來，比如說，求一串數的累加和，如果調用者不是用數組傳遞過來而是用直接傳遞給函數的方式傳遞[func(10,20...)],那麼在聲明函數實體的時候就不知道要聲明多少個參數，這時可以不寫參數名，在函數內部用arguments來代替，arguments是一個類數組，儲存的是擁有這個對象的函數的參數的值，用索引的方法既可以擷取對應的參數的值，使用如下：        function func(){        var res=0;        for(var i=0;i<arguments.length;i++){            res+=arguments[i]+" | ";        }        return res;    }     alert(func(20,30,40)); 　　arguments 中還有一個很重要的屬性就是callee，是一個指標變數，指向的是擁有這個arguments類數組的函數，其實也就是arguments所在的函數本身，在遞迴的時候最好用這個屬性，因為如果函數名改變了，也不需要改變內部的實現，arguments.callee()始終代表的是這個函數本身   //用arguments.callee的好處是，當函數名改變了以後，不需要改動遞迴出的函數，    function box(num){        if(num<=1){            return 1;        }else{            return num*arguments.callee(num-1);            //arguments.callee代表的是函數的本身，故和上面是同樣的效果        }    }    alert(box(3));//6 4、函數的內部屬性 this     　　this 這個屬性代表的是它所在的對象本身,和C#中this代表實體物件本身是一樣的，this 引用的是函數以執行操作的對象，或者說函數調用語句所處的那個範圍     　　window是JS中最大的一個對象，在window對象中聲明一個變數其實就是給window這個對象聲明一個屬性，var box=1;相當於 window.box=1;也就等價於this.box=1;     　　當在全域範圍中調用函數時，this 對象引用的就是 window。     　　在顯示的聲明一個對象box，這個box中使用的this就代表的是box本身，this.color就是返回的box中屬性color的值，而不是window對象中color的值   // this 代表的是坐在的對象本身，下面在對象box中的this，就代表對象box    var color='紅色'; // window對象的屬性，         var box={        color:'藍色',        run:function(){            alert(this.color);//藍色            return this.color;        }    }    alert(window.color);//紅色    alert(this.color);  //紅色    此處this代表的是window對象，故this.color是代表的window的屬性    alert(box.run());   //藍色     window.co='hh';     //和上面的color是等價的，都屬於window對象的屬性    alert(this.co); 5、函數的屬性 length     　　函數的屬性length代表的是函數希望接收的參數的個數，是由聲明函數時參數列表中的個數決定的 6、函數的屬性 prototype   　　prototype 是儲存所有執行個體方法的真正所在，也就是原型。   　　prototype 下面有兩個方法 apply()，call()，這兩個方法都是函數非繼承而來的方法，  是每一個函數都具有的方法。這兩個方法的用途都是在特定的範圍中調用函數，也就是說調用特定的對象下面調用函數，(當然這個對象不一定已經聲明有這個方法),實際上也就是等價於設定函數內部this對象的值，有點類似於C#的反射中調用對象的方法。   　　func.apply():這個方法有兩個參數，第一個是要執行這個方法的範圍，也就是傳遞一個對象過去，第二個參數是一個數組，這個數組中是存放的調用的函數func的實參，也就是要傳遞給func的值，當然第二個參數可以省略。func.apply(this, [num1, num2]);。如果是在一個函數中調用可以用arguments把這個函數的參數傳遞過去，前提是這個類數組中有參數。但是最好是保證這個類數組中存放的是你想要傳遞給func函數的實參的值。雖然個數不匹配也不會出錯，但是業務上可能不對   　　func.call()：這個方法和上面的apply()方法是一樣的，不同的是參數，第一個同樣是範圍，是一樣的，其餘的參數是直接傳遞給函數的，而不是傳遞一個數組過去。就是說傳遞的參數順序和方式是按照正常調用函數的形式和方法。func.call(this, num1, num2);     　　這兩個方法最主要的功能是是能夠擴充函數賴以啟動並執行範圍，也就是改變函數運行所在的範圍       　　使用這apply()和call()這兩個方法來擴充範圍最大的好處是對象不需要與方法發生任何的耦合關係，也就是上面說的對象中可能不存在這個方法，但只要存在這個對象就OK。【耦合：關聯的意思，修改和維護會發生連鎖反應】。也就是說 box 對象和sayColor()方法之間不會有多餘的關聯操作，比如 box.sayColor = sayColor;[ box對象中無需顯示寫上這條語句，也可以通過sayColor.call(box,'red')或者apply來調用方法sayColor，並且調用時sayColor方法的範圍是在對象box內部 ].   //call()和apply()方法最主要的是用於擴充函數依賴的範圍 var color='red';var box={    color:'green'} function sayColor(){    return this.color;} alert(sayColor());          //red       對象是windowalert(sayColor.call(this));     //red       對象是windowalert(sayColor.apply(this));            //red       對象是windowalert(sayColor.call(window));   //red       對象是windowalert(sayColor.apply(window));  //red       對象是windowalert(sayColor.call(box));      //green     對象是boxalert(sayColor.apply(box));     //green     對象是box