1. 程式人生 > >JavaScript中的引用函式、呼叫函式和回撥函式

JavaScript中的引用函式、呼叫函式和回撥函式

  1. 引用函式與呼叫函式的區別

    引用函式與呼叫函式的差別與函式名稱後是否附有括號()有關。函式引用只會單獨出現,但函式呼叫則必定後隨括號,很多時候還附有自變數。

舉個例子

// 函式引用 程式碼一
function f(){
    var x = 5;
    return x;
}
var a = f;
var b = f;

console.log(a===b); // true
// 函式呼叫 程式碼二
function f2() {
    var x = 5;
    return x;
}
var a2 = f2();
var b2 = f2();
console.log(a2 === b2);

// 函式呼叫 程式碼三
function f3(){ var x = 5; return function(){ return x; } } var a3 = f3(); var b3 = f3(); console.log(a3 === b3); // false

如上的程式碼:程式碼一和程式碼二分部是函式引用和函式呼叫的列子,返回都為true,程式碼三也是函式呼叫的列子,返回且為false

我們現在來理解下函式引用和函式呼叫的本質區別:當引用函式時候,多個變數記憶體儲存的是函式的相同的入口指標,因此對於同一個函式來講,無論多少個變數引用,他們都是相等的,因為對於引用型別(物件,陣列,函式等)都是比較的是記憶體地址,如果他們記憶體地址一樣的話,說明是相同的;但是對於函式呼叫來講,比如程式碼三;每次呼叫的時候,都被分配一個新的記憶體地址,所以他們的記憶體地址不相同,因此他們會返回false,但是對於程式碼二來講,我們看到他們沒有返回函式,只是返回數值,他們比較的不是記憶體地址,而是比較值,所以他們的值相等,因此他們也返回true,我們也可以看看如下實列化一個物件的列子,他們也被分配到不同的記憶體地址,因此他們也是返回false的;如下程式碼測試:

function F(){
    this.x = 5;
}
var a = new F();
var b = new F();
console.log(a === b); // false
  1. 函式與一般變數的差異,在於如何使用資料。與函式相關的資料(或程式碼)可被執行。想執行函式時,就在函式名稱後加上括號(),如果函式需要自變數,也要記得附加上。

  2. 函式變數的值不是程式碼本身,而是指向儲存程式碼的儲存器位置的引用。

  3. 回撥函式。 簡單理解就是:函式a有一個引數,這個引數是個函式b,當函式a執行完以後執行函式b。那麼這個過程就叫回調。

<head>
    <meta
charset="UTF-8">
<title>Title</title> </head> <script language="javascript" type="text/javascript"> function a(callback) { alert("我是parent函式a!"); alert("呼叫回撥函式"); callback(); } function b(){ alert("我是回撥函式b"); } function c(){ alert("我是回撥函式c"); } function test() { a(b); a(c); } </script> <body> <h1>學習js回撥函式</h1> <button onClick=test()>click me</button> <p>應該能看到呼叫了兩個回撥函式</p> </body> </html>

參考資料

javascript函數語言程式設計要掌握的知識點講解