Применить к eventListener не работает

Question

Я пытаюсь использовать некоторые значения из «верхней» функции во «внутренней» функции:

function Load(el, script)
{
    el.addEventListener('click',
        function (e)
        {
            this.test = "testing";
            script.apply(this, arguments);
        }, false);
};

Load(document.getElementById("panel"),
    function (e)
    {
        alert(test); // test is undefined
    });

Приведенный выше пример не работает, он говорит, что test не определено.

Но работает следующее:

function A(B)
{
  this.test = "bla";
  B.apply(this);
}
function B()
{
  alert(test);
}
A(B);

Какая разница?Как я могу заставить его работать должным образом?

Answer 1

test - это свойство элемента в этой точке, поэтому вам нужно ссылаться на него следующим образом:

Load(document.getElementById("panel"),
function (e)
{
    alert(this.test); // "testing"
});

Вы можете проверить его здесь .Разница в том, что в первом примере this ссылается на элемент id="panel", и свойство устанавливается там.Во втором примере this относится к глобальному объекту, или window, поэтому test - это глобальная переменная, которая работает, когда вы обращаетесь к ней.

Answer 2

Во втором примере, когда вы вызываете A(), this ссылается на объект window, поскольку это область действия, в которой работает A().Все глобальные переменные также принадлежат объекту window, поэтому в этом контексте test, this.test и window.test являются одной и той же сущностью.

В первом примере, однако, thisотносится к элементу, для которого был вызван обработчик, поэтому this.test (который определен) совпадает с "#panel".test, но отличается от test и window.test (которые не определены).

Answer 3

Вы должны принять ответ Ника Крейвера, я просто уточняю здесь еще немного кода:

function Load(el, script)
{
    el.addEventListener('click',
        function (e)
        {
            this.test = "testing";  // sets el.test="testing" ('cos this==el)
            script.apply(this, arguments);
        }, false);
};

Load(document.getElementById("panel"),
    function (e)
    {
        alert(test); // alerts window.test, not el.test
    });

function A(B)
{
  this.test = "bla"; // sets window.test="bla" ('cos this==window)
  B.apply(this);
}
function B()
{
  alert(test); // alerts window.test
}
A(B);