Раз і назавжди про `this` в JS людською мовою

💡 Усі статті, обговорення, новини про Front-end — в одному місці. Приєднуйтесь до Front-end спільноти!

Питання про this — одне з улюблених питань багатьох інтерв’юверів.

Причому люблять його не лише токсичні скуфи хто глядять слабкі місця. Але й емпатичні зумери.

Скуфи люблять це питання, бо багато людей замість запам’ятати суть зубрять задачки і зазубрють неправильно, або й взагалі забивають і потім путаються. Це одне з питань яке «бий, не промахнешся».

А я люблю це питання, бо воно не про синтаксис і не про зубріння задачок, але про розуміння принципу. Особливо класно питати про this у зв’язці із замиканнями (наприклад приклад 4.3 в кінці). Це забирає мало часу, один простий приклад, але хід думок людини зразу ж показує чи вона просто «відчуває», чи розуміє механізм.

І власне я Андрій (linkedin), і сьогодні коротенько, але людською мовою розкажу не лише про як поводиться this, але й чому він так робить і звідки береться. Поясню сам механізм і поділюсь простою схемою як розв’язати будь-яку задачу на this.

Спершу коротко

Якщо коротко, то this — це неявний параметр функції. Впринципі все :)

Якщо ж ні, то почнемо трошечки здалеку:

Що таке функція в javascript?

Я вже писав про це в попередній статті, там ця думка розкрита детальніше, але ці теми тісно пов’язані і тому мушу хоча б частково повторитись і тут:

Функція в js — це об’єкт. Не простий об’єкт, а callable (викликабельний, викликовуваний, такий, що може бути викликаним), і тим не менш — об’єкт.

Функція в js сама по собі нічого не робить.

Функція в js просто береже набір інструкцій, свій тип і інші дані.

Фактично коли ми пишемо function logSomething(smth) {console.log(smth)}, рушій розуміє це як «створи в пам’яті об’єкт з назвою logSomething і збережи в ньому наступні значення:»

{
  "[[ECMAScriptCode]]": "console.log(smth)", // сам код, який треба виконати
  "[[FormalParameters]]": ["smth"], // список параметрів, які треба очікувати зовні
  "[[Strict]]": false, // в якому режимі запускати код функції? true якщо в строгому
  "[[FunctionKind]]": "normal", // якби ми оголосили її як стрілкову функцію, то було б "arrow",
  "[[Envrionment]]": // сюди зберігається посилання на лексичне середовище місця, де функцію було оголошено. Від цього дуже залежить як працюватиме замикання і про це є детально розібрано в попередній статті.
  // ... деякі інші значення, які сьогодні розглядати не будемо
}

А потім, коли ми пишемо в іншому місці logSomething(67), рушій розуміє це так: Запусти код, який записаний в logSomething.[[ECMAScriptCode]] і коли той код буде питати яке значення параметра з назвою smth — треба надати йому 67)«.

this — це теж параметр, просто implicit

В прикладі вище ми маємо explicit (явний, явно визначений) параметр smth. Явно визначений, бо ми самі явно визначили, ми самі явно його прописали. Якби ми його явно не прописали, то його б не існувало.

this — це теж параметр. Це не просто ключове слово яким заборонено називати змінні. this — це параметр. Просто неявний. Ми не мусимо і не можемо його оголосити коли створюємо функцію (ми не можемо написати function doSmth(this) {}), але навіть без нашого явного оголошення рушій js створює той параметр сам.

Коли ми пишемо logSomething(34) — ми явно вказуємо рушію що використати як значення smth під час виконання коду, який збережений в logSomething.

А значення неявного параметра this рушій визначає сам відповідно до своїх правил.

За якими правилами рушій js визначає що використати в якості значення this?

Рушій js вирішує що покласти в this ПО ЧЕРЗІ згідно 4 критеріїв:

Який тип функції? Вона стрілкова чи нормальна? (яке значення [[FunctionKind]]?)

Чи є «пришите» значення this з допомогою .bind()/.call()/.apply()?

Де саме було викликано? Функцію було викликано як метод об’єкта чи як конструктор чи як самостійну змінну?

Код функції має бути запущений в строгому режимі чи ні? (яке значення [[Strict]]?)

Власне ці 4 кроки, ці 4 критерії — це все, що треба запам’ятати. Все інше виводиться з них як похідне.

Тип функції

Якщо функція стрілкова, то для неї рушій взагалі не створює this.

Для стрілкової функції рушій глядить значення this так само, як і глядить значення звичайної змінної в звичайній ситуації.

Приклад:

const variableOutsideArrowFunction = 34;

console.log(variableOutsideArrowFunction);
console.log(this);

const arrowFunction = () => {
  console.log(variableOutsideArrowFunction); // те ж саме, що на рядку 3
  console.log(this); // те ж саме, що на рядку 4
};
arrowFunction();

Функція arrowFunction не має параметра з назвою variableOutsideArrowFunction. Тому коли рушій запускає код функції arrowFunction і доходить до місця, де треба використати значення variableOutsideArrowFunction, рушій глядить значення variableOutsideArrowFunction за межами arrowFunction. Аналогічно він робить і з this.

Якщо функція стрілкова, то рушій не буде дивитись на інші критерії. Якщо функція стрілкова, то рушій не буде для неї створювати this впринципі. Рушій просто буде глядіти this за межами стрілкової функції за тим же принципом, як він глядить звичайні змінні.

Але якщо функція не стрілкова, то рушій зверне увагу на наступний критерій:

Чи є пришите значення з допомогою .bind()?

Вище я казав, що ми не можемо явно вказати рушію що саме використовувати в функції в якості this. І це справді так, під час оголошення функції не можемо.

Але уже після того як ми оголосили функцію, після того ми можемо викликати її з допомогою .call() або .apply() і тоді вказати рушію що використовувати в якості this явно.

Також ми можемо взяти нашу уже оголошену функцію і з допомогою .bind() створити її «генно-модифіковану» версію в яку явно вписати рушію що саме використовувати в якості this.

Тому якщо це не стрілкова функція, а звичайна, і ми явно вказали рушію що використати в якості this, то саме то рушій і використає в якості this.

Якщо ж ми явно не вказали, то рушій дивиться на наступний критерій:

Як було викликано

Якщо функція не стрілкова і ми не «пришили» їй this явно, то:

Якщо функція була викликана як конструктор (після слова new), то значенням this рушій передасть той об’єкт, який функція «конструюює».

Якщо функція була викликана як метод об’єкта, то значенням this рушій передасть той об’єкт, в якості метода якого функцію було викликано.

Якщо ж функція була викликана як звичайна функція, то рушій зверне увагу на останній критерій:

Строгий чи звичайний режим

Якщо функція не стрілкова. І функція була викликана не як метод об’єкта і не як конструктор, а як звичайна функція. То

Якщо код функції має виконуватись в строгому режимі, то значенням явного параметра this рушій призначить undefined.

Якщо код функції має виконуватись в не строгому режимі, то в якості this рушій призначить глобальний об’єкт (window в браузері, global в node.js).

Все

Далі я розберу багато прикладів для закріплення. Але нового нічого не розкажу.

Сама суть уже описана вище. Все.

Приклади

Окрема функція в строгому і не строгому режимах

Приклад 1.1.

const func1 = function () {
  console.log(this);
};

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

func1();
func2();

Приклад 1.2.

function wrapper() {
  function func() {
    console.log(this);
  }

  func();
}

wrapper();

Приклад 1.3.

"use strict";

const func1 = function () {
  console.log(this);
};

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

func1();
func2();

Приклад 1.4.

const sloppyFunction = function () {
  console.log(this);
};

const strictFunction = function () {
  "use strict";

  sloppyFunction();
  console.log(this);
};

strictFunction();

Пояснення прикладу 1.1. В обох випадках ми маємо звичайну, а не стрілкову функцію. В обох випадках вони не мають «пришитого» значення this. В обох випадках ті функції викликані як звичайні функції, а не як конструктори чи методи об’єкта. І в обох випадках функції створились в sloppy mode. Тому в обох випадках в консолі буде window.

Пояснення прикладу 1.2. Ми маємо звичайну функцію func, не стрілкову. Ані bind, ані call/apply використано не було. Вона викликана як звичайна функція, не як метод чи конструктор. І в нестрогому режимі. Тому в консолі буде window.

Пояснення прикладу 1.3. В обох випадках ми маємо звичайну, а не стрілкову функцію. В обох випадках значення this явним способом не прив’язане. В обох випадках ті функції викликані як звичайні функції, а не як конструктори чи методи об’єкта. Але на відміну від попередніх прикладів в обох випадках функції створились в strict mode. Тому в обох випадках в консолі буде undefined.

Пояснення прикладу 1.4. В обох випадках ми маємо звичайну, а не стрілкову функцію. В обох випадках обійшлось без bind/call/apply. В обох випадках ті функції викликані як звичайні функції, а не як конструктори чи методи об’єкта. Але перша функція має позначку [[Strict]]: false, а друга функція має позначку [[Strict]]: true. Тому для першої функції рушій значенням this передасть window, а для другої функції значенням this рушій передасть undefined. Я спеціально додав цей приклад щоб акцентувати увагу: буде код запускатись в строгому чи в sloppy режимі визначається на етапі оголошення функції, а не виклику.

Конструктор vs Метод об’єкта vs Окрема функція

Приклад 2.1.

const object = {
  logThis: function () {
    console.log(this);
    console.log(this === object);
  },
};
object.logThis();

const object = {
  logThis() {
    console.log(this);
    console.log(this === object);
  },
};
object.logThis();

const object = {};
const logger = function () {
  console.log(this);
  console.log(this === object);
};
object.logThis = logger;
object.logThis();

const object = {};
object.logThis = function () {
  console.log(this);
  console.log(this === object);
};
object.logThis();

Приклад 2.2.

const Constructor = function () {
  this.a = "a";
  this.b = "b";
  console.log(this);
};

const instance = new Constructor();

class SomeClass {
  constructor() {
    this.a = "a";
    this.b = "b";
    console.log(this);
  }
}

const instance = new SomeClass();

Приклад 2.3.

const Constructor = function () {
  this.modifyAndLogThis = 67;
  console.log(this);
};

const object = {
  modifyAndLogThis: Constructor,
};

object.modifyAndLogThis();
object.modifyAndLogThis();

Приклад 2.4.

const SloppyConstructor = function () {
  this.randomVal = Math.random();
  console.log(this);
};

const StrictConstructor = function () {
  "use strict";
  this.randomVal = Math.random();
  console.log(this);
};

const sloppyFuncAsVariable = SloppyConstructor;
const strictFuncAsVariable = StrictConstructor;

SloppyConstructor();
console.log(window.randomVal);
sloppyFuncAsVariable();
console.log(window.randomVal);
strictFuncAsVariable();
StrictConstructor();

Пояснення прикладу 2.1. Функція не є стрілковою. bind/apply/call використані не були. Отже т.к. функція викликана як метод об’єкта, то в значення this рушій засуне сам той об’єкт. І відповідно console.log(this) виведе сам той об’єкт. А console.log(this === object) виведе true.

Пояснення прикладу 2.2. Функції не є стрілковими. Обійшлось без bind/apply/call. Оскільки функції викликані після слова new, то в значення this рушій засуне той об’єкт, який вони конструюють.

Пояснення прикладу 2.3. Функція не є стрілковою. І нема ані bind, ані call/apply, але от далі цікаво. Хоч з самого початку ми створили функцію як конструктор, але потім ми її засунули як метод об’єкта. І викликали як метод об’єкта. Відповідно при запуску цієї функції як метода об’єкта рушій значенням this передає сам той об’єкт. Тому ця функція спершу модифікує той свій об’єкт, міняє в ньому .modifyAndLogThis на число 67 і виводить його уже з {modifyAndLogThis: 67}. А тоді при наступному запуску object.modifyAndLogThis буде помилка, бо число не можна викликати.

Пояснення прикладу 2.4. Обидві функції не є стрілковими. Обидві функції не мають пришитого значення this. І обидві функції спершу були оголошені як конструктори. Але потім ми їх запустили як звичайні змінні. Тому для sloppyFuncAsVariable рушій значенням this засуне window (бо sloppy mode), а для strictFuncAsVariable рушій засуне undefined (бо strict mode).

.bind, .call, .apply

Приклад 3.1.

const sloppyFunc = function () {
  console.log(this);
};

const strictFunc = function () {
  "use strict";
  console.log(this);
};

const Constructor = function () {
  this.a = "a";
  console.log(this);
};

const object = {
  logThis() {
    console.log(this);
  },
};

// нормальні виклики

sloppyFunc();
strictFunc();
Constructor();
new Constructor();
object.logThis();

// явно вказані значення

sloppyFunc.apply({ bim: "bam" });
strictFunc.apply({ bim: "bam" });
Constructor.apply({ bim: "bam" });
// new Constructor.apply({bim: "bam"}); // помилка
object.logThis.apply({ bim: "bam" });

sloppyFunc.bind({ bom: "bem" })();
strictFunc.bind({ bom: "bem" })();
Constructor.bind({ bom: "bem" })();
// new Constructor.bind({bom: "bem"})(); // помилка
object.logThis.bind({ bom: "bem" })();

Помилки в двох місцях де я закоментував будуть тому, що конструктор не можна використовувати таким способом.

А результат і причини всіх інших місць коду думаю очевидні.

Стрілкові функції

Приклад 4.1.

console.log(this);

const sloppyArrowFunc = () => {
  console.log(this);
};

sloppyArrowFunc();

const strictArrowFunc = () => {
  "use strict";
  console.log(this);
};

strictArrowFunc();

const object1 = {
  sloppyLogThis: sloppyArrowFunc,
  strictLogThis: strictArrowFunc,
};

object1.sloppyLogThis();
object1.strictLogThis();

const object2 = {
  sloppyLogThis: () => {
    console.log(this);
  },
  strictLogThis: () => {
    console.log(this);
  },
};

object2.sloppyLogThis();
object2.strictLogThis();

const basicArrowFunc = () => console.log(this);
basicArrowFunc.apply({});
const arrowFuncWithBindedThis = basicArrowFunc.bind({});
arrowFuncWithBindedThis();

const wrapper = {
  hello: "world",
  executeExperiment: function () {
    console.log(this, wrapper === this);

    const sloppyArrowFunc = () => {
      console.log(this, wrapper === this);
    };

    sloppyArrowFunc();

    const strictArrowFunc = () => {
      "use strict";
      console.log(this, wrapper === this);
    };

    strictArrowFunc();

    const object1 = {
      sloppyLogThis: sloppyArrowFunc,
      strictLogThis: strictArrowFunc,
    };

    object1.sloppyLogThis();
    object1.strictLogThis();

    const object2 = {
      sloppyLogThis: () => {
        console.log(this, wrapper === this);
      },
      strictLogThis: () => {
        console.log(this, wrapper === this);
      },
    };

    object2.sloppyLogThis();
    object2.strictLogThis();

    const basicArrowFunc = () => console.log(this, wrapper === this);
    basicArrowFunc.apply({});
    const arrowFuncWithBindedThis = basicArrowFunc.bind({});
    arrowFuncWithBindedThis();
  },
};

wrapper.executeExperiment();

Приклад 4.2.

const ArrowConstructor = () => {
  this.a = "a";
};

const instance = new ArrowConstructor();

class SomeClass {
  constructor: () => {
    this.a = "a";
  }
}

const instance = new SomeClass();

Приклад 4.3.

function buildArrowFunc() {
  const randomNumber = Math.random();
  return () => console.log(this, randomNumber);
}

const object = {
  buildArrowFunc, // те ж саме, що й buildArrowFunc: buildArrowFunc,
};

const arrowFunction1 = buildArrowFunc();
const arrowFunction2 = object.buildArrowFunc();

console.log(buildArrowFunc === object.buildArrowFunc);

arrowFunction1();
arrowFunction2();

Пояснення прикладу 4.1. В усіх випадках ми маємо справу з стрілковими функціями. Тому інші критерії не важливі. Якщо функція стрілкова, то ніякий call/apply/bind не допоможе. І не важливо чи викликана вона як метод, чи як окрема. І не важливо чи викликана вона в строгому чи звичайному режимі. В усіх випадках якщо функція стрілкова, то рушій буде глядіти this як звичайну змінну за межами тієї функції в межах її замикання. І тому console.log(this) за межами тих функцій і в їх межах завжди один і той самий.

Пояснення прикладу 4.2. Рушій видасть помилку в обох випадках. В першому тому, що стрілкова функція просто не може використовуватись як конструктор. А в другому взагалі помилка синтаксису.

Пояснення прикладу 4.3. Тут дуже уважно! І arrowFunction1 стрілкова, і arrowFunction2 стрілкова. І тому в обох випадках значення this глядиться як значення звичайної змінної (за замиканням). Але якраз замикання в цих функцій різні. Тому і значення this та randomNumber різні. Але т.к. замикання — це окрема тема (про яку я детально написав в попередній статті), то зараз на цьому спинятись не буду.

Підсумуємо

Для визначення this важливо пам’ятати 4 ключових критерії, 4 ключових кроки:

• Чи є функція стрілковою?
  • Якщо стрілкова, то функція не може мати this , тобто this буде глядітись як звичайна змінна.
  • Якщо нормальна, то чи має функція явно «пришите» значення this з допомогою call/apply/bind?
    • Якщо має явно пришите, то воно і буде this.
    • Якщо не має явно пришитого, то як саме функція запущена?
      • якщо запущена як конструктор, то this буде об’єкт, який конструюють
      • якщо запущена після крапочки як метод об’єкта, то this буде об’єкт перед крапочкою
      • якщо запущена як окрема функція, то який режим в цій конкретній функції?
        • якщо sloppy mode, то this буде window
        • якщо strict mode, то this буде undefined

Прощаємось

Це був я.

Якщо залишились питання — залишай коментар.

Якщо не було корисно — залишай коментар.

Якщо було корисно — залишай коментар + обов’язково став лайк.

Якщо знаєш якийсь класний інструмент який швидко і красиво намалює схему, то напиши будь ласка дооновлю статтю.

Ну а в мене на сьогодні все. Допобачення :)