Функция JavaScript как обратный вызов

Question

Следующий скрипт создает окна сообщений "Hello", "undefined", "Hello":

function action(callback) {
  window.setTimeout(callback, 1000);
}

var obj = { 
  text: "Hello", 
  f: function() { window.alert(this.text); } 
};

obj.f(); // Line 1
action(obj.f); // Line 2
action(function() { obj.f(); }); // Line 3

Я ищу объяснение, почему строка, помеченная как «Строка 2», выдает «неопределенный» вывод.

Answer 1

в JavaScript, this не привязан к методу (как в python). Строка 2 приводит к вызову только функции, а this не определено или нет obj

Answer 2

Когда вы вызываете строку 2: вы только передаете функцию в параметр. Поскольку при передаче вы вызываете только функцию, а не весь объект, this в функции не ссылается на obj, что делает this.text неопределенным.

Answer 3

Многие библиотеки JS делают что-то вроде этого:

if (!Function.prototype.context) {
    Function.prototype.context = function (object) {
        var fn = this;
        return function () { return fn.apply(object, arguments); };
    };
}

Чтобы иметь возможность передавать / связывать this с обработчиком.Так что в вашем случае вы можете сделать что-то вроде этого

action(obj.f.context(obj));

и получить свой «Привет».И да, это общий способ сделать то, что вы сделали в шаге 3.

Answer 4

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