js 徹底理解回撥函式

一、前奏

在談回撥函式之前，先看下下面兩段程式碼： 
不妨猜測一下程式碼的結果。

function say (value) {
    alert(value);
}
alert(say);
alert(say('hi js.'));

• 1
• 2
• 3
• 4
• 5

如果你測試了，就會發現：

只寫變數名  say   返回的將會是 say方法本身，以字串的形式表現出來。
而在變數名後加()如say()返回的就會使say方法呼叫後的結果，這裡是彈出value的值。

• 1
• 2

二、js中函式可以作為引數傳遞

再看下面的兩段程式碼：

function say (value) {
    alert(value);
}
function execute (someFunction, value) {
    someFunction(value);
}
execute(say, 'hi js.');

• 1
• 2
• 3
• 4
• 5
• 6
• 7

與

function execute (someFunction, value) {
    someFunction(value);
}
execute(function(value){alert(value);}, 'hi js.');

• 1
• 2
• 3
• 4

上面第一段程式碼是將say方法作為引數傳遞給execute方法 
第二段程式碼則是直接將匿名函式作為引數傳遞給execute方法

實際上：

function say (value) {
    alert(value);
}
// 注意看下面,直接寫say方法的方法名與下面的匿名函式可以認為是一個東西
// 這樣再看上面兩段程式碼是不是對函式可以作為引數傳遞就更加清晰了
say;

function (value) {
    alert(value);
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

這裡的say或者匿名函式就被稱為回撥函式。

• 1
• 2

三、回撥函式易混淆點——傳參

如果回撥函式需要傳參，如何做到，這裡介紹兩種解決方案。

• 將回撥函式的引數作為與回撥函式同等級的引數進行傳遞

• 回撥函式的引數在呼叫回撥函式內部建立

四、寫在最後

回撥函式應用場景多用在使用 js 寫元件時，尤其是元件的事件很多都需要回撥函式的支援。 
關於回撥函式還有什麼問題可以在下面留言，一起交流。