JavaScript中回撥函式知識點,都在這了!

前端小智發表於2021-12-22
作者:Shadeed
譯者:前端小智
來源:dmitripavlutin
有夢想,有乾貨,微信搜尋 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄,有一線大廠面試完整考點、資料以及我的系列文章。

回撥函式是每個 JS 開發人員都應該知道的概念之一。 回撥用於陣列,計時器函式,promise,事件處理程式等中。

在本文中,會解釋回撥函式的概念。 另外,還會幫助智米們區分兩種回撥:同步和非同步

1.回撥函式

我們編寫一個問候的函式,首先建立一個函式greet(name),該函式返回歡迎訊息:

function greet(name) {
  return `Hello, ${name}!`;
}

greet('小智'); // => 'Hello, 小智!'

如果要向一些人問候怎麼做?這裡,我們可以使用 array.map() 方法:

const persons = ['小智', '王大冶']
const messages = persons.map(greet)

messages // ["Hello, 小智!", "Hello, 王大冶!"]

persons.map(greet)接受person陣列的每一項,並使用每一項作為呼叫引數來呼叫函式greet()greet('小智')greet('王大冶')

有趣的是persons.map(greet)方法接受greet()函式作為引數。 這樣做會使reet()成為回撥函式。

persons.map(greet)是一個接受另一個函式作為引數的函式,因此將其命名為高階函式

高階函式承擔呼叫回撥函式的全部責任,併為其提供正確的引數。

在前面的示例中,高階函式persons.map(greet)負責呼叫greet()回撥函式,並將陣列的每個專案作為引數:'小智''王大冶'

我們可以可以自己編寫使用回撥的高階函式。例如,這裡有一個等價的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)是一個高階函式,因為它接受回撥函式作為引數,然後在它的函式體內部呼叫回撥函式:callback(item)

2.同步回撥

回撥的呼叫方式有兩種:同步和非同步回撥。

同步回撥是在使用回撥的高階函式執行期間執行的。

換句話說,同步回撥處於阻塞狀態:高階函式要等到回撥完成執行後才能完成其執行。

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() 被呼叫 ');
  return `Hello, ${name}!`;
}
const persons = ['小智'];

map(persons, greet);

// map() 開始
// greet() 被呼叫 
// map() 完成

greet()是一個同步回撥函式,因為它與高階函式map()同時執行。

2.1 同步回撥的例子

很多原生 JavaScript 型別的方法都使用同步回撥。

最常用的是陣列方法,例如array.map(callback)array.forEach(callback)array.find(callback)array.filter(callback)array.reduce(callback, init)

// 陣列上的同步回撥的示例

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.非同步回撥

非同步回撥在執行高階函式之後執行。

簡而言之,非同步回撥是非阻塞的:高階函式無需等待回撥即可完成其執行,高階函式可確保稍後在特定事件上執行回撥。

在下面的示例中,later()函式的執行延遲為2秒

console.log('setTimeout() 開始')
setTimeout(function later() {
  console.log('later() 被呼叫')
}, 2000)
console.log('setTimeout() 完成')

// setTimeout() 開始
// setTimeout() 完成
// later() 被呼叫(2秒後)

3.1 非同步回撥的示例

計時器函式的非同步回撥:

setTimeout(function later() {
  console.log('2秒過去了!');
}, 2000);

setInterval(function repeat() {
  console.log('每2秒');
}, 2000);

DOM 事件監聽器也是非同步呼叫事件處理函式(回撥函式的一種子型別)

const myButton = document.getElementById('myButton');

myButton.addEventListener('click', function handler() {
  console.log('我被點選啦!');
})
// 點選按鈕時,才會列印'我被點選啦!'

4. 非同步回撥函式 vs 非同步函式

放在函式定義之前的特殊關鍵字async建立一個非同步函式:

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()是非同步的,因為它的字首是async。 該函式await fetch('https://api.github.com/users?per_page=5')從 GitHub 前5個使用者。 然後從響應物件中提取 JSON 資料:await resp.json()

async函式是 Promise 的語法糖。 當遇到表示式await <promise>時(注意,呼叫fetch()將返回一個 promise),非同步函式將暫停執行直到該promise得以解決。

非同步回撥函式和非同步函式是不同的術語。

非同步回撥函式由高階函式以非阻塞方式執行。 但是非同步函式在等待promise(await <promise>)解析時暫停其執行。

但是,我們可以將非同步函式用作非同步回撥!

我們非同步函式fetchUserNames()設為單擊按鈕時呼叫的非同步回撥:

const button = document.getElementById('fetchUsersButton');

button.addEventListener('click', fetchUserNames);

總結

回撥是一個可以作為引數接受並由另一個函式(高階函式)執行的函式.

有兩種回撥函式:同步和非同步。

同步回撥函式與使用回撥函式的高階函式同時執行,同步回撥是阻塞的。另一方面,非同步回撥的執行時間比高階函式的執行時間晚,非同步回撥是非阻塞的。

完~,感謝大家的觀看,我是小智,我去刷碗啦!


程式碼部署後可能存在的BUG沒法實時知道,事後為了解決這些BUG,花了大量的時間進行log 除錯,這邊順便給大家推薦一個好用的BUG監控工具 Fundebug

原文:https://dmitripavlutin.com/ja...

交流

有夢想,有乾貨,微信搜尋 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。

本文 GitHub https://github.com/qq44924588... 已收錄,有一線大廠面試完整考點、資料以及我的系列文章。

相關文章