Как «это» ищется в обратном вызове Javascript

Question

Я спутал себя в следующем случае:

function foo() { 
} 

foo.prototype.bar1 = function() { 
    console.log(this); // shows "Window"!! 
} 

foo.prototype.bar2 = function(func) { 
    func(); 
} 

var f = new foo(); 
f.bar2(f.bar1); 

Как/почему бы результат console.log (это) есть «окно»? Я думал, что независимо от того, как вы называете публичную функцию класса здесь, «это» всегда должно ссылаться на «foo».

А также, что такое правильный способ избежать такого рода ошибок?

Благодаря

Answer 1

Когда вы f.bar2(f.bar1), вы передаете ссылку на BAR1 в BAR2; внутри bar2, он известен только как «func», и связь с f теряется. The value of this is determined dynamically when the function is invoked. Если вы вызываете f.bar1(), это будет f, но когда вы вызываете func(), он не определен и возвращается к глобальному объекту (окну).

У меня explained this earlier следующим образом:

Основные правила, это будет глобальный объект, если:

• функция не вызывается как метод объекта (тогда это будет объект) или
• функция вызывается как конструктор с новым оператором (в этом случае это будет указывать на то, что новый объект имеет )

Один из способов избежать этого является создание связанного функции и передать, что:

f.bar2(f.bar1.bind(f)); 

Обратите внимание, что Function.prototype.bind не поддерживается старыми браузерами, так что вам может понадобиться polyfill (есть один доступный на MDN).

В простом сценарии вы представлены, вы можете делать то, что elclanrs предлагает в своем комментарии, как цель это не доступно внутри bar2:

func.call(this);