Что такое call в JavaScript

Вопрос

Что такое call в JavaScript

Профессия

Frontend Developer

Что хочет услышать интервьюер

Интервьюер хочет убедиться, что кандидат понимает, как работает метод call, знает его синтаксис и может объяснить его применение на примере. Важно показать, что кандидат понимает, как изменяется контекст выполнения функции.

Ключевые тезисы

• Метод call позволяет вызвать функцию с указанным контекстом (this) и аргументами.
• Он используется для передачи конкретного объекта в качестве контекста выполнения функции.
• Первым аргументом call всегда является объект, который будет использоваться как this внутри функции.
• Остальные аргументы передаются как параметры функции.
• Пример: function.greet.call({name: 'John'}, 'Hello') — в этом случае this внутри функции greet будет ссылаться на объект {name: 'John'}.

Подробный ответ

Метод call в JavaScript — это встроенный метод функций, который позволяет вызвать функцию с указанным контекстом (this) и аргументами. Основная цель call — изменить контекст выполнения функции, чтобы this внутри функции ссылался на переданный объект. Первый аргумент call всегда определяет контекст (this), а последующие аргументы передаются как параметры функции. Если первый аргумент null или undefined, в нестрогом режиме this будет ссылаться на глобальный объект (например, window в браузере), а в строгом режиме ('use strict') останется null или undefined.

call особенно полезен в ситуациях, когда нужно заимствовать методы у других объектов или когда контекст выполнения функции должен быть явно задан. Например, при работе с методами объектов, которые должны выполняться в контексте другого объекта. Также call используется в функциональном наследовании и для вызова функций с динамическим контекстом.

Важно отметить, что call не работает со стрелочными функциями, так как они не имеют своего собственного this и всегда используют контекст окружающей лексической области видимости. Попытка изменить this стрелочной функции через call не даст эффекта.

В реальных проектах call может применяться для вызова методов API с определенным контекстом, для реализации паттернов типа 'заимствования методов' (например, использование методов массива для массивоподобных объектов) или для обеспечения полиморфизма в коде.

Практические примеры

Пример 1

Пример 1: Заимствование метода массива для массивоподобного объекта

const arrayLike = { 0: 'a', 1: 'b', length: 2 };
Array.prototype.push.call(arrayLike, 'c');
console.log(arrayLike); // { 0: 'a', 1: 'b', 2: 'c', length: 3 }

Пример 2

Пример 2: Вызов функции с определенным контекстом

function greet() {
  console.log(`Hello, ${this.name}!`);
}
const person = { name: 'Alice' };
greet.call(person); // Hello, Alice!

Пример 3

Пример 3: Использование call для передачи аргументов

function introduce(greeting, punctuation) {
  console.log(`${greeting}, my name is ${this.name}${punctuation}`);
}
const user = { name: 'Bob' };
introduce.call(user, 'Hi', '!'); // Hi, my name is Bob!

Частые ошибки

• Попытка использовать call для стрелочных функций, что не работает, так как стрелочные функции не имеют своего this.
• Передача null или undefined в качестве контекста без учета режима ('use strict'), что может привести к неожиданному поведению (например, this будет ссылаться на глобальный объект).
• Путаница между call и apply: call принимает аргументы списком, а apply — массивом.

Связанные темы

• Метод apply — аналогичен call, но принимает аргументы в виде массива.
• Метод bind — создает новую функцию с привязанным контекстом и аргументами.
• Стрелочные функции и их особенности (лексический this).
• Понятие контекста (this) в JavaScript.

Follow-up вопросы

Чем отличается call от apply?

Уровень: basic

Метод call принимает аргументы для функции через запятую, а apply — в виде массива. В остальном их функциональность идентична: оба метода позволяют задать контекст (this) для вызова функции.

Можно ли использовать call для стрелочных функций?

Уровень: intermediate

Нет, стрелочные функции не имеют собственного this, поэтому call (и apply) не могут изменить их контекст выполнения. this в стрелочной функции всегда будет указывать на контекст, в котором она была создана.

Как call работает с методами объекта? Приведите пример.

Уровень: intermediate

call позволяет вызвать метод одного объекта в контексте другого. Например: obj1.method.call(obj2, arg1) — метод method из obj1 будет выполнен с this, указывающим на obj2, и аргументом arg1.

Какие практические применения call в реальных проектах?

Уровень: advanced

call часто используют для заимствования методов (например, методов массива для массивоподобных объектов), вызова функций с динамическим контекстом (например, в обработчиках событий) или для реализации наследования и миксинов.

Что произойдет, если передать null или undefined в качестве первого аргумента call?

Уровень: advanced

В нестрогом режиме this будет заменен на глобальный объект (window в браузере). В строгом режиме (use strict) this останется null или undefined.