#tech #JavaScript #this
Стрелочные функции и this

💡 Стрелочные функции не имеют своего собственного this. Вместо этого они захватывают this из окружающего контекста в момент своего создания. Это поведение называется "лексическим this".

function Animal(name, sound) {
    this.name = name;
    this.sound = sound;
    this.makeSound = () => {
        console.log(`${this.name} says ${this.sound}`);
    };
}

const dog = new Animal('Dog', 'Woof');
dog.makeSound(); // 'Dog says Woof'

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

Пример использования в методе объекта:

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

const obj = {
    name: 'Dog',
    sound: 'Woof',
    makeSound: () => {
        console.log(`${this.name} says ${this.sound}`);
    }
};

obj.makeSound(); // undefined says undefined

✍️ В этом примере стрелочная функция makeSound определена в глобальном контексте (или контексте модуля в Node.js), где this будет undefined (в строгом режиме) или объектом глобального контекста (в нестрогом режиме), но не объектом obj.

Итог:
✔️ В конструкторе: Стрелочная функция захватывает this из контекста вызова конструктора, что позволяет правильно ссылаться на свойства экземпляра объекта.
✔️ В методе объекта: Стрелочная функция захватывает this из контекста своего определения, что часто приводит к undefined или некорректному значению this.

Автор: @reactify_IT

👍 Вступай в сообщество