Методы объекта, «this»

Объекты обычно создаются, чтобы представлять сущности реального мира:

// Объект пользователя
let user = {
  name: 'Иван',
  age: 24,
};

Так же, как и в реальном мире пользователь может совершать действия: выбирать что-то из корзины покупок, авторизовываться, оплачивать и т.д.

Такие действия в JavaScript представлены свойствами-функциями объекта (методы).

Пример метода

Добавляем метод sayHi объекту user:

let user = {
  name: 'Иван',
  age: 24,
  sayHi() {
    console.log('Привет!');
  },
};

Ключевое слово «this» в методах

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

Например, коду внутри user.sayHi() может понадобится имя пользователя, которое хранится в объекте user.

Для доступа к информации внутри объекта метод может использовать ключевое слово this.

Значение this — это объект «перед точкой», который использовался для вызова метода.

Например:

let user = {
  name: 'Иван',
  age: 24,
  sayHi() {
    // this — это «текущий объект»
    console.log(this.name);
  },
};

user.sayHi(); // -> Иван

Здесь во время выполнения кода user.sayHi() значением this будет являться user (ссылка на объект user).

Можно получить доступ к объекту и без ключевого слова this, ссылаясь на него через внешнюю переменную user (в которой хранится объект).

Но такой код не будет надежным. Если мы скопируем ссылку на объект user в другую переменную, например, admin = user, а затем перезапишем переменную user чем-то другим, тогда будет осуществлен доступ к неправильному объекту при вызове метода из admin.

Это показано ниже:

let user = {
  name: 'Иван',
  age: 24,
  sayHi() {
    console.log(user.name); // приведет к ошибке
  },
};

let admin = user;
user = null; // обнулим перменную, теперь она не хранит ссылку на объект
admin.sayHi(); // -> Ошибка!
// Внутри sayHi() используется переменная user, которая больше не ссылается на объект

«this» не является фиксированным

В JavaScript ключевое слово «this» может использоваться в любой функции.

Значение this вычисляется во время выполнения кода и зависит от контекста.

Например, здесь одна и та же функция назначена двум разным объектам и имеет различное значение this при вызовах:

let user = {name: "Джо"};
let admin = {name: "Админ"};

function sayHi() {
  console.log(this.name)
}

// используем одну и ту же функцию в двух объектах
user.f = sayHi;
admin.f = sayHi;

// «this» внутри функции является ссылкой на объект, который указан «перед точкой»
user.f(); // -> Джо (this == user)
admin.f(); // -> Админ (this == admin)

При вызове obj.f() значение this внутри f равно obj.

У стрелочных функций нет «this»

У стрелочных функций нет своего собственного this. Если мы используем this внутри стрелочных функций, то его значение берется из внешней «нормальной функции».

Например, здесь arrow() использует значение this из внешнего метода user.sayHi():

let user = {
  name: 'Иван',
  sayHi() {
    let arrow = () => console.log(this.name);
    arrow();
  },
};

user.sayHi(); // -> Илья

Эта особенность стрелочных функций полезна, когда мы намерено хотим брать значение this из внешнего контекста.

Итого

• Функции, которые находятся в объекте в качестве его свойств, называются «методами».
• Методы позволяют объектам выполнять действия: obj.doSomething().
• Методы могут ссылаться на объект через this. Значение this вычисляется во время исполнения кода.
• При объявлении функции, в ней можно использовать this, но этот this не имеет значения, до тех пор, пока функция не будет вызвана.
• Когда функция вызывается синтаксисом «метода», значением this во время вызова будет объект перед точкой.
• У стрелочных функций нет собственного this. Когда внутри стрелочной функции обращаются к this, то его значение берется снаружи.

Конспект статьи из учебника по JavaScript — Методы объекта, "this"