Почему данном случае теряется контекст this?

Question

[Muranx]

Здравствуйте !

Function.prototype.anyMeth=function(obj){
  fn=this // ((1))
  document.write(fn.name+"<br>") // просто для проверки того, на что указывает в данном случае this
      return function(){ // ((2))
          document.write(this+"<br>") // ((3))
          return fn.call(!this ? this : obj) // ((4))
      }
};

var a="Привязка к глобальному объекту по умолчанию",
    b={a:"Свойство 'а' из объекта b"},
    c={a:"Свойство 'а' из объекта с"}

function back(){
  document.write(this.a);
};

var hoj = back.anyMeth();

hoj(c);

1) Почему в возвращаемой функции ((2)) теряется тот this который был в ((1)), разве при вызове ((3)) интерпритатор не должен искать this выше в коде?(или это работает только с замыканиями, а на зыс это не распространяется) Не понимаю как получается, что находясь в скоупе Function.prototype.anyMeth=function(obj), this указывает на объект (на функцию) из которой будет вызываться метод anyMeth, но в возвращаемой из этого скоупа функции мы теряем этот this, в строке ((3))это и есть та самая потеря контекста и возврат к привязке по умолчанию, тоесть объекту window, или как?

2) Как абсолютно буквально, не тривиально, без талых шуток програмистов, и намеренного запутывания моего неокрепшего в програмировании ума расписать эту конструкцию под номером ((4))?
Мы вызываем функцию fn и должны ей передать контекст вызова, т.е. передать некий объект, так что данное условие проверяет? я не понимаю саму структуру (!this ? this : obj) т.е. переданный объект проверяется на присутствие в коде? Т.к. к примеру если передать объект c результат будет true НО у нас же !this поэтому вернётся false в виду чего сработает вызов obj (согласно условию), НО obj ЖЕ У НАС объект c, так каким образом возвращается привязка по умолчанию, т.е. this указывает на виндовс? (что мы собственно и видим, если вставить код в тот-же codepen)

Проблема в том, что фраза "зыс определяется не там где объявленна функция, а там где вызывается" сбивает меня с толку, в случаях типо fn.call(!this ? this : obj) (т.к. функция эта вызывается внутри другой функции, у которой свой this внутри, но при этом она обозначает не этот зыс), вообщем спасибо заранее за ответ!

Answer 1

[Aetae]

Простой ответ:
Берём метод:

метод = function(){
  console.log(this)
};

и(не важно как) пихаем его в какие-то объекты.
Получаем:

хрень.метод() // this - хрень
хрень.кишки.метод() // this - хрень.кишки
метод() // this - window

хрень.метод.call(хрень.кишки) // this - хрень.кишки
метод.call(хрень.кишки) // this - хрень.кишки
метод.call(null) // this - null

элемент.addEventListener('оппа', хрень.метод) //  this -элемент
элемент.addEventListener('оппа', метод) //  this -элемент
элемент.addEventListener('оппа', хрень.кишки.продукт.метод) //  this -элемент

По сути this для фукции - это то, что идёт перед точкой, кроме тех случаев когда он переопределён явно. Всё, никакой эзотерики.)

fn.call(!this ? this : obj) - это чушь скорее всего. Если this - falsy, то ставим его как this при вызове функции fn, иначе ставим obj. Falsy this может быть только при явном указании(или в strict режиме, при вызове функции напрямую("без точки перед ней")), и скорее всего передача пустого this в таком случае просто сломает выполнение fn.

Ну ещё следует упомянуть стрелочную фукнцию:

метод = () => {
  console.log(this)
};

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

Comments

[Muranx]

Aetae , чот я так и не увидил ответа на свой первый вопрос ! По моему я сформулировал его довольно ясно! То , что ты мне тут показал что можно через точку вызывать , и зыс будет до точки это конечно ты молодец, я бы даже не мог себе представить где бы я нашёл эту люто редкую инфу, однако она никаким образом не объясняет , как теряется контекст в случае с замыканием под цифрой ((3)) ! И как вообще кто - либо кроме меня может принимать ответ как "Решение"? Я этого чтот не понял ! Может стоит перезадать вопрос? Первый раз такое вижу на подобном сайте, чтобы кто-то решал, явился ли ответ решением кроме того, кто задал вопрос. . .

[Aetae]

Muranx, хз, кураторы тега могут видать. И да, мой ответ полностью отвечает на ваш вопрос, если применить мозг. Кроме того что я описал никаких метаморфоз не происходит.
Ну ок, разжуём ваш пример:

1) Почему в возвращаемой функции ((2)) теряется тот this который был в ((1)), разве при вызове ((3)) интерпритатор не должен искать this выше в коде?

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

Function.prototype.anyMeth=function(obj){
  fn=this // ((1))
  document.write(fn.name+"<br>") // просто для проверки того, на что указывает в данном случае this
      return 'anyShit'
};

Это совершенно другая конкретная функция:

function(){ // ((2))
  document.write(this+"<br>") // ((3))
  return fn.call(!this ? this : obj) // ((4))
}

(или это работает только с замыканиями, а на зыс это не распространяется) Не понимаю как получается, что находясь в скоупе Function.prototype.anyMeth=function(obj), this указывает на объект (на функцию) из которой будет вызываться метод anyMeth, но в возвращаемой из этого скоупа функции мы теряем этот this, в строке ((3))

Ещё раз, на то что лежит в this влияет только способ вызова, это не переменная, а особое слово.

это и есть та самая потеря контекста и возврат к привязке по умолчанию, тоесть объекту window, или как?

Нет никакой потери контекста и привязки по умолчанию. То что при вызове полученной функции у вас this равен window происходит потому, что вы сами вызываете без контекста: hoj(c);
Почему так - написано в ответе.

Проблема в том, что фраза "зыс определяется не там где объявленна функция, а там где вызывается" сбивает меня с толку, в случаях типо fn.call(!this ? this : obj) (т.к. функция эта вызывается внутри другой функции, у которой свой this внутри, но при этом она обозначает не этот зыс), вообщем спасибо заранее за ответ!

Вызовы в javascript очевидно идут по порядку. Сначала вы вызываете var hoj = back.anyMeth();, this принимает значение back, создаётся и записывается(но не вызывается!) в переменную hoj функция:

function(){ // ((2))
  document.write(this+"<br>") // ((3))
  return fn.call(!this ? this : obj) // ((4))
}

для которой, благодаря замыканию запомнены переменные:
а.fn, которой присвоен this на момент вызова, т.е. black;
б.obj, который undefined, потому что функция вызвана без параметров.
На данном этапе функция anyMeth отработала, никакого this нет.
Далее вы вызываете hoj(с) без всякого контекста:
1. this принимает значение window в обычном и undefined в строгом режиме;
2. переданный параметр c нигде не используется;
3. fn замкнут и равен black;
4. obj замкнут и undefined.
Происходит вызов fn через call которому в качестве параметра в любом случае передаётся undefined:
a. в строгом режиме this для просто вызваной вызывнной функции - undefuned, !undefuned -> true
, fn.call(!undefuned ? undefuned : obj) -> fn.call(undefuned);
b. в обычном режиме this для просто вызваной вызывнной функции - window, !window -> false, obj -> undeined(п.4), fn.call(!window ? window : undeined) -> fn.call(undefuned).
Передача в функцию undefined как параметра равносильна в принципе отсутствию переданных параметров, т.о. fn.call(undefuned) равносильно fn.call(), что в свою очередь равносильно fn(), что в конкретном случае равносильно(п.3) black().
В итоге мы получаем простой вызов функции back() без всякого контекста.

[Muranx]

Aetae, вот это топчик ! Я понял о чем ты мне говорил теперь, ну чож поделать, если вот мне не с первого раза доходит! =// Вот когда ты разжевал поэтапно то, что происходит, стало понятно, именно с замыканиями и вызовами . . . Ты давно занимаешься джаваскриптом? Я просто ловлю себя на мысле , что многое просто запоминаю, не понимая, например чтобы передать зыс в возвращаемую функцию, существует фича var fn=this вот после твоего объяснения я это понял как работает! Спасибо!