И снова this в javascript?

Question

[BlackSSA]

Народ, объясните, пожалуйста, для тупого про this в javascript на пальцах! Сколько уже бьюсь, понимание никак не приходит! Читаю в доках, что в js this зависит от контекста вызова. Ок, пишу код:

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

var o = {
    f1:function(f2){
        console.log(this);//object
        f2();//Window
        f();//Window
    },
    f11: f
}

o.f1(f)

В 7-ой строке убеждаюсь, что контекст действительно объекта o
8-ая строка... Опаньки! Читал-же, что зависит от контекста вызова! Как так? Контекст - о, а в this - window? При этом в 11-ой строке все норм, как и написано в учебниках - в this действительно o.

Объясните, пожалуйста!!! Пишу код, но отсутствие понимания вымораживает! Хелп!

Answer 1

[AngReload]

На пальцах: когда ты пишешь через точку вот так - объект.метод() то this метода будет равен объекту. Если точки перед функцией нет, то this === Window.

Comments

[Decadal]

если нет strict.
При strict this = undefined в глобал контексте

[BlackSSA]

но ведь в 11-ой строке никаких точек нет? Про отличие методов и функций я читал, вроде даже понял. Но это не дает мне понимания заданного вопроса - если я в контексте, то почему функция в строках 8, 9 ссылается на window, а в 11-ой на o?

[Decadal]

BlackSSA, потому что на одиннадцатой строке она начинает принадлежать объекту на правах его метода. Вы присваиваете функцию полю объекта

[BlackSSA]

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

var o = {
    f1: function () {
        var innerFunc = function () {
            console.log(this);
        }
        innerFunc();
    }
}

, то она по любому будет ссылаться на window, а если я вызываю метод объекта, то он по-любому будет ссылаться на свой объект? Тогда, совсем не понимаю, зачем писать, что this зависит от контекста вызова. Так бы и написали, что если у вас функция, то this=window, если у вас метод, то this = object(если явно не используются bind, call и т.д.). Но тогда возникают другие вопросы - в знаменитом примере с таймером
setTimeout(o.method,1000)
с какого перепуга теряется контекст? Ведь явно указан метод какого объекта вызывается. Как с этим бороться я знаю(забиндить на o), но опять таки, использую это без понимания почему так. И еще вопрос тогда возникает: почему, если я указываю например в input-е onclick="fun(e)", то по вышеописаной логике this в этом методе должен указывать на window, а он указывает на объект инпута. Я уже начинаю биться в истерике (

[kova1ev]

BlackSSA, в setTimeout ты не вызываешь метод, а передаешь его. То есть, как бы представь, что есть ячейка памяти, где хранится твой метод какого то объекта и на эту ячейку указывает ссылка o.method, а когда ты передаешь эту ссылку в другую функцию, то передается только то, что в этой ячейке и записано, то есть только метод, без привязки к объекту, как то так. Не путай вызов метода (с круглыми скобочками) и передачу его куда-либо (без круглых скобочек)

[BlackSSA]

kova1ev, Ура! Одной тайной js меньше!!! Вот с ссылками на ячейки памяти мне, почему-то, больше понятно. Спасибо!!!

Answer 2

[Денис Инешин]

У Кантора же прекрасно и подробно расписано: https://learn.javascript.ru/object-methods

И постарайтесь давать нормальные имена функциям и переменным, гораздо легче запутаться в сокращениях чем в нормальных названиях.

В вашем случае:

function foo(){
    console.log(this); // на данный момент не определен
}

var obj = {
    bar: function(baz){
        console.log(this); // функция вызвана в контексте объекта - obj.bar()
        baz(); // функция просто вызвана внутри другой фукнции, т.е. без контекста
        foo(); // тоже самое
    }
}

obj.bar(foo);

// Если же очень хочется принудительно передать контекст, то:
foo.call(obj);

Answer 3

[Антон Швец]

Обычные функции используют контекст с которым они были вызваны
Стрелочные функции используют конекст в котором они были вызваны.
Дергая просто f() - контекст не указан и функции передается глобальный объект.
Вот, посмотрите jsfiddle.net/cbw5qnkz
и вот jsfiddle.net/g3kbfaj7/1

Comments

[BlackSSA]

возможно я не понимаю, что значит фраза " контекст с которым они были вызваны"? Как рассуждаю я:
1) Проверяю, что в данной точке программы контекст=object()
console.log(this);//object
2) Ага, раз у меня в этой точке контекст такой, то и контекст функции будет такой-же. И когда я вижу, что контекст нефига не такой, то по неволе чувствуешь себя ребенком, которому только что сказали, что деда мороза не существует!
За код в fiddle спасибо, но боюсь, что ES2015 с классами и стрелочными функциями меня сейчас еще больше запутает (

[Антон Швец]

BlackSSA, вызов с контекстом - obj.method1()- функция по ссылке obj.method1 вызывается в контексте obj
Или аналог

const fn = obj.method1;
fn.call(obj)

Что будет, если мы просто сделаем?

const fn = obj.method1;
fn()

- ничего, контекст мы не указали, он потерян, и значит в this будет либо undefined в стрикт моде либо глобальный объект

Не пугайтесь ES2015, он наоборот, делает js логичнее и следовательно проще. У меня от var и прототипов с коллбеками уже крыша съезжать начинает, когда приходится со старыми библиотеками работать. Всегда руки чешутся переписать нормально и понятно, с классами и промисами.

Answer 4

[BlackSSA]

Ребята, всем-всем огромное спасибо! По-моему, после 1000-го раза прочтения Ильи Кантора и перепиской с форумчанами понял! Под "контекстом вызова" понимается простой вызов метода! Я, ошибочно, отождествлял контекст со scope! А оказалось все проще). Напишу для таких-же, как я(если они существуют и основным направлением является что-то типа C# ;)), javascript-кодерам лучше не читать ))) :
В javascript "контекст вызова" = экземпляру класса, в котором вызван метод. Т.к. глобальный инстанс в web javascript = window, то все функции (в javascript функции и методы - ЭТО РАЗНЫЕ ВЕЩИ!!! Вернее, по мне, так js-"функции" - это те-же методы объекта window, но в документации они разделяются) вызываются под ним. Т.е., если в коде есть:

function foo()//учел правильную критику Дениса Ишенина с наименованиями
{
    console.log(this);
}

то это равнозначно в шарпе:

class Window{
public ... Foo(...)
}

и соответственно вызов в js в любом месте кода

...
foo();
...

хоть внутри метода, хоть в внутри другой функции, хоть "в корне" кода - "контекстом вызова"(инстансом по нашему в C#) будет естественно Window. При этом, как ни странно, не важно, где определять функцию! В js ее (именно функцию, а не метод!!!) можно определить даже внутри метода! И она все-равно будет инстансом Window! Ну вот например:

var foo = {
    someFunc: function(){
        ...
        function innerFunction(){
            console.log(this);
        }
        innerFunction();
    }
}

угадайте, что выведет innerFunction? Правильно, "Window"!
Но есть несколько "но"(как-же без них )):
1) Если написать "use strict" вначале кода или этой функции, то будет совсем не Window, а undefine
2) В js метод одного инстанса(1) можно вызвать в другом инстансе(2)(соответственно этот вызов будет видеть переменные этого самого другого инстанса(2)) с помощью bind и т.д.. Мне сложно провести аналогию с C#.
3) Пока не разобрался с "потерей контекста", но, думаю, завтра на свежую голову, с пониманием, что такое "контекст вызова" - разберусь.
4) Есть еще "стрелочные функции", но с ними, как ни странно у меня проблем не возникло. )
P.S. прав был дяденька Декарт, когда сказал, что половину споров на земле не существовало бы, если бы люди знали смысл слов, о которых они спорят ))) Наконец-то я для себя понял(надеюсь, что правильно), как это работает! Два года писал код "как надо", и вот сегодня отважился задать вопрос и благодаря ответам наконец-то разобрался "почему". Еще раз всем огромное спасибо!
P.P.S. Коллега подсказал, что еще проще понять(и я с ним согласен), если везде, где нет точки при объявлении/вызове функции мысленно писать Window. Т.е., вместо

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

в голове сразу строится конструкция

function Window.foo()//учел правильную критику Дениса Ишенина с наименованиями
{
    console.log(this);
}

,
а вместо

var foo = {
    someFunc: function(){
        ...
        function innerFunction(){
            console.log(this);
        }
        innerFunction();
    }
}

строится

var foo = {
    someFunc: function(){
        ...
        function Window.innerFunction(){
            Window.console.log(this);
        }
        Window.innerFunction();
    }
}

и тогда инстанс, он-же "контекст вызова" - очевиден ;).
Еще, kova1ev подсказал в коментах первого ответа про потерю контекста. Рекомендую его ответ, мне он помог!

Comments

[AngReload]

2. что бы сменить this достаточно вызвать функцию как метод другого объекта

var objA = {
  a: '1',
  fn: function () { console.log(this); }
}
objA.fn() // this === objA

// пример смены контекста
var objB = {
  b: '2'
}
objB.fn = objA.fn;
objB.fn() // this === objB

// пример потери контекста
var fn = objA.fn;
fn() // this === window или undefined

как устроены методы bind и call

// собственная реализация call
Function.prototype.myCall = function(newThis, ...args) {
  // метод call работает так:
  // fn.call(newThis, arg1, arg2, и тд.)
  // вызовет функцию с новымКонтекстом и аргументами
  const fn = this;
  // особый случай, если newThis нету, тогда
  if (newThis === undefined) {
    // проверяем strict mode
    const isStrict = (function() { return !this; })();
    if (isStrict) {
      // в строгом просто выполним функцию без конткста
      return fn(...args);
    }
    // в нестрогом режиме контекст установим как window
    newThis = window;
  }
  // если не знаешь что такое Symbol
  // то подставь вместо него Math.random()
  // key = 'название ключа, которого ещё нет в объекте';
  const key = Symbol();
  // записываем функцию в поле объекта
  newThis[key] = fn;
  // и вызываем её
  // результат = новыйКонтекст.нашаФункция(аргумент1, арг2, и тд)
  const result = newThis[key](...args);
  // удаляем ключ, чтобы вернуть объект в изначальный вид
  delete newThis[key];
  // возвратим результат
  return result;
};

// тест для myCall
var getSum = function(b, c) {
  return this.a + b + c;
};
console.log(getSum.call({a: 1}, 2, 3) === 6); // true
console.log(getSum.myCall({a: 1}, 2, 3) === 6); // true

// собственная реализация bind
Function.prototype.myBind = function(newThis, ...firstArgs) {
  // bind возвращащает новую функцию, которая
  // вызовет функцию с новымКонтекстом и аргументами
  const fn = this;
  return function (...secondArgs) {
    return fn.myCall(newThis, ...firstArgs, ...secondArgs);
  };
};

// тест для myBind
var obj = {a: 1};
var boundGetSum = getSum.bind(obj, 2);
var myBoundGetSum = getSum.myBind(obj, 2);
console.log(boundGetSum(3) === 6); // true
console.log(myBoundGetSum(3) === 6); // true