Функции обратного вызова Javascript
Что такое функция обратного вызова? Это довольно сбивает с толку, когда я ввел эту терминологию в качестве способа изучения javascript-разработчика. Поэтому я провел небольшое исследование и надеюсь, что смогу узнать об этом больше.
В документе MDN это объясняется как «функция, переданная в другую функцию в качестве аргумента, которая затем вызывается внутри внешней функции для выполнения какой-то процедуры или действия». Чтобы упростить это, функции обратного вызова можно понимать как функцию, вызываемую внутри другой функции. Но это еще не все.
Прежде чем мы подробно остановимся на этом, давайте поговорим о функциях в javascript. Javascript, как язык программирования «любитель функций». Есть 3 распространенных типа использования функций.
Объявление функции,
Функции стрелок: анонимные, Выражение функции: анонимные
имя которого является встроенным прототипом функций в javascript, оно будет ссылаться на имя функции или имя переменной, присвоенное анонимной функцией.
Javascript создает функцию первого класса, что означает, что функции могут переходить в другую функцию в качестве ссылки на имя. Этот тип функции упрощает обратный вызов.
Базовая функция обратного вызова
//Function Declaration
function add(callback){
return callback() + 10
};
add(function(){
return 1 + 2
})
//=> 13;
//function expression: function assign to a variable
const minus = function(callback){
return callback() - 10
}
minus(() => {
return 10
})
//=> 0
//call by function name
const number = () => 3;
minus(number)
//=> -7
Это способ передать анонимную функцию в функцию. Почему ES6 реализует функцию стрелки, функция стрелки поддерживает возврат одной строки. Javascript всегда ищет способ, позволяющий пользователю писать код проще и логичнее.
function(){return 1+2};//will return 3
() => 1+2; //will return the exact same as previous code.
Полезные функции обратного вызова будут включать,
Методы для массивов: forEach, map, filter, find, every, findIndex… Проверьте MDN, чтобы узнать о других методах для массива.
Методы в выборке: .then ()
Дополнительная функция обратного вызова
Посмотрите на основные функции обратного вызова, указанные выше, функции, вызывающие вызовы, - это круто и удобно. Однако есть очень полезный синтаксис для обратного вызова Javascript.
const fun = (json) => console.log(json);
fetch('URL')
.then(resp => resp.json())
.then(fun)
После запуска этого кода в консоли он отобразит json. Почему?
По сравнению с некоторыми другими языками программирования, функции javascript могут принимать любые аргументы, они не будут выдавать ошибку с неправильным количеством аргументов, и это не ошибка.
Таким образом, внутри функции обратного вызова javascript будет принимать любой возврат от родительских функций и передавать его как свой собственный аргумент, передавая его как функцию.
Точнее, второй .then() получает ответ в формате json. Мы инициализируем fun, чтобы получить аргумент (json). Таким образом, ответ json будет (json) для передачи в fun, поскольку fun является функцией обратного вызова в .then().
А теперь, если вы все еще не понимаете, давайте рассмотрим еще один распространенный пример: карта. Вы можете запустить этот код в консоли, чтобы увидеть результат.
- скажем, у меня есть массив чисел
const numbers = [1,2,3,4,5,6,7,8,9];
2. создать функцию обратного вызова, с которой мы хотим взаимодействовать forEach.
const tripling = (number) => number * 3;
3. используйте функцию карты в простом синтаксисе.
numbers.map(tripling);
Когда функция map возвращает каждое число в numbers, например 1, функция утроения примет 1 в качестве аргумента, возвращаемого 3, затем возьмет 2, утроение будет tripling(2) и вернет 6, тогда map выполнит более поздние коды в функции карты. в новый массив, как только все элементы в numbers сопоставлены, он возвращает новый массив.
Это то же самое, что и
numbers.map(returnValue => tripling(returnValue));
Подробнее о синтаксисе обратного вызова
После нескольких попыток мне стало интересно, работает ли этот простой синтаксис с несколькими параметрами. В результате, с некоторыми исследованиями, это работает. Но следует быть осторожным со значениями, возвращаемыми вашей функцией, это может привести к появлению ошибок в вашей программе: если аргументы неверны, что приведет к сбивающим с толку ошибкам.
Javascript - это хорошо
Javascript упрощает код и упрощает его написание разработчиками. Со временем писать код становится все проще, потому что они хотят, чтобы разработчики создавали код с меньшим набором текста и проще.
РЕСУРС
