«это» в ООП событиях

Question

Посмотрите этот код:

<script type = "text/javascript">
    function mouseClick (container) {
        container.appendChild (document.createTextNode ("Can you show me ? Try clicking anywhere."));

        this.tryShowMe = "Yes man ! You can !"

        window.addEventListener ("click", function (event) {
            var ok = typeof this.tryShowMe === "undefined" ? "No, you can't." : this.tryShowMe;

            alert (ok);
        }, false);
    }

    window.addEventListener ("load", function () {
        new mouseClick (document.body);
    }, false);
</script>

«this.tryShowMe» относится к элементу «окна», вместо этого я хочу обратиться к объекту. Могу я это сделать?

Спасибо

Answer 1

Это распространенная ошибка в JavaScript.

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

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

Если вы хотите получить доступ к внешнему this, вам нужно сохранить ссылку на него:

someObject.method = function() {
    var that = this;
    function test() {
        that; // refers to someObject
        this; // refers to window
    }
    test();
}

Для обзора возможных значений и ошибок this, возьмитевзгляд здесь .