> Что происходит при вызове методов объекта, объявленных разными способами в JavaScript (JavaScript)
Уровень: senior · Роль: frontend · Категория: Технические вопросы
Компании: Точка, Soft_Media_Group
Стек: JavaScript
> Пример ответа
При вызове методов объекта в JavaScript ключевое различие определяется способом их объявления, так как это влияет на контекст this и возможность переопределения.
-
Метод, объявленный через функциональное выражение (function expression):
JAVASCRIPTconst obj = {method: function() { console.log(this); }};obj.method(); // this указывает на objПри вызове через точку
thisссылается на объект, которому принадлежит метод. Если передать метод как callback (например, в setTimeout), контекст теряется. -
Стрелочная функция (arrow function):
JAVASCRIPTconst obj = {method: () => { console.log(this); }};obj.method(); // this берется из внешнего лексического окружения (например, window или undefined в strict mode)Стрелочные функции не имеют собственного
this- он наследуется из области видимости, где объект был создан. Поэтому при вызове через точкуthisне указывает на объект. -
Сокращенная запись метода (method shorthand):
JAVASCRIPTconst obj = {method() { console.log(this); }};obj.method(); // this указывает на objЭто синтаксический сахар для функционального выражения, поведение
thisидентично первому случаю. -
Метод, добавленный через прототип (prototype):
JAVASCRIPTfunction MyClass() {}MyClass.prototype.method = function() { console.log(this); };const obj = new MyClass();obj.method(); // this указывает на экземпляр objПри вызове на экземпляре
thisссылается на этот экземпляр.
Ключевые отличия:
-
Контекст
this: стрелочные функции фиксируютthisпри объявлении, остальные - при вызове. -
Переопределение: методы, объявленные через
functionили shorthand, можно переопределить в подклассах; стрелочные функции - нет, так как они не привязаны к прототипу. -
Использование как конструктора: только функции, объявленные через
function, могут быть вызваны сnew; стрелочные и shorthand - нет.
На практике для методов объекта предпочтительна сокращенная запись, так как она интуитивно понятна и сохраняет правильный this. Стрелочные функции используют, когда нужно захватить внешний контекст (например, в обработчиках событий внутри класса).
> Похожие задачи по frontend
Какие методы для работы с массивами в JavaScript существуют и какие чаще используются
Как проверить наличие свойства в объекте в JavaScript
Как обрабатывать ошибки в промисах в JavaScript?
Как пройтись по всем элементам массива в JavaScript
> ГОТОВЫ К СЛЕДУЮЩЕМУ СОБЕСЕДОВАНИЮ?
Запустите тренировочную сессию с ИИ и получите детальную обратную связь, чтобы увереннее проходить реальные интервью