this в JavaScript

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

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

1. Глобальный контекст

В глобальном контексте (вне функций) this ссылается на глобальный объект. В браузерах это window, а в Node.js — на global.

console.log(this); // В браузере это будет объект window

2. Внутри функции

Когда функция вызывается в глобальном контексте, this также указывает на глобальный объект.

function showThis() {
    console.log(this);
}

showThis(); // В браузере это будет объект window

3. В методах объекта

Когда функция вызывается как метод объекта, this ссылается на объект, к которому принадлежит метод.

const obj = {
    name: 'Lena',
    greet: function() {
        console.log(`Hello, ${this.name}`);
    }
};

obj.greet(); // Hello, Lena

const person1 = {
  name: "Vasya",
  age: 25,
};

const person2 = {
  name: "Petya",
  age: 14,
};

function sayName() {
  console.log(this);
}

// Привязываем метод к каждому объекту
person1.sayName = sayName;
person2.sayName = sayName;

sayName(); // window
person1.sayName(); // { "name": "Vasya", "age": 25 }
person2.sayName(); // { "name": "Petya", "age": 14 }

4. В конструкторах

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

function Person(name) {
    this.name = name;
}

const person1 = new Person('Ivan');
console.log(person1.name); // Ivan

5. Стрелочные функции

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

const obj = {
    name: 'Kolya',
    greet: function() {
        const inner = () => {
            console.log(`Hello, ${this.name}`);
        };
        inner();
    }
};

obj.greet(); // Hello, Kolya

6. Вызов функций с помощью call, apply, и bind

Методы call, apply и bind позволяют явно устанавливать значение this при вызове функции.

function greet() {
    console.log(`Hello, ${this.name}`);
}

const user = { name: 'Diana' };

greet.call(user); // Hello, Diana
greet.apply(user); // Hello, Diana

const greetUser = greet.bind(user);
greetUser(); // Hello, Diana

7. В обработчиках событий

В обработчиках событий значение this указывает на элемент, на который событие было вызвано.

const button = document.createElement('button');
button.innerText = 'Click me';
button.addEventListener('click', function() {
    console.log(this); // <button>Click me</button>
});
document.body.appendChild(button);

8. Проблемы с this

Одной из распространенных проблем является потеря контекста this, особенно при передаче методов как колбеков.

const obj = {
    name: 'Eva',
    greet: function() {
        console.log(`Hello, ${this.name}`);
    }
};

setTimeout(obj.greet, 1000); // Hello, undefined

В этом примере this будет указывать на глобальный объект (или undefined в строгом режиме), а не на obj. Чтобы исправить это, можно использовать стрелочную функцию:

setTimeout(() => obj.greet(), 1000); // Hello, Eva

Заключение

Ключевое слово this в JavaScript может быть источником путаницы, но понимание его работы в различных контекстах поможет избежать ошибок. Важно помнить о том, как вызывается функция, и использовать методы call, apply, и bind для явного задания контекста, когда это необходимо.

Видео