Получение переменной объекта с событиями

Question

function test() {
    this.str = "hello";

    this.sayHello = function() {
        document.write(this.str);
    }

    this.init = function() {
        document.onkeydown = this.sayHello;
    }
}

var testing = new test();
testing.init();

Приведенный выше код должен выводить "hello" при событии onkeydown. Но я получаю "неопределенный". Как я могу заставить это работать?

Answer 1

Проблема с this.sayHello.Когда вы назначаете ссылку на функцию sayHello при нажатии на клавишу, ссылка на контекст (объект) теряется.При нажатии клавиши this обращается к объекту Document, поскольку обратный вызов вызывается как:

document.onkeydown(); // or for simplicity imagine - document.sayHello();

Если вы присвоили переменную str для объекта document, вы увидитезаписанное значение,

document.str = "hello";

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

this.init = function() {
    var me = this;
    document.onkeydown = function() {
        me.sayHello();
    };
}

Или, если вы используете современные браузеры, это уже было включено в ECMAScript 5 с использованием bindфункция.

this.init = function() {
    var me = this;
    document.onkeydown = this.sayHello.bind(this);
}