Javascript это не указывает на правильный объект

Question

Пример кода:

function TestClass() {

this.init = function() {

    this.updateHeader(); // <-- error line

};

this.updateHeader = function() {
    console.log("Works");
};

};
var test = new TestClass();
$(document).ready(test.init);

Когда я запускаю это в Firefox 3.5, Firebug выдает мне сообщение о том, что this.updateHeader не является допустимой функцией. Я программист на Java / PHP, и у меня возникли проблемы с пониманием OO-модели Javascript. Что я делаю не так?

Это сработает, если я заменю строку $ (document) .ready просто на test.init (), но я этого не хочу.

Answer 1

Передав функцию test.init непосредственно в функцию ready(), вы регистрируете test.init в качестве функции обратного вызова. jQuery (который, судя по вашему синтаксису, который вы используете) будет использовать заданную функцию обратного вызова и применить ее в контексте document. Это означает, что ключевое слово this будет ссылаться на document.

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

$(document).ready(function() {
    test.init();
});

Использование синтаксиса function() { } для определения замыканий, которые должны быть установлены в качестве функций обратного вызова, является распространенным шаблоном в Javascript.

Answer 2

Передача test.init в функцию готовности документа действительно передает ему указатель на функцию init в тесте.

По сути, это разрыв функции init и ее выполнение в области действия функции готовности документа.

Если вы запустили его как $ (document) .ready (function () {test.init ();}); (Как заявил Патрик) он будет работать в нужном объеме.

Answer 3

Попробуйте $(document).ready(function () { test.init(); });

ready () ожидает функцию в качестве аргумента, которую она выполнит, когда документ будет готов. Когда это произойдет, this будет указывать на объект document, а не test.

Решение состоит в том, чтобы передать ему функцию, которая явно вызывает init с кодом, test.init(). Когда вы называете это так, this (в функции init) указывает на ваш test объект.

Answer 4

«Это» в этом контексте относится к функции, в которой оно содержится.