JavaScript: привязка контекста

Question

При выполнении этого блока кода, выведется undefined, а не 'Вася', так как setTimeout получил метод user.sayHi, но не ее контекст:

var user = {
  firstName: "Вася",
  sayHi: function() {
    alert( this.firstName );
  }
};

setTimeout(user.sayHi, 1000); // undefined (не Вася!)

А если вызов метода обернуть в анонимную функцию, то выведется 'Вася'.

setTimeout(function() {
  user.sayHi(); // Вася
}, 1000);

Собственно возник вопрос: почему при оборачивании вызова метода в анонимную функцию, то контекст появляется?

Answer 1

Без оборачивания в анонимную функцию this становится равен window.

var user = {
  firstName: "Вася",
  sayHi: function() {
    alert( this.firstName );
    console.log(this) // Window {}
  }
};

setTimeout(user.sayHi, 1000);

С оборачиванием this равен объекту:

var user = {
  firstName: "Вася",
  sayHi: function() {
    alert( this.firstName );
    console.log(this) // Object {firstName: "Вася"}
  }
};

setTimeout(() => user.sayHi(), 1000); 

Можно вручную установить this вызовом функции через func.call(context, arg1, arg2...)

Все дело в том, что коллбэку setTimeout передается только сама функция, без ее контекста.

Answer 2

Используйте bind;

var user = {
  firstName: "Вася",
  sayHi: function() {
    alert( this.firstName );
  }
};

setTimeout(user.sayHi.bind(user), 1000); // undefined (не Вася!)

контекст меняется лишь потому, что контекст равен (вне случая bind) тому что написано до точки перед вызываемой функцией.

  my.pretty.good.object.method();
  //               /|\
  //----------------| контекст

если до точки ничего нет, то глобальному объекту или undefined в случае "use strict";