JavaScript のコールバック関数の詳細な分析

この記事では、JavaScript のコールバック関数を深く理解し、同期と非同期の違いを紹介します。

#コールバック関数は、すべての JS 開発者が知っておくべき概念の 1 つです。コールバックは、配列、タイマー関数、Promise、イベント ハンドラーなどで使用されます。

この記事ではコールバック関数の概念について説明します。さらに、Smartmi が 2 種類のコールバック ( 同期と非同期 ) を区別するのにも役立ちます。

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 の各項目を受け入れます。 array を作成し、各項目を呼び出しパラメータとして使用して関数 greet(): greet('Xiao Zhi'), greet('Wang Daye') 。

興味深いのは、persons.map(greet) メソッドが greet() 関数をパラメータとして受け入れることです。そうすることで、reet() がコールバック関数になります。

persons.map(greet) は、別の関数をパラメータとして受け取る関数であるため、高階関数という名前が付けられています。

高階関数は、コールバック関数を呼び出し、それに正しいパラメーターを提供する責任をすべて負います。

前の例では、高階関数 persons.map(greet) は、配列の各項目を使用して greet() コールバック関数を呼び出す役割を果たします。パラメータとして: 'Xiao Zhi' および 'Wang Daye'。

コールバックを使用して独自の高階関数を作成できます。たとえば、array.map()method

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) と同等の は、コールバックを受け入れるため、高階関数です。 function パラメータとして、関数本体内でコールバック関数が呼び出されます: callback(item)。

2. 同期コールバック

コールバックを呼び出すには、同期コールバックと非同期コールバックの 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. 非同期コールバック関数と非同期function

関数定義の前に置かれる特別なキーワード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()。

asyncFunction は Promise の糖衣構文です。式 await 16a49f6d1cdea6399ea3ae092673f05b が出現すると (fetch() を呼び出すと Promise が返されることに注意してください)、非同期関数は promise が実行されるまで実行を一時停止します。解決される。

非同期コールバック関数と非同期関数は異なる用語です。

非同期コールバック関数は、高階関数によって非ブロック方式で実行されます。ただし、非同期関数は、Promise (await 16a49f6d1cdea6399ea3ae092673f05b) が解決されるまで待機している間、実行を一時停止します。

ただし、非同期関数を非同期コールバックとして使用できます。

非同期関数 fetchUserNames() は、ボタンがクリックされたときに呼び出される非同期コールバックに設定されます。 #Callback は、パラメータとして受け取って、別の関数 (高階関数) によって実行できる関数です。

コールバック関数には、同期関数と非同期関数の 2 種類があります。 同期コールバック関数は、コールバック関数を使用した高階関数と同時に実行され、同期コールバックがブロックされています。一方、非同期コールバックは高階関数よりも遅く実行され、非ブロッキングです。

元の英語アドレス: https://dmitripavlutin.com/javascript-variables-practices/

著者: Shadeed

詳細プログラミング関連の知識については、プログラミング入門をご覧ください。 ！

以上がJavaScript のコールバック関数の詳細な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。