Имеет ли объект свой This

Имеет ли объект свой This

Вопрос о this в JavaScript — это один из самых частых источников ошибок. Ответ на него: объект сам по себе не имеет собственного this. Значение this определяется в момент вызова функции, а не в момент создания объекта.

Основной принцип

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

const user = {
  name: "John",
  greet: function() {
    console.log(this.name); // "John" или undefined?
  }
};

user.greet(); // Выведет "John" — this = user

const greet = user.greet;
greet(); // Выведет undefined — this = window (или undefined в strict mode)

В первом случае this указывает на объект user, потому что мы вызываем функцию через точку. Во втором случае this теряется, потому что мы вызываем функцию без контекста.

Как определяется This

Есть четыре правила определения this:

1. Вызов через объект (Implicit Binding)

const obj = {
  value: 42,
  getValue: function() {
    return this.value;
  }
};

obj.getValue(); // 42 — this = obj

this указывает на объект слева от точки.

2. Явное связывание (Explicit Binding)

Мы можем явно указать this через методы call, apply или bind:

function greet() {
  console.log(this.name);
}

const person1 = { name: "Alice" };
const person2 = { name: "Bob" };

greet.call(person1);     // "Alice"
greet.apply(person2);    // "Bob"

const boundGreet = greet.bind(person1);
boundGreet();            // "Alice" — this навсегда привязан

3. Конструктор (New Binding)

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

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

const user1 = new User("John"); // this = { name: "John" }
const user2 = new User("Jane");  // this = { name: "Jane" }

4. Стрелочные функции (Lexical This)

Стрелочные функции не имеют собственного this. Они используют this из окружающего контекста:

const user = {
  name: "John",
  regularFunc: function() {
    console.log(this.name); // "John"
  },
  arrowFunc: () => {
    console.log(this.name); // undefined
  }
};

user.regularFunc();  // "John"
user.arrowFunc();    // undefined

Практические примеры

Проблема в классах:

class Button {
  constructor(name) {
    this.name = name;
  }
  
  click() {
    console.log(this.name);
  }
}

const btn = new Button("Submit");
const handler = btn.click;

document.addEventListener("click", handler);
// Ошибка! this = document, не btn

Решение 1: Стрелочная функция в поле класса

class Button {
  constructor(name) {
    this.name = name;
    this.click = () => {
      console.log(this.name);
    };
  }
}

Решение 2: Bind в конструкторе

class Button {
  constructor(name) {
    this.name = name;
    this.click = this.click.bind(this);
  }
  
  click() {
    console.log(this.name);
  }
}

В React

Это особенно важно при работе с обработчиками событий:

class MyComponent extends React.Component {
  handleClick() {
    console.log(this); // Может быть undefined
  }
  
  render() {
    // Неправильно — потеряется this
    return <button onClick={this.handleClick}>Click</button>;
    
    // Правильно — стрелочная функция сохраняет this
    return <button onClick={() => this.handleClick()}>Click</button>;
  }
}

Заключение

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