Почему this ссылается на window?

Question

[Роман Макаров]

"use strict";
window.Reciever = function (userHandler, messageHandler) {
    this.userHandler = userHandler;
    this.messageHandler = messageHandler;
};
window.Reciever.prototype.handleMessage = function (message) {
    console.log(this);
    var data = JSON.parse(message.data);
    switch (data.type) {
        case 'user':
            this.userHandler(arguments);
            break;
        case 'message':
            this.messageHandler(arguments);
            break;
        default:
            throw new Error('Type wasn\'t recognized');
    }
};

Необходимо, чтобы этот прототип находился в глобальной области видимости (знаю, что плохо, но это временное решение).
Объекту при инициализации передаются 2 функции.
Вот пример использования:

"use strict";
var reciever  = new window.parent.Reciever(Controller.user, Controller.message);

if (window.addEventListener) {
    window.addEventListener("message", reciever.handleMessage);
} else {
    // IE8
    window.attachEvent("onmessage", reciever.handleMessage);
}

Answer 1

[Александр Прозоров]

Потому что вы передаёте reciever.handleMessage как ссылку на функцию а не вызываете её как метод объекта. Поэтому всё верно, this будет указывать на window.

Хотите получить контекст на объект, делайте так:

if (window.addEventListener) {
    window.addEventListener("message", function (message) {
        reciever.handleMessage(message); // <-вызов функции как метода объекта
    });
}

bind в данном случае тоже поможет, но вам как разработчику важно понимать поведение контекста this в JS.

Comments

[Роман Макаров]

Теперь всё встало на свои места, спасибо)

Answer 2

[Роман Макаров]

Помог bind. Но все же не появилось понимание того, из-за чего ошибка возникла. Буду благодарен тому, кто "ткнёт носом".

"use strict";
var reciever  = new window.parent.Reciever(Controller.user, Controller.message);

if (window.addEventListener) {
    window.addEventListener("message", reciever.handleMessage.bind(reciever));
} else {
    // IE8
    window.attachEvent("onmessage", reciever.handleMessage.bind(reciever));
}

Comments

[Dmitriy Uvarov]

Вы передаете функцию, которая не имеет явного привязанного this, получив ее, слушатель привязывает ее к источнику события, т. е. this будет указывать на window. Но привязав this, вы избежали подобного переопределения

[Роман Макаров]

Дмитрий Уваров: разве не имеет? я же её передаю в контексте объекта. Т.е. не
var customFunc = myObj.func;
doSmth(customFunc)
А сразу как myObj.func.

Видите ли вы более красивые решения, нежели bind?

[Александр Прозоров]

Роман Макаров: важный момент - чтобы this указывал на объект, надо не "передавать" а "вызывать" функцию как метод объекта.

[Роман Макаров]

Александр Прозоров: именно это вы и сделали в своем ответе)