В JavaScript «this» — это специальное ключевое слово, которое ссылается на объект, в котором выполняется текущий код. Это может сбить с толку новичков, но важно понимать, как это работает, чтобы писать эффективный код.

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

Пример из жизни: Представьте, что вы находитесь в группе людей и что-то обсуждаете. Слово «this» может быть использовано для обозначения текущей обсуждаемой темы или объекта, упоминаемого в этом обсуждении.

Аналогично, в JavaScript «this» относится к текущему объекту, на который ссылаются или который используется в функции или методе. Он может изменяться в зависимости от контекста вызова функции, точно так же, как в групповом обсуждении объект, на который ссылаются, может изменяться в зависимости от контекста беседы.

Навигация по статье

This в глобальной области

В глобальной области видимости this относится к глобальному объекту. В веб-браузере глобальным объектом обычно является объект window. Вот пример:

console.log(this); // Output: Window

В глобальной области значение this зависит от среды, в которой выполняется код JavaScript. В веб-браузере глобальным объектом обычно является объект window, который представляет окно браузера. Таким образом в этом примере this относится к глобальному объекту window.

This в объектах

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

const person = {
  name: "John",
  age: 30,
  sayHello() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
};

person.sayHello(); // Output: Hello, my name is John and I am 30 years old.

В этом примере this относится к объекту person, поскольку для него был вызван метод sayHello.

This в функциях конструктора

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

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

const john = new Person("John", 30);
console.log(john); // Output: Person { name: "John", age: 30 }

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

Потеря контекста this

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

Рассмотрим следующий код:

const person = {
  name: 'John',
  age: 30,
  greet: function() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
};

const greetPerson = person.greet;
greetPerson(); // undefined

В этом коде функция greetPerson() вызывается без какого-либо контекста или объекта, поэтому эта внутренняя функция greet() будет неопределенной. В результате возникнет следующая ошибка: TypeError: Не удается прочитать свойство ‘name’ из undefined.

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

Вот как мы можем использовать bind() для исправления приведенного выше кода:

const person = {
  name: 'John',
  age: 30,
  greet: function() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
};

const greetPerson = person.greet.bind(person);
greetPerson();

В этом коде функция bind() используется для создания новой функции greetPerson, которая привязана к объекту person. Когда вызывается функция greetPerson(), эта внутренняя функция greet() будет ссылаться на объект person, и вывод будет таким: «Hello, my name is John and I am 30 years old».