Как разобраться с this в javascript окончательно?

Question

[LitvintsevIgor]

Привет, можете пожалуйста объяснить, почему в моем случае в 92 строке this ссылается на window?



На сколько я понимаю, в случае с FD у нас this будет браться из того места, в котором функция была вызвана. Для наглядности я вывел this в 94 строке (то есть именно в том месте, где функция "say" и была вызвана). И в случае с 94 строкой все понятно, в этом месте this ссылается на объект "cat", ну так мы здесь же и вызвали функцию "say" и я никак не могу найти объяснение, почему в 92 строке this ссылается на window, а не на "cat"?

И вообще, вдруг кто может посоветовать какой-нибудь источник, статью, главу в какой-нибудь книге, я не знаю, где очень подробно и хорошо для чайников расписано про this c множеством примеров. Потому что в mdn, learnjavascript, роликах на ютубе (и на русском и на английском) везде рассмотрены относительно простенькие примеры, которые легко логично объясняются. Но стоит попасть на собес, так интервьюер с этим this такое заворачивает, что "не в сказке сказать ...". Поэтому хочу хорошо подготовиться и разобраться уже вообще со всевозможными кейсами, сижу сам себе их придумываю сейчас.

const cat = {
   nickname: "Barsik",
   f() {
     function say() {
       console.log(this); // window WHY?
     }
     console.log(this); // cat OK
     say();
   },
 };

 cat.f();

Comments

[WbICHA]

Так, думаю, будет понятнее:

const f = cat.f
f()

[LitvintsevIgor]

WbICHA, так суть меняется, и результат тоже меняется, при таком раскладе все логично и понятно. Мы грубо говоря скопировали тело функции cat.f и положили в переменную. После чего вызвали ее в глобальной области видимости, соответственно в this у нас в обоих случаях будет лежать ссылка на window. Тут все понятно. Непонятно почему именно так отрабатывает this при моем вызове.

[от это да]

у меня другой результат: объект cat и undefined

[Сергей Соколов]

здрасте, потому что "use strict";

[от это да]

Сергей Соколов, ничосе!
неужели так работают?

[Сергей Соколов]

здрасте, сам фшоке

Answer 1

[Alexandroppolus]

say();

вот здесь ты просто вызвал функцию (не стрелочную), и не передал this

надо так
say.call(this);

Comments

[LitvintsevIgor]

Спасибо.
Данный момент я понимаю, и делал так, да, привязываем контекст и все отрабатывает ожидаемо.
Я скорее хочу разобраться и услышать объяснение, "почему мой вариант не работает и как вообще тогда устроен этот this, если как я много где слышал, что обычные функции (не стрелочные) берут this из того места, где были вызваны, так вот в месте, где моя функция say была вызвана, this ссылается на объект "cat", так почему тогда такое поведение?"

[Alexandroppolus]

LitvintsevIgor, есть два вида функций - стрелочные и обычные.

В обычных, this - это параметр, который задается при вызове. Условно говоря, "минус первый по счету параметр". Чтобы его задать, функцию надо либо вызвать через точку с объекта, либо через call/apply. Ещё можно для функции сделать bind, он вернет новую функцию, которая вызывает твою функцию с заданным this.
Если ты вызываешь обычную функцию без всего этого, то в строгом режиме значение this будет undefined (как и для любого параметра, который не был задан), а в нестрогом - window

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

[LitvintsevIgor]

Alexandroppolus, спасибо большущее пребольшущее))

Answer 2

[orzu007]

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

Comments

[LitvintsevIgor]

Не совсем понимаю, почему у моей функции "say" родитель window(если бы было так, я бы все понял)? Функция "say" лежит в методе "f", метод "f" принадлежит объекту "cat".
Вот я засунул еще глубже свою функцию "say", f результат такой же. То есть теперь точно родитель не window.

const animal = {
  someProperty: "test",
  cat: {
    nickname: "Barsik",
    f() {
      function say() {
        console.log(this); // window WHY?
      }
      console.log(this); // cat OK
      say();
    },
  },
};

animal.cat.f();

[orzu007]

LitvintsevIgor, В зависимости от способа вызова функции будет зависеть значение this, если ты используешь способ вызова метод ( т.е как метод объекта ) this будет указывать на объект в котором этот метод. С обычным вызовом функции в твоём случае внутри метода объекта, родителем будет window, потому что функция не хранится как метод в объекте созданном тобой. То есть вызывая обычную функцию внутри метода это то же самое что писать эту функцию снаружи.

[LitvintsevIgor]

orzu007, во, класс, спасибо)

[Yagher]

С обычным вызовом функции в твоём случае внутри метода объекта, родителем будет window, потому что функция не хранится как метод в объекте созданном тобой. То есть вызывая обычную функцию внутри метода это то же самое что писать эту функцию снаружи.

Думаю, что это лучшее объяснение.

Answer 3

[Владимир]

Все очень просто.
say это простая функция, у нее глобальный контекст в зависимости от strict mode это undefined или window
Для того, чтобы избежать путаницы, используй strict mode
f это метод, если ты его вызываешь как метод - контекст это родитель, если как функцию, он потеряет контекст
https://developer.mozilla.org/en-US/docs/Web/JavaS...
https://github.com/getify/You-Dont-Know-JS/blob/1s...

Comments

[LitvintsevIgor]

спасибо большущее, и за ссылочки отдельное спасибо))

Answer 4

[Сергей Соколов]

Вот была неплохая статья на Хабре с попытками разобраться с this в JavaScript.

• Первый случай, метод объекта – при непосредственном получении и вызове делает этот объект this'ом.
  
• Второй же случай — функция, внутри другой («да»), не стрелочная, «нет», «нет» ... «нет» — this равен глобальному объекту. Если включить строгий режим, вместо Window получим undefined.
  

Статья не столько объясняет (объясняет под спойлерами Комментарий), сколько предлагает алгоритм рассуждений, «таблицу умножения» для запоминания — чтобы предсказывать значение this.

Comments

[Yagher]

Почему function это атавизм?

[Сергей Соколов]

Yagher, только в контексте этого вопроса:
из-за неоднозначности this, окружения и полной заменяемости на стрелочные функции.

В целом, конечно, function не атавизм.

[Сергей Соколов]

Yagher, Про "атавизм" function(), было, упомянул потому, что, как и var, объявления функций function «всплывают» наверх — ещё один неочевидный момент.

[LitvintsevIgor]

спасибо большущее, и за ссылочку отдельное спасибо))

[Yagher]

Сергей Соколов, мне всегда казалось, что у var, что у function - это просто их особенности, но не неочевидности.

[Вадим]

LitvintsevIgor, https://habr.com/ru/post/149516/
вот докину ещё, тоже не плохая.

[LitvintsevIgor]

Вадим, спасибо большое)