В этой статье мы познакомимся с функциями обратного вызова в JavaScript на нескольких примерах. Функции обратного вызова также называют функциями высшего порядка.
Функция высшего порядка — это функция, которая может принимать другую функцию в качестве аргумента или возвращать другую функцию в качестве результата.
Функция в JS является объектом первого класса.
В языках программирования существует понятие "объекты первого рода (или класса)". Им обозначают элементы, которые могут быть переданы в функции, возвращены из функций и присвоены переменным (или константам). К таким элементам относятся любые данные, например числа, строки, массивы или логические значения. Обратите внимание, что сама переменная (или константа) под это понятие не попадает, объектом первого рода считаются те данные, которые лежат в переменной (или константе).
Всё это работает нормально. Легко понять, как передать функцию в качестве аргумента другой функции.
Но зачем нам этот обратный вызов в JavaScript?
Чтобы лучше понять, посмотрите на приведенный ниже пример, который не использует функции обратного вызова, и посмотрите, насколько это уродливо.
Это отлично работает. Но допустим, что эта функция вычисления является частью некоторой библиотеки, например, библиотеки jQuery. И пользователь должен использовать эту библиотеку, должен передать число и тип расчета, чтобы получить результат.
Теперь для всех возможных типов вычислений, эта библиотека должна реализовать все это. Мы можем передать
Так что делать? какой лучший способ для этого?
Лучший способ сделать это - сделать функцию как можно более абстрактной. Чтобы сделать функцию абстрактной, нам нужно вывести функциональность наружу. Функция должна быть общей.
Посмотрите на приведенный ниже пример, чтобы лучше понять.
Используя функции обратного вызова, мы собираемся улучшить приведенный выше код. Так что вы можете увидеть реальное использование функций обратного вызова.
Как пользователь, я могу создать любую функцию, перейти в эту библиотеку и получить желаемый результат. Итак, это сила функций обратного вызова.
Я также могу сделать это,
Исходя из моих требований, я могу изменить все, что смогу. Этот пример выше возвращает true.
В приведенном выше примере мы применили функцию обратного вызова к методу сортировки JavaScript, чтобы отсортировать массив по ключам в порядке возрастания.
Давайте изменим функцию обратного вызова для сортировки массива по ключам в порядке убывания.
Давайте изменим функцию обратного вызова для сортировки массива на основе значений в порядке возрастания.
Давайте изменим функцию обратного вызова для сортировки массива по значениям в порядке убывания.
Приведенные выше примеры, помогают не только понять работу обратных вызовов в JavaScript, но помогают написать некоторые функции сортировки, а это в свою очередь полезно тем, что не нужно "тянуть" в проект всю библиотеку (например Lodash), только ради простой сортировки.
Я надеюсь, что эта статья поможет вам лучше понять функции обратного вызова в JavaScript с помощью простых примеров.
Таким образом, вы можете сами написать для своих проектов свою собственную библиотеку и использовать ее в виде подключаемого модуля. Как это сделать? Смотрите мои статьи в этом блоге в разделе
JAVASCRIPT&PHP
Функция высшего порядка — это функция, которая может принимать другую функцию в качестве аргумента или возвращать другую функцию в качестве результата.
Функция в JS является объектом первого класса.
В языках программирования существует понятие "объекты первого рода (или класса)". Им обозначают элементы, которые могут быть переданы в функции, возвращены из функций и присвоены переменным (или константам). К таким элементам относятся любые данные, например числа, строки, массивы или логические значения. Обратите внимание, что сама переменная (или константа) под это понятие не попадает, объектом первого рода считаются те данные, которые лежат в переменной (или константе).
- Мы можем передать объект в функцию в качестве аргумента.
- Мы также можем передать другие функции в функцию в качестве аргумента для выполнения в некоторый момент.
Простой пример для понимания:
let function1 = function(){
console.log("I'm the function1 result");
}
let function2 = function(callback){
console.log("I'm the function2 result");
callback();
}
function2(function1);
// I'm the function2 result
// I'm the function1 result
Всё это работает нормально. Легко понять, как передать функцию в качестве аргумента другой функции.
Но зачем нам этот обратный вызов в JavaScript?
Чтобы лучше понять, посмотрите на приведенный ниже пример, который не использует функции обратного вызова, и посмотрите, насколько это уродливо.
let calculate = function(x, y, operation){
if(operation === 'subtract')
return x - y;
else if(operation === 'divide')
return x/y;
}
console.log(calculate(10,3,'subtract'));
// Output:
// 7
Это отлично работает. Но допустим, что эта функция вычисления является частью некоторой библиотеки, например, библиотеки jQuery. И пользователь должен использовать эту библиотеку, должен передать число и тип расчета, чтобы получить результат.
Теперь для всех возможных типов вычислений, эта библиотека должна реализовать все это. Мы можем передать
add, кратно или это могут быть случайные операции. Но эта библиотека поддерживает только два типа вычислений: вычитание и деление.
Так что делать? какой лучший способ для этого?
Лучший способ сделать это - сделать функцию как можно более абстрактной. Чтобы сделать функцию абстрактной, нам нужно вывести функциональность наружу. Функция должна быть общей.
Посмотрите на приведенный ниже пример, чтобы лучше понять.
Используя функции обратного вызова, мы собираемся улучшить приведенный выше код. Так что вы можете увидеть реальное использование функций обратного вызова.
let add = function (x, y) {
return x + y;
};
let substract = function (x, y) {
return x - y;
};
let multiplay = function (x, y) {
return x * y;
};
let divide = function (x, y) {
return x / y;
};
let calculate = function (x, y, callback) {
if (typeof callback === "function") return callback(x, y);
};
console.log(calculate(12, 8, add));
// 20
Как пользователь, я могу создать любую функцию, перейти в эту библиотеку и получить желаемый результат. Итак, это сила функций обратного вызова.
Я также могу сделать это,
let calculate = function (x, y, callback) {
if (typeof callback === "function") return callback(x, y);
};
console.log(
calculate(12, 8, function (x, y) {
return x >= y;
})
);
// true
Исходя из моих требований, я могу изменить все, что смогу. Этот пример выше возвращает true.
Пример из реальной жизни:
Одним из примеров функции обратного вызова JavaScript в реальном времени является методsort().
var simpleArray = [
{
key: 12,
value: "Hello",
},
{
key: 13,
value: "World",
},
{
key: 14,
value: "Something",
},
];
simpleArray.sort(function (val_1, val_2) {
if (val_1.key < val_2.key) {
return -1;
} else {
return 1;
}
});
let result = simpleArray.forEach((res) =>
console.log(res.key + " " + res.value)
);
// 12 Hello
// 13 World
// 14 Something
В приведенном выше примере мы применили функцию обратного вызова к методу сортировки JavaScript, чтобы отсортировать массив по ключам в порядке возрастания.
Давайте изменим функцию обратного вызова для сортировки массива по ключам в порядке убывания.
simpleArray.sort(function (val_1, val_2) {
if (val_1.key > val_2.key) {
return -1;
} else {
return 1;
}
});
let result = simpleArray.forEach((res) =>
console.log(res.key + " " + res.value)
);
// 14 Something
// 13 World
// 12 Hello
Давайте изменим функцию обратного вызова для сортировки массива на основе значений в порядке возрастания.
simpleArray.sort(function (val_1, val_2) {
if (val_1.value < val_2.value) {
return -1;
} else {
return 1;
}
});
// 12 Hello
// 14 Something
// 13 World
Давайте изменим функцию обратного вызова для сортировки массива по значениям в порядке убывания.
simpleArray.sort(function (val_1, val_2) {
if (val_1.value > val_2.value) {
return -1;
} else {
return 1;
}
});
// 13 World
// 14 Something
// 12 Hello
Приведенные выше примеры, помогают не только понять работу обратных вызовов в JavaScript, но помогают написать некоторые функции сортировки, а это в свою очередь полезно тем, что не нужно "тянуть" в проект всю библиотеку (например Lodash), только ради простой сортировки.
Я надеюсь, что эта статья поможет вам лучше понять функции обратного вызова в JavaScript с помощью простых примеров.
Таким образом, вы можете сами написать для своих проектов свою собственную библиотеку и использовать ее в виде подключаемого модуля. Как это сделать? Смотрите мои статьи в этом блоге в разделе
JAVASCRIPT&PHP
Телеграм канал - Full Stack JavaScript Developer
