有關(guān)JavaScript中回調(diào)函數(shù)的所有內(nèi)容！
回調(diào)函數(shù)是每個(gè) JS 開發(fā)人員都應(yīng)該知道的概念之一。回調(diào)用于數(shù)組，計(jì)時(shí)器函數(shù)，promise，事件處理程序等中。
在本文中，會(huì)解釋回調(diào)函數(shù)的概念。另外，還會(huì)幫助智米們區(qū)分兩種回調(diào)：同步和異步。
1.回調(diào)函數(shù)
我們編寫一個(gè)問候的函數(shù)，首先創(chuàng)建一個(gè)函數(shù)greet(name)，該函數(shù)返回歡迎消息：
- function greet(name) {
- return `Hello, ${name}!`;
- }
- greet('小智'); // => 'Hello, 小智!'
如果要向一些人問候怎么做?這里，我們可以使用 array.map() 方法：
- const persons = ['小智', '王大冶']
- const messages = persons.map(greet)
- messages // ["Hello, 小智!", "Hello, 王大冶!"]
persons.map(greet)接受person數(shù)組的每一項(xiàng)，并使用每一項(xiàng)作為調(diào)用參數(shù)來調(diào)用函數(shù)greet()：greet('小智')，greet('王大冶')。
有趣的是persons.map(greet)方法接受greet()函數(shù)作為參數(shù)。這樣做會(huì)使reet()成為回調(diào)函數(shù)。
persons.map(greet)是一個(gè)接受另一個(gè)函數(shù)作為參數(shù)的函數(shù)，因此將其命名為高階函數(shù)。
高階函數(shù)承擔(dān)調(diào)用回調(diào)函數(shù)的全部責(zé)任，并為其提供正確的參數(shù)。
在前面的示例中，高階函數(shù)persons.map(greet)負(fù)責(zé)調(diào)用greet()回調(diào)函數(shù)，并將數(shù)組的每個(gè)項(xiàng)目作為參數(shù)：'小智'和'王大冶'。
我們可以可以自己編寫使用回調(diào)的高階函數(shù)。例如，這里有一個(gè)等價(jià)的array.map()方法
- function map(array, callback) {
- const mappedArray = [];
- for (const item of array) {
- mappedArray.push(
- callback(item)
- );
- }
- return mappedArray;
- }
- function greet(name) {
- return `Hello, ${name}!`;
- }
- const persons = ['小智', '王大冶']
- const messages = map(persons, greet);
- messages // ["Hello, 小智!", "Hello, 王大冶!"]
map(array, callback)是一個(gè)高階函數(shù)，因?yàn)樗邮芑卣{(diào)函數(shù)作為參數(shù)，然后在它的函數(shù)體內(nèi)部調(diào)用回調(diào)函數(shù):callback(item)。
2.同步回調(diào)回調(diào)的調(diào)用方式有兩種：同步和異步回調(diào)。
同步回調(diào)是在使用回調(diào)的高階函數(shù)執(zhí)行期間執(zhí)行的。
換句話說，同步回調(diào)處于阻塞狀態(tài)：高階函數(shù)要等到回調(diào)完成執(zhí)行后才能完成其執(zhí)行。
- function map(array, callback) {
- console.log('map() 開始');
- const mappedArray = [];
- for (const item of array) { mappedArray.push(callback(item)) }
- console.log('map() 完成');
- return mappedArray;
- }
- function greet(name) {
- console.log('greet() 被調(diào)用 ');
- return `Hello, ${name}!`;
- }
- const persons = ['小智'];
- map(persons, greet);
- // map() 開始
- // greet() 被調(diào)用
- // map() 完成
greet()是一個(gè)同步回調(diào)函數(shù)，因?yàn)樗c高階函數(shù)map()同時(shí)執(zhí)行。
2.1 同步回調(diào)的例子
很多原生 JavaScript 類型的方法都使用同步回調(diào)。
最常用的是數(shù)組方法，例如array.map(callback)，array.forEach(callback)，array.find(callback)，array.filter(callback)，array.reduce(callback, init)：
- // 數(shù)組上的同步回調(diào)的示例
- const persons = ['小智', '前端小智']
- persons.forEach(
- function callback(name) {
- console.log(name);
- }
- );
- // 小智
- // 前端小智
- const nameStartingA = persons.find(
- function callback(name) {
- return name[0].toLowerCase() === '小';
- }
- )
- // nameStartingA // 小智
- const countStartingA = persons.reduce(
- function callback(count, name) {
- const startsA = name[0].toLowerCase() === '小';
- return startsA ? count + 1 : count;
- },
- 0
- );
- countStartingA // 1
3.異步回調(diào)
異步回調(diào)在執(zhí)行高階函數(shù)之后執(zhí)行。
簡而言之，異步回調(diào)是非阻塞的：高階函數(shù)無需等待回調(diào)即可完成其執(zhí)行，高階函數(shù)可確保稍后在特定事件上執(zhí)行回調(diào)。
在下面的示例中，later()函數(shù)的執(zhí)行延遲為2秒
- console.log('setTimeout() 開始')
- setTimeout(function later() {
- console.log('later() 被調(diào)用')
- }, 2000)
- console.log('setTimeout() 完成')
- // setTimeout() 開始
- // setTimeout() 完成
- // later() 被調(diào)用(2秒后)
3.1 異步回調(diào)的示例
計(jì)時(shí)器函數(shù)的異步回調(diào)：
- setTimeout(function later() {
- console.log('2秒過去了!');
- }, 2000);
- setInterval(function repeat() {
- console.log('每2秒');
- }, 2000);
DOM 事件監(jiān)聽器也是異步調(diào)用事件處理函數(shù)(回調(diào)函數(shù)的一種子類型)
- const myButton = document.getElementById('myButton');
- myButton.addEventListener('click', function handler() {
- console.log('我被點(diǎn)擊啦!');
- })
- // 點(diǎn)擊按鈕時(shí)，才會(huì)打印'我被點(diǎn)擊啦!'
4. 異步回調(diào)函數(shù) vs 異步函數(shù)
放在函數(shù)定義之前的特殊關(guān)鍵字async創(chuàng)建一個(gè)異步函數(shù)：
- async function fetchUserNames() {
- const resp = await fetch('https://api.github.com/users?per_page=5');
- const users = await resp.json();
- const names = users.map(({ login }) => login);
- console.log(names);
- }
fetchUserNames()是異步的，因?yàn)樗那熬Y是async。該函數(shù)await fetch('https://api.github.com/users?per_page=5')從 GitHub 前5個(gè)用戶。然后從響應(yīng)對(duì)象中提取 JSON 數(shù)據(jù)：await resp.json()。
async函數(shù)是 Promise 的語法糖。當(dāng)遇到表達(dá)式await
異步回調(diào)函數(shù)和異步函數(shù)是不同的術(shù)語。
異步回調(diào)函數(shù)由高階函數(shù)以非阻塞方式執(zhí)行。但是異步函數(shù)在等待promise(await
但是，我們可以將異步函數(shù)用作異步回調(diào)!
我們異步函數(shù)fetchUserNames()設(shè)為單擊按鈕時(shí)調(diào)用的異步回調(diào)：
- const button = document.getElementById('fetchUsersButton');
- button.addEventListener('click', fetchUserNames);
總結(jié)
回調(diào)是一個(gè)可以作為參數(shù)接受并由另一個(gè)函數(shù)(高階函數(shù))執(zhí)行的函數(shù).
有兩種回調(diào)函數(shù):同步和異步。
同步回調(diào)函數(shù)與使用回調(diào)函數(shù)的高階函數(shù)同時(shí)執(zhí)行，同步回調(diào)是阻塞的。另一方面，異步回調(diào)的執(zhí)行時(shí)間比高階函數(shù)的執(zhí)行時(shí)間晚，異步回調(diào)是非阻塞的。
完~，感謝大家的觀看，我是小智，我去刷碗啦!
作者：Shadeed 譯者：前端小智 來源：dmitripavlutin 原文：https://dmitripavlutin.com/javascript-variables-practices/
本文轉(zhuǎn)載自微信公眾號(hào)「大遷世界」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系大遷世界公眾號(hào)。
