Как определить чем является this?

Определение значения this в JavaScript

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

Правила определения this (в порядке приоритета)

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

function Person(name) {
  this.name = name; // this указывает на новый объект
}

const john = new Person("John");
console.log(john.name); // "John"

2. Явное связывание (call, apply, bind) Методы call, apply и bind явно устанавливают значение this.

function greet(greeting) {
  console.log(greeting + ", " + this.name);
}

const user = { name: "Alice" };

greet.call(user, "Hello");     // "Hello, Alice"
greet.apply(user, ["Hi"]);     // "Hi, Alice"

const boundGreet = greet.bind(user);
boundGreet("Hey");             // "Hey, Alice"

3. Контекст объекта (method invocation) При вызове метода как свойства объекта, this указывает на объект слева от точки.

const obj = {
  name: "Bob",
  greet: function() {
    console.log("Hello, " + this.name);
  }
};

obj.greet(); // "Hello, Bob"

// Но если передать метод отдельно:
const greetFn = obj.greet;
greetFn();   // "Hello, undefined" (или глобальное значение)

4. Arrow функции (лексическое связывание) Стрелочные функции не создают собственный this, они используют this из охватывающей области.

const obj = {
  name: "Charlie",
  greet: function() {
    const arrow = () => {
      console.log(this.name); // this из obj.greet
    };
    arrow();
  }
};

obj.greet(); // "Charlie"

5. Глобальный контекст (по умолчанию) Если не применяются приведённые выше правила, this указывает на глобальный объект (window в браузере, global в Node.js). В строгом режиме это будет undefined.

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

simple();     // Window (или global в Node.js) / undefined в строгом режиме

"use strict";
function strict() {
  console.log(this); // undefined
}

strict();

Практический пример с всеми случаями

const app = {
  name: "MyApp",
  
  // 1. Method invocation - this = app
  start: function() {
    console.log("Starting " + this.name);
  },
  
  // 4. Arrow function - this из охватывающей области
  logAsync: function() {
    setTimeout(() => {
      console.log(this.name); // this = app
    }, 100);
  },
  
  // Проблема с обычной функцией
  logAsyncBad: function() {
    setTimeout(function() {
      console.log(this.name); // this = undefined
    }, 100);
  }
};

app.start();        // "Starting MyApp"
app.logAsync();     // "MyApp" (через 100ms)
app.logAsyncBad();  // undefined (через 100ms)

// 2. Явное связывание
const startBound = app.start.bind(app);
startBound();       // "MyApp"

// 3. new binding
function Task(title) {
  this.title = title;
}
const task = new Task("Important");
console.log(task.title); // "Important"

Как определить this в реальном коде

Мысленно задайте себе вопросы в этом порядке:

1. Вызывается ли функция с new? Если да -> this = новый объект
2. Используются ли call, apply или bind? Если да -> this = переданный аргумент
3. Вызывается ли функция как метод объекта (obj.method())? Если да -> this = obj
4. Это стрелочная функция? Если да -> this = контекст охватывающей области
5. Находитесь в строгом режиме? Если да -> this = undefined, иначе -> глобальный объект

Это поможет быстро определить значение this в любой ситуации.