[toc] ##概念 > 函數是由事件驅動的或者當它被調用時執行的可重復使用的代碼塊。 `js` 支持兩種函數：一類是語言內部的函數（如`eval()` ），另一類是自己創建的。 在 `JavaScript` 函數內部聲明的變量（使用 var）是局部變量，所以只能在函數內部訪問它。（該變量的作用域是局部的）。 您可以在不同的函數中使用名稱相同的局部變量，因為只有聲明過該變量的函數才能識別出該變量。 ##函數調用 有如下四種調用`js`函數的方式： * 作為函數 * 作為方法 * 作為構造函數 * 通過`call()`和`apply()` ##返回函數的函數 1. 當函數無明確返回值時，返回的值就是`undefined`。 2. 當函數有返回值時，返回值是什么就返回什么。 我們可以通過使用 `return` 語句實現將函數返回調用它的地方。 在使用 `return` 語句時，函數會停止執行，并返回指定的值。 函數通常會返回一個唯一值，那么這個值也可能是另一個函數： ``` <script type="text/javascript"> //函數表達式 var box = function(){ var a=1; return function(){ alert(a++) } alert(a);//永遠不會執行 } alert(box());//彈出"function(){alert(a++)}" </script> ``` 在這里，我們只需將返回值賦值給某個變量，然后就可以像使用一般函數那樣調用它了： ``` <script type="text/javascript"> var box = function(){ var a=1; return function(){ alert(++a) } } var newFunc = box(); newFunc();//2 </script> ``` 如果想讓返回的函數立即執行，亦可以使用`box()()`來執行這段代碼。 `ECMAScript`所有函數的參數都是按值傳遞的，言下之意就是參數不會按引用傳遞。 PS：如果存在按引用傳遞的話，那么函數里的那個變量將會是全局變量，在外部也可以訪問。 ``` （1）值類型：數值、布爾值、null、undefined。 （2）引用類型：對象、數組、函數。 ``` `引用類型值`：指的是那些保存在堆內存中的對象，意思是，變量中保存的實際上只是一個指針，這個指針執行內存中的另一個位置，由該位置保存對象； ##創建匿名函數 ``` function(){ return ‘hi’; //單獨的匿名函數是無法運行的，就算能運行也無法調用，因為沒有名字 } ``` 這種匿名函數的用法在`JQuery`中非常多。直接聲明一個匿名函數，立即使用。用匿名函數的好處就是省得定義一個用一次就不用的函數，而且免了命名沖突的問題，`js`中沒有命名空間的概念，因此很容易函數名字沖突，一旦命名沖突以最后聲明的為準。 在`javascript`語言里任何匿名函數都是屬于`window`對象。在定義匿名函數時候它會返回自己的內存地址，如果此時有個變量接收了這個內存地址，那么匿名函數就能在程序里被使用了，因為匿名函數也是在全局執行環境構造時候定義和賦值，所以匿名函數的`this`指向也是`window`對象 ``` (function(){ console.log(this === window);//true })(); ``` 通過自我執行來執行匿名函數： ``` //通過自我執行來執行匿名函數 <script type="text/javascript"> (function (){ // (匿名函數)()；第一圓括號放匿名函數，第二個圓括號執行 alert('Lee'); })(); </script> ``` 把匿名函數自我執行的返回值賦給變量： ``` //把匿名函數自我執行的返回值賦給變量 <script type="text/javascript"> var box = (function (){ alert('Lee'); })(); //彈出”Lee”； alert(box); //彈出 undefined,如果寫出alert(box())，那么只會彈出一個"Lee" </script> var box= (function () { return 'hi'; })(); console.log(box);//hi ``` 自我執行匿名函數的傳參： ``` //自我執行匿名函數的傳參 <script type="text/javascript"> (function (age){ alert(age); })(100); //彈出100 </script> ``` ### 自執行函數的三種寫法 ``` var result = function (){ alert(2); }(); ``` 另一種語法也可得到同樣結果： ``` var result = (function () { console.log(2); })(); ``` 將函數返回值分配給變量： ``` var result = (function () { return 2; }()); ``` ##js創建動態函數： `js`支持創建動態函數，動態函數必須用`Function`對象來定義（Function是`js`中的一個對象，是固定不變的，規定`Function`對象的"F"必須大寫，當是`function`的時候，我們知道是定義函數的時候所使用的一個關鍵字：`function funName(x，y)`，當是`Function`的時候（F大寫的時候），我們知道是`js`中的對象） 創建動態函數的基本格式：`var 變量名 = new Function("參數1"，"參數2"，"參數n"，"執行語句");` 看下面的一段代碼： ``` <script type="text/javascript"> var square = new Function ("x","y","var sum ; sum = x+y;return sum;"); alert("square(2,3)的結果是："+square(2,3)); //square(2,3)的結果是：5 </script> ``` `square`是動態創建的函數，在`Function`對象后面的括號里的每一部分內容都必須是字符串形式的，也就是說都必須用引號（""或者是''）括起來 這段代碼： ``` var square = new Function ("x","y","var sum ; sum = x+y;return sum;"); ``` 和下面這段代碼： ``` //函數聲明 function square (x,y){ var sum; sum = x+y; return sum; } ``` 是一摸一樣的，只不過一個是`動態函數`，一個是`靜態函數`。 我們為什么要把代碼分成一小段一小段的代碼呢？，把一個字符串分成了若干個獨立的字符串的優點就在于我們可以通過修改其中的某些字符串來隨時改變函數的作用。 ##回調函數 回調就是一個函數的調用過程。那么就從理解這個調用過程開始吧。函數a有一個參數，這個參數是個函數b，當函數a執行完以后執行函數b。那么這個過程就叫回調。 其實中文也很好理解：回調，回調，就是回頭調用的意思。函數a的事先干完，回頭再調用函數b。 這里必須清楚一點：函數b是你以參數形式傳給函數a的，那么函數b就叫回調函數。 在jquery里的絕大多數效果函數都涉及到callback函數。 例如： ``` <script type="text/javascript"> $("div").show(1000,function(){ //callback function }); </script> ``` 這里的`callback function`換成實例可以是： ``` <script type="text/javascript"> $("div").show(1000,function(){ console.log("hello world") }); </script> ``` `Callback`實際上是，當一個函數執行完后，現執行的那個函數就是所謂的`callback`函數。怎么樣？很好理解吧…… ##方法和函數的區別 ``` var arr = [1,2,3,4,5] var a =12; // 變量：自由的 arr.a= 5; //屬性：屬于一個對象 function show() //函數：自由的 { alert(‘a’); } arr.fn = function() //方法：屬于一個對象 { alert(‘b’); } ``` 其實方法就是函數，只不過方法是有所屬的對象。 我們所熟知的，將函數綁定到 `click` 事件 語法： ``` $(selector).click(function) ``` 參數描述function可選。規定當發生 click 事件時運行的函數. 這種形式在`jquery`中經常見到。它是將`function`當做該方法的參數，向該方法添加一個事件處理函數。 ##js全局函數 全局函數與內置對象的屬性或方法不是一個概念。全局函數它不屬于任何一個內置對象。 JavaScript 中包含以下 7 個全局函數，用于完成一些常用的功能： ``` escape( )、eval( )、isFinite( )、isNaN( )、parseFloat( )、 parseInt( )、unescape( )。 ``` ##函數的幾個作用 ### 作為一個類構造器使用 ``` function Class(){} Class.prototype={}; var item=new Class(); ``` ### 作為閉包使用 ``` (function(){ //獨立作用域 })(); ``` ### 作為構造函數調用 所謂構造函數，就是通過這個函數生成一個新對象（object）。 ``` <script type="text/javascript"> function Test(){//大寫，以區分普通函數 this.x = 10; } var obj = new Test(); alert(obj.x); //彈出 10； </script> ``` 可以使用 `new` 運算符結合像 `Object()`、`Date()` 和 `Function()` 這樣的預定義的構造函數來創建對象并對其初始化。面向對象的編程其強有力的特征是定義自定義構造函數以創建腳本中使用的自定義對象的能力。創建了自定義的構造函數，這樣就可以創建具有已定義屬性的對象。下面是自定義函數的示例（注意 `this` 關鍵字的使用）。 ``` function Circle (xPoint, yPoint, radius) { this.x = xPoint; // 圓心的 x 坐標。 this.y = yPoint; // 圓心的 y 坐標。 this.r = radius; // 圓的半徑。 } ``` 調用 Circle 構造函數時，給出圓心點的值和圓的半徑（所有這些元素是完全定義一個獨特的圓對象所必需的）。結束時 Circle 對象包含三個屬性。下面是如何例示 `Circle` 對象。 ``` var aCircle = new Circle(5, 11, 99); ``` 使用構造器函數的優點是，它可以根據參數來構造不同的對象。 缺點是構造時每個實例對象都會生成重復調用對象的方法，造成了內存的浪費。 ``` <script type="text/javascript"> function Test(name){ this.occupation = "coder"; this.name = name; this.whoAreYou = function(){ return "I'm " + this.name + "and I'm a " + this.occupation; } } var obj = new Test('trigkit4');//利用同一個構造器創建不同的對象 var obj2 = new Test('student'); obj.whoAreYou();//"I'm trigkit4 and I'm a corder" obj2.whoAreYou();//"I'm student and I'm a corder" </script> ``` 依照慣例，我們應該將構造器函數的首字母大寫，以便顯著地區別于一般的函數。 以下兩種形式的定義函數方式是等價的。 ``` <script type="text/javascript"> var test = function(){ alert("Hello World"); } alert(typeof(test));//output function </script> ``` 這里明確定義了一個變量`test`，他的初始值被賦予了一個`function`實體 <br/> ``` <script type="text/javascript"> function test(){ alert("Hello World"); } alert(typeof(test));//output function </script> ``` <br/> 看看下面這種定義式函數形式： ``` <script type="text/javascript"> function test(){ alert("Hello World"); }; test();//居然輸出Hello，很奇怪不是嗎？ function test(){ alert("Hello"); }; test();//正常滴輸出了Hello </script> ``` 很顯然，第一個函數并沒有起到作用，很奇怪不是嗎？我們知道，`javascript`解析引擎并不是一行一行地執行代碼，而是一段一段地執行代碼。在同一段程序的分析執行中，定義式的函數語句會被優先執行，所以第一個定義的代碼邏輯已經被第二個覆蓋了，所以兩次調用相同函數，只會執行第二個。 ##作為值的函數 函數在`js`中不僅是一種語法，也是一個值。也就是說可以將函數賦值給變量，存儲在對象的屬性或數組的元素中，作為參數傳入另一個函數中。 函數的名字實際是看不見的，它僅僅是變量的名字，這個變量指代函數對象 ``` <script type="text/javascript"> function square(x,y){ return x*y; } var s = square; //s和square指代同一個函數 square(2,3);//6 s(2,4);//8 </script> ``` 除了可以將函數賦值給變量，同樣可以將函數賦值給對象的屬性，當函數作為對象的屬性調用時，函數就稱為方法 ``` <script type="text/javascript"> var obj = {square:function(x,y){ //對象直接量 return x*y; }}; var ect = obj.square(2,3); </script> ``` ##prototype屬性 每一個函數都包含prototype屬性，這個屬性指向一個對象的引用，這個對象稱為原型對象。 ##call()和apply() `apply()`函數有兩個參數：第一個參數是上下文，第二個參數是參數組成的數組。如果上下文是null，則使用全局對象代替。例如： ``` function.apply(this,[1,2,3]) ``` `call()`的第一個參數是上下文，后續是實例傳入的參數序列，例如： ``` function.call(this,1,2,3); ``` ##高階函數 這里的高階函數可不是高數里的那個高階函數，所謂高階函數就是操作函數的函數，它接收一個或多個函數作為參數，并返回新函數 ##參數arguments 當函數被調用時，會得到一個免費奉送的參數數組，那就是`arguments`數組。通過它，函數可以訪問所有它被調用時傳遞給他的參數列表。這使得編寫一個無需指定參數個數的函數成為可能。 ``` <script type="text/javascript"> var sum = function(){ var i ,sum =0; for(i = 0;i<arguments.length;i+=1){ sum+=arguments[i]; } return sum; }; document.writeln(sum(4,5,23,13,35,46,-10));//116 </script> ``` 在`ECMAScript`中的參數在內部是用一個數組來表示的，函數接收到的始終都是這個數組，而不關心數組中包含哪些參數 ``` function add(num1,num2){ num = num1 + num2; return num; } var result = 12,count = 20; alert(add(result,count));//32;命名的參數只提供便利，解析器不會驗證命名參數 ``` 實際上，`arguments`并不是一個真正的數組，它只是一個類數組的對象，它擁有一個`length`屬性，但他缺少所有數組的方法。另外，`arguments`對象的長度是由傳入的參數個數決定的，而不是由定義函數時的命名參數的個數決定的 函數在定義或者聲明的時候，所有的參數都是形參，因此，我們可以根據實際情況來命名參數，函數也只有在被調用時才會傳入實參。而每個函數在被調用時都會自動取得兩個特殊變量：this 和 arguments ##函數的遞歸 函數的遞歸，即一個函數在通過名字調用自身的情況下構成的： 通過使用`argument.callee`代替函數名： ``` //arguments.callee是一個指向正在執行的函數的指針 <script> function factorial(num){ if(num<=1){ return 1; }else{ return num*arguments.callee(num-1); } } </script> ```