JavaScript - Метод Function call()

Привет, будущий супергерой кодирования! Сегодня мы погрузимся в один из полезных kleinen trick'ов JavaScript: метод call(). Не волнуйтесь, если вы новички в программировании; я буду вести вас через это путешествие шаг за шагом, как я делал это для countless студентов на протяжении многих лет моего преподавания. Так что возьмите кружку вашего любимого напитка и отправляйтесь в это захватывающее приключение!

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

Прежде чем мы перейдем к методу call(), давайте быстро освежим нашу память о функциях. Функции в JavaScript похожи на маленькие машины, выполняющие конкретные задачи. Они incredibly有用ны, и как только вы привыкните к ним, вы будете использовать их все время!

Теперь, метод call() - это особая superpower, которую имеют функции. Он позволяет нам вызывать (или инициировать) функцию и указывать, на что должна ссылаться keyword this внутри этой функции. Если это звучит немного запутанно, не волнуйтесь! Мы разберем это на примерах.

Синтаксис

Вот как выглядит метод call():

functionName.call(thisArg, arg1, arg2, ...)

• functionName - это функция, которую мы хотим вызвать.
• thisArg - это то, на что мы хотим, чтобы this ссылался внутри функции.
• arg1, arg2, ... - это аргументы, которые мы хотим передать функции.

Примеры метода Function call()

Давайте погрузимся в несколько примеров, чтобы увидеть, как call() работает в действии!

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

function greet() {
console.log(`Привет, мое имя ${this.name}!`);
}

const person = { name: 'Алиса' };

greet.call(person);

Если вы запустите этот код, вы увидите:

Привет, мое имя Алиса!

Что здесь происходит? Мы используем call() для вызова функции greet, но говорим ей использовать person как this. Так что когда функция пытается получить доступ к this.name, она на самом деле получает доступ к person.name.

Пример 2: Передача аргументов

function introduce(hobby, food) {
console.log(`Привет, я ${this.name}. Я люблю ${hobby} и моя любимая еда - ${food}.`);
}

const person1 = { name: 'Боб' };
const person2 = { name: 'Кэрол' };

introduce.call(person1, 'программирование', 'пицца');
introduce.call(person2, 'рисование', 'суши');

Это выведет:

Привет, я Боб. Я люблю программирование и моя любимая еда - пицца.
Привет, я Кэрол. Я люблю рисование и моя любимая еда - суши.

В этом примере мы не только указываем, на что должно ссылаться this, но и передаем аргументы функции. Метод call() позволяет нам делать и то, и другое!

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

Одна из coolest вещей в call() - это возможность "заимствовать" методы у других объектов. Давайте посмотрим, что я имею в виду:

const calculator = {
multiply: function(a, b) {
return a * b;
}
};

const scientific = {
square: function() {
return this.multiply(this.number, this.number);
},
number: 5
};

console.log(scientific.square.call(scientific));  // Это работает как预期
console.log(calculator.multiply.call(scientific, scientific.number, scientific.number));  // Это заимствует метод multiply

Вывод:

25
25

В этом примере мы заимствуем метод multiply из объекта calculator и используем его в контексте объекта scientific. Pretty cool, правда?

Пример 4: Использование call() с内置ными методами

Знаете ли вы, что мы можем даже использовать call() с内置ными методами JavaScript? Вот посмотрите:

const numbers = [1, 2, 3, 4, 5];
const max = Math.max.call(null, ...numbers);
console.log(max);  // Выводит: 5

Здесь мы используем call() с Math.max(). Аргумент null используется, потому что Math.max() не использует this, и мы расширяем массив numbers как индивидуальные аргументы.

Методы, связанные с call()

Чтобы дать вам полное представление, давайте посмотрим на некоторые методы, связанные с call():

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

Каждый из этих методов имеет свои случаи использования, но call() часто是最直接的, когда вы знаете точные аргументы, которые вы передаете.

Заключение

И вот мы рассмотрели метод call() от и до, мои дорогие студенты! Помните, что call() - это как магическая палочка, которая позволяет вам контролировать, что означает this внутри функции, и позволяет заимствовать методы у других объектов.

Как и во всем в программировании, практика makes perfect. Так что не бойтесь экспериментировать с call() в вашем собственном коде. Кто знает? Вы можете обнаружить, что используете call() чаще, чем вы думали!

Продолжайте программировать, продолжайте учиться и помните: в мире JavaScript вы всегда на один call()远离 открытия новых возможностей!

Credits: Image by storyset