JavaScript function函數種類詳解，javascriptfunction

JavaScript function函數種類詳解，javascriptfunction

本篇主要介紹普通函數、匿名函數、閉包函數

目錄

• 普通函數：介紹普通函數的特性：同名覆蓋、arguments對象、預設傳回值等。
• 匿名函數：介紹匿名函數的特性：變數匿名函數、無名稱匿名函數。
• 閉包函數：介紹閉包函數的特性。

 

1. 普通函數
1.1 樣本

function ShowName(name) {  alert(name);} 

1.2 Js中同名函數的覆蓋

在Js中函數是沒有重載，定義相同函數名、不同參數簽名的函數，後面的函數會覆蓋前面的函數。調用時，只會調用後面的函數。

var n1 = 1; function add(value1) {  return n1 + 1;}alert(add(n1));//調用的是下面的函數，輸出：3 function add(value1, value2) {  return value1 + 2;}alert(add(n1));//輸出：3 

1.3 arguments對象

arguments 類似於C#的params，操作可變參數：傳入函數的參數數量大於定義時的參數數量。

function showNames(name) {  alert(name);//張三  for (var i = 0; i < arguments.length; i++) {    alert(arguments[i]);//張三、李四、王五  }}showNames('張三','李四','王五');

1.4 函數的預設傳回值

若函數沒有指明傳回值，預設返回的是'undefined'

function showMsg() {}alert(showMsg());//輸出：undefined　　

2.匿名函數
2.1 變數匿名函數

2.1.1 說明
可以把函數賦值給變數、事件。

2.1.2 樣本

//變數匿名函數，左側可以為變數、事件等var anonymousNormal = function (p1, p2) {  alert(p1+p2);}anonymousNormal(3,6);//輸出9

2.1.3 適用情境
①避免函數名汙染。若先聲明個帶名稱的函數，再賦值給變數或事件，就造成了函數名的濫用。

2.2 無名稱匿名函數

2.2.1 說明
即在函式宣告時，在後面緊跟參數。Js文法解析此函數時，裡面代碼立即執行。

2.2.2 樣本

(function (p1) {  alert(p1);})(1);

2.2.3 適用情境
①只需執行一次的。如瀏覽器載入完，只需要執行一次且後面不執行的功能。

3. 閉包函數
3.1 說明

 假設，函數A內部聲明了個函數B，函數B引用了函數B之外的變數，並且函數A的傳回值為函數B的引用。那麼函數B就是閉包函數。

3.2 樣本

3.2.1 樣本1：全域引用與局部引用

function funA() {  var i = 0;  function funB() { //閉包函數funB    i++;    alert(i)  }  return funB;}var allShowA = funA(); //全域變數引用：累加輸出1,2,3,4等 function partShowA() {  var showa = funA();//局部變數引用：只輸出1  showa();}

allShowA是個全域變數，引用了函數funA。重複運行allShowA()，會輸出1,2,3,4等累加的值。

執行函數partShowA(),因為內部只聲明了局部變數showa來引用funA，執行完畢後因範圍的關係，釋放showa佔用的資源。

閉包的關鍵就在於範圍：全域變數佔有的資源只有當頁面變換或瀏覽器關閉後才會釋放。var allShowA = funA() 時，相當於allShowA引用了funB()，從而使funB()裡的資源不被GC回收，因此funA()裡的資源也不會。 

3.2.2 樣本2：有參閉包函數

function funA(arg1,arg2) {  var i = 0;  function funB(step) {    i = i + step;    alert(i)  }  return funB;}var allShowA = funA(2, 3); //調用的是funA arg1=2，arg2=3allShowA(1);//調用的是funB step=1,輸出 1allShowA(3);//調用的是funB setp=3,輸出 4

3.2.3 樣本3：父函數funA內的變數共用

function funA() {  var i = 0;  function funB() {    i++;    alert(i)  }  allShowC = function () {// allShowC引用匿名函數,與funB共用變數i    i++;    alert(i)  }  return funB;}var allShowA = funA();var allShowB = funA();//allShowB引用了funA，allShowC在內部重新進行了綁定，與allShowB共用變數i

3.3 適用情境

①保證函數funA內裡的變數安全，因為外部不能直接存取funA的變數。

以上就是本文的全部內容，希望對大家的學習有所協助。

您可能感興趣的文章:

• js函數提示之 setTimeout(function(){},0)
• Javascript 使用function定義建構函式
• js function定義函數使用心得
• JavaScript 匿名函數（anonymous function）與閉包（closure）
• js物件導向設計用{}好還是function(){}好(建構函式)
• js 在定義的時候立即執行的函數運算式(function)寫法
• JS特殊函數(Function()建構函式、函數直接量)區別介紹
• js function定義函數的幾種不錯方法
• 深入理解javascript中的立即執行函數(function(){…})()
• javascript學習筆記（四）function函數部分