Методы и this

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

Значением свойства может быть что угодно, в том числе функция. Тогда объект хранит не только данные, но и действие над ними:

const user = {
    name: "Ann",
    greet: function () {
        return `Hi, ${this.name}`;
    }
};

console.log(user.greet()); // Hi, Ann

Давайте разберём пример:

1. Свойство greet хранит функцию, записанную после двоеточия.
2. Внутри функции this.name читает имя из того объекта, у которого функцию вызвали.
3. Вызов user.greet() возвращает строку Hi, Ann, и console.log её печатает.

Метод и this

Свойство, в котором лежит функция, называют методом. Метод вызывают через точку: user.greet(). Скобки обязательны: user.greet без них — сама функция, и console.log(user.greet) печатает [Function: greet].

Так же устроены уже знакомые методы строк и массивов: "abc".toUpperCase() и nums.push(3) — функции, вызванные через точку.

Внутри метода слово this обозначает объект, стоящий перед точкой в вызове. При вызове user.greet() это user, поэтому this.name читает его свойство name.

Одна функция в двух объектах

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

function describe() {
    return `${this.name} is ${this.age}`;
}

const ann = { name: "Ann", age: 30, describe: describe };
const bob = { name: "Bob", age: 25, describe: describe };

console.log(ann.describe()); // Ann is 30
console.log(bob.describe()); // Bob is 25

Давайте посмотрим, что попадает в this в каждом вызове:

1. describe объявлена как обычная функция и записана в оба объекта под ключом describe.
2. При вызове ann.describe() перед точкой стоит ann, и функция возвращает Ann is 30.
3. При вызове bob.describe() перед точкой стоит bob, и та же функция возвращает Bob is 25.

Здесь аналогия с поручением перестаёт работать. Функция describe не принадлежит ни одной анкете: это одно поручение, подшитое сразу к двум. Какой объект окажется в this, решает не место, где функция записана, а вызов — объект перед точкой.

На собеседовании часто спрашивают, чему равен this. Для вызова через точку ответ один: объекту, который стоит перед точкой.

Метод меняет объект

Через this метод может не только читать свойства, но и менять их. Так устроен счётчик: он хранит число и умеет его увеличивать.

const counter = {
    count: 0,
    increment: function () {
        this.count++;
    }
};

counter.increment();
counter.increment();
console.log(counter.count); // 2

Разберём по шагам:

1. Объект counter хранит число в свойстве count и функцию в свойстве increment.
2. Каждый вызов counter.increment() кладёт в this объект counter, и this.count++ увеличивает его свойство на единицу.
3. После двух вызовов свойство равно 2, и программа печатает 2.

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

Частая ошибка

Внутри метода к свойству обратились без this:

const counter = {
    count: 0,
    increment: function () {
        count++; // ✗
    }
};

counter.increment();

ReferenceError: count is not defined

Свойство count — не переменная: внутри метода оно не видно по одному имени. JavaScript ищет переменную count, не находит её и останавливает программу.

Ошибка появляется только при вызове: пока increment не вызван, программа работает. Метод читает и меняет свойство своего объекта через this: this.count++.

Главное

• Метод — свойство, в котором лежит функция; его вызывают через точку со скобками: user.greet().
• В вызове через точку this — объект, который стоит перед точкой.
• Одна функция в двух объектах получает в this тот объект, у которого её вызвали.
• Свойство своего объекта метод читает и меняет через this, а не по одному имени.