JavaScript - Метод apply()

Здравствуйте, будущие маги JavaScript! Сегодня мы окунемся в один из самых мощных и гибких методов JavaScript: метод apply(). К концу этого учебника вы будете использовать apply() как профи! Давайте начнем это захватывающее путешествие вместе.

Что такое метод Function apply()?

Метод apply() — это встроенная функция JavaScript, которая позволяет нам вызывать функцию с заданным значением this и аргументами, предоставленными в виде массива (или массивоподобного объекта). Это как иметь魔法льную палочку, которая позволяет вам контролировать, как выполняется функция!

Почему важен метод apply()?

1. Он даёт нам гибкость в том, как мы вызываем функции.
2. Он позволяет нам заимствовать методы у других объектов.
3. Он super полезен при работе с переменным количеством аргументов.

Теперь давайте посмотрим на синтаксис, а затем перейдём к примерам!

Синтаксис метода apply()

Вот базовый синтаксис метода apply():

functionName.apply(thisArg, [argsArray])

Давайте разберём это:

• functionName: Функция, которую вы хотите вызвать.
• thisArg: Значение this, предоставляемое для вызова функции.
• argsArray: Массив или массивоподобный объект, указывающий аргументы, с которыми должна быть вызвана functionName.

Может показаться немного запутанным сейчас, но не волнуйтесь! Мы рассмотрим plenty примеров, чтобы сделать это crystal clear.

Примеры использования apply() в действии

Пример 1: Основное использование

Давайте начнём с простого примера:

function greet(name) {
console.log(`Hello, ${name}! My name is ${this.name}.`);
}

const person = { name: 'Alice' };

greet.apply(person, ['Bob']);

Вывод:

Hello, Bob! My name is Alice.

В этом примере:

1. Мы определяем функцию greet, которая использует this.name.
2. Мы создаем объект person с свойством name.
3. Мы используем apply() для вызова greet, устанавливая this в person и передавая 'Bob' в качестве аргумента.

Magия здесь в том, что apply() позволяет нам устанавливать, к чему относится this внутри функции. Круто, правда?

Пример 2: Использование apply() с Math.max()

Вот практический пример использования Math.max():

const numbers = [5, 6, 2, 3, 7];

const max = Math.max.apply(null, numbers);

console.log(max);

Вывод:

7

В этом случае:

1. У нас есть массив чисел.
2. Мы используем apply() для передачи этого массива напрямую в Math.max().
3. null используется в качестве первого аргумента, потому что Math.max() не использует this.

Это super полезно, когда у вас есть массив чисел и вы хотите найти максимальное значение!

Пример 3: Заимствование методов массива

Теперь давайте посмотрим, как мы можем использовать apply() для заимствования методов:

const arrayLike = { 0: 'a', 1: 'b', 2: 'c', length: 3 };

const actualArray = Array.prototype.slice.apply(arrayLike);

console.log(actualArray);

Вывод:

['a', 'b', 'c']

Что здесь происходит?

1. У нас есть объект, который resembles массив, но им не является.
2. Мы заимствуем метод slice() из Array.prototype.
3. apply() позволяет нам использовать slice() на нашем массивоподобном объекте, преобразуя его в реальный массив.

Это incredibly полезно при работе с DOM элементами или другими массивоподобными объектами!

Пример 4: Применение функций с несколькими аргументами

Давайте попробуем что-то немного более сложное:

function introduce(greeting, hobby) {
console.log(`${greeting}, I'm ${this.name}. I love ${hobby}!`);
}

const person1 = { name: 'Charlie' };
const person2 = { name: 'Diana' };

introduce.apply(person1, ['Hi there', 'coding']);
introduce.apply(person2, ['Hello', 'painting']);

Вывод:

Hi there, I'm Charlie. I love coding!
Hello, I'm Diana. I love painting!

В этом примере:

1. Мы определяем функцию introduce, которая принимает два аргумента.
2. Мы создаем два объекта person.
3. Мы используем apply() для вызова introduce для каждого человека, передавая разные аргументы.

Это демонстрирует, как apply() можно использовать с несколькими аргументами и разными значениями this.

Сравнение методов функций

Давайте сравним apply() с его братьями call() и bind():

Метод	Синтаксис	Описание
apply()	func.apply(thisArg, [argsArray])	Вызывает функцию с заданным this и аргументами как массив
call()	func.call(thisArg, arg1, arg2, ...)	Подобен apply(), но аргументы передаются по отдельности
bind()	func.bind(thisArg, arg1, arg2, ...)	Создаёт новую функцию с фиксированным this и начальными аргументами

Каждый из них имеет свои случаи использования, но apply() особенно хорош, когда у вас есть аргументы в массиве или нужно работать с массивоподобными объектами.

Заключение

Поздравления! Вы только что погрузились в мир apply(). От базового использования до заимствования методов и работы с несколькими аргументами, вы видели, насколько универсальным и мощным может быть этот метод.

помните, что apply() — это как швейцарский армейский нож в вашем наборе инструментов JavaScript. Может потребоваться немного практики, чтобы овладеть им, но как только вы это сделаете, вы будете использовать его в различных ситуациях.

Продолжайте экспериментировать с apply(), и не бойтесь быть креативными. Кто знает? Вы можете просто apply() себя к тому, чтобы стать мастером JavaScript! Счастливого кодирования, будущие разработчики!

Credits: Image by storyset