Frontend | Вопросы собесов

Как поменять контекст функции ?

Спросят с вероятностью 10%



Контекст выполнения функции (значение this внутри функции) может быть изменён несколькими способами. Это позволяет более гибко управлять тем, как функции вызываются, особенно в объектно-ориентированном программировании. Вот основные способы изменения контекста функции:



1️⃣ call() и apply()



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



✅ call(thisArg, arg1, arg2, ...): Вызывает функцию с указанным контекстом thisArg и аргументами arg1, arg2, ...

✅ apply(thisArg, [argsArray]): Аналогичен call, но принимает аргументы в виде массива.

function greet() {

  console.log(Привет, ${this.name});

}



const person = { name: 'Алексей' };



greet.call(person);  // Привет, Алексей

greet.apply(person); // Привет, Алексей

2️⃣ bind()



(thisArg[, arg1[, arg2[, ...]]]) создаёт новую функцию с привязанным контекстом thisArg и начальными аргументами arg1, arg2, ... function greet() { console.log(Привет, ${this.name}); } const person = { name: 'Мария' }; const greetPerson = greet.bind(person); greetPerson(); // Привет, Мария 3️⃣ Стрелочные функции (() => {}) не имеют собственного контекста this. Вместо этого они заимствуют this из окружающего лексического контекста. Это значит, что this внутри стрелочной функции будет таким же, как и в её родительском контексте, что упрощает работу с контекстом, особенно в колбэках и обработчиках событий.

const person = {   name: 'Иван',   greet: function() {     // Стрелочная функция заимствует thisиз методаgreet     window.setTimeout(() => console.log(Привет, ${this.name}`), 1000);

  }

};



person.greet(); // Привет, Иван (после задержки в 1 секунду)

Использование контекста в классах



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



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



👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент.



🔐 База собесов | 🔐 База тестовых