首頁 > web前端 > js教程 > JavaScript function函數種類詳解_javascript技巧

JavaScript function函數種類詳解_javascript技巧

WBOY
發布: 2016-05-16 15:14:14
原創
1394 人瀏覽過

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

目錄

  • 普通函數:介紹普通函數的特性:同名覆蓋、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=3
allShowA(1);//调用的是funB step=1,输出 1
allShowA(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的變數。

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

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板