JavaScript의 콜백 함수에 대한 심층 분석

이 글에서는 JavaScript의 콜백 함수에 대한 심층적인 이해를 제공하고 동기식과 비동기식의 차이점을 소개합니다.

Callback 함수는 모든 JS 개발자가 알아야 할 개념 중 하나입니다. 콜백은 배열, 타이머 함수, 약속, 이벤트 핸들러 등에 사용됩니다.

이 글에서는 콜백 함수의 개념을 설명하겠습니다. 또한 Smartmi가 동기 및 비동기라는 두 가지 유형의 콜백을 구별하는 데에도 도움이 됩니다.

1. 콜백 함수

먼저 환영 메시지를 반환하는 greet(name) 함수를 만듭니다. 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 16a49f6d1cdea6399ea3ae092673f05b时（注意，调用fetch()将返回一个 promise），异步函数将暂停执行直到该promise得以解决。

异步回调函数和异步函数是不同的术语。

异步回调函数由高阶函数以非阻塞方式执行。 但是异步函数在等待promise（await 16a49f6d1cdea6399ea3ae092673f05b）解析时暂停其执行。

但是，我们可以将异步函数用作异步回调！

我们异步函数fetchUserNames()

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

button.addEventListener('click', fetchUserNames);

만약 인사하고 싶다면 어떻게 해야 할까요? 사람들 ? 여기서는 array.map() 메서드를 사용할 수 있습니다.

rrreeepersons.map(greet)는 person 배열의 각 항목을 허용합니다. , 그리고 각 항목을 호출 매개변수로 사용하여 greet() 함수를 호출합니다. greet('Xiao Zhi'), greet('Wang Daye') 코드>.

흥미롭게도 persons.map(greet) 메서드는 greet() 함수를 매개변수로 받아들입니다. 이렇게 하면 reet()가 콜백 함수가 됩니다.

persons.map(greet)는 다른 함수를 매개변수로 받는 함수이므로

higher-order function

이라는 이름이 붙었습니다.

고차 함수는 콜백 함수를 호출하고 올바른 매개변수를 제공하는 모든 책임을 집니다. 🎜🎜이전 예에서 고차 함수 persons.map(greet)는 배열의 각 항목을 사용하여 greet() 콜백 함수를 호출하는 역할을 담당합니다. 매개변수: 'Xiao Zhi' 및 'Wang Daye'. 🎜🎜콜백을 사용하여 고차 함수를 직접 작성할 수 있습니다. 예를 들어, 다음은 array.map() 메소드와 동일합니다🎜rrreee🎜map(array, callback)은 콜백 함수를 허용하므로 고차 함수입니다. 매개변수로 사용하고 함수 본문 내에서 콜백 함수(callback(item))를 호출합니다. 🎜

🎜2. 동기식 콜백 🎜🎜🎜콜백을 호출하는 방법에는 동기식 콜백과 비동기식 콜백이 있습니다. 🎜

콜백을 사용하는 고차 함수 실행 중에 동기 콜백이 실행됩니다.

🎜즉, 동기 콜백은 차단 상태에 있습니다. 즉, 콜백 실행이 완료될 때까지 상위 함수는 실행을 완료할 수 없습니다. 🎜rrreee🎜greet()는 고차 함수인 map()과 동시에 실행되기 때문에 동기식 콜백 함수입니다. 🎜

🎜2.1 동기 콜백의 예🎜

🎜많은 기본 JavaScript 유형 메서드는 동기 콜백을 사용합니다. 🎜🎜가장 일반적으로 사용되는 것은 array.map(callback), array.forEach(callback), array.find(callback), <code>array.filter(콜백), array.reduce(콜백, 초기화): 🎜rrreee

🎜3. callback🎜 🎜

비동기 콜백은 고차 함수를 실행한 후에 실행됩니다.

🎜간단히 말해서, 비동기 콜백은 비차단입니다. 고차 함수는 콜백이 실행을 완료할 때까지 기다릴 필요가 없으며, 고차 함수는 콜백이 나중에 특정 이벤트에서 실행되도록 보장합니다. . 🎜🎜아래 예시에서 later() 함수의 실행 지연은 2초입니다🎜rrreee

🎜3.1 비동기 콜백 예시🎜

🎜타이머 함수의 비동기 콜백: 🎜 rrreee🎜DOM 이벤트 리스너는 이벤트 처리 함수(콜백 함수의 하위 유형)를 비동기적으로 호출합니다🎜rrreee

🎜4. 비동기 콜백 함수와 비동기 함수🎜🎜🎜 함수 정의 앞에 배치됩니다. async 키워드는 비동기 함수를 생성합니다. 🎜rrreee🎜fetchUserNames()는 async 접두사가 붙기 때문에 비동기적입니다. await fetch('https://api.github.com/users?per_page=5') 함수는 GitHub에서 처음 5명의 사용자를 가져옵니다. 그런 다음 응답 객체(await resp.json())에서 JSON 데이터를 추출합니다. 🎜🎜 async 함수는 Promise의 문법적 설탕입니다. await 16a49f6d1cdea6399ea3ae092673f05b 표현식이 발견되면(fetch()를 호출하면 약속이 반환됨) 비동기 함수는 promise가 해결되었습니다. 🎜🎜🎜비동기 콜백 함수와 비동기 함수는 다른 용어입니다. 🎜🎜🎜비동기 콜백 함수는 고차 함수에 의해 비차단 방식으로 실행됩니다. 그러나 비동기 함수는 약속(<code>await 16a49f6d1cdea6399ea3ae092673f05b)이 해결되기를 기다리는 동안 실행을 일시 중지합니다. 🎜🎜그러나 비동기 함수를 비동기 콜백으로 사용할 수 있습니다! 🎜🎜우리의 비동기 함수 fetchUserNames()는 버튼을 클릭할 때 호출되는 비동기 콜백으로 설정됩니다. 🎜rrreee🎜🎜 요약 🎜🎜🎜콜백은 매개변수로 허용될 수 있는 함수입니다. 🎜🎜콜백 함수에는 동기식과 비동기식의 두 가지 종류가 있습니다. 🎜🎜동기 콜백 함수는 콜백 함수를 사용하여 고차 함수와 동시에 실행되며 동기 콜백이 차단됩니다. 반면, 비동기 콜백은 고차 함수보다 늦게 실행되며 비차단입니다. 🎜

영어 원본 주소: https://dmitripavlutin.com/javascript-variables-practices/

저자: Shadeed

더 많은 프로그래밍 관련 지식을 보려면 다음을 방문하세요: 프로그래밍 입문! !

위 내용은 JavaScript의 콜백 함수에 대한 심층 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!