Вопрос об ошибке jsLint: «Не создавайте функции в цикле»

Question

Я читаю DOM Scripting Джереми Кейта и тестирую код в jsLint

1. В этом примере кода я получаю сообщение об ошибке «Не создавайте функции в цикле».
2. Когда я пытаюсь это исправить, я, похоже, теряю область действия this
3. Мне нужно увидеть пример того, как исправить эту ошибку.
4. Вот jsfiddle: http://jsfiddle.net/pkdsleeper/ejvMj/

Заранее спасибо

шпала

Answer 1

может быть что-то вроде этого:

var initMouseover = function() {
    return function () {
        this.style.backgroundColor = "crimson";
        this.style.color = "#ffffff";
    };
};

и затем для цикла у вас есть:

current_row.onmouseover = initMouseover();

Я проверяю его по ссылке, которую вы публикуете, и похоже, что она работает, а также больше не отображает эту ошибку.

Answer 2

Один из способов сделать это - определить локальные функции вне цикла:

(function highlightRows() {

    "use strict";

    if (!document.getElementById || !document.getElementsByTagName) { return false; }

    function handleMouseOver () {
        this.style.backgroundColor = "crimson";
        this.style.color = "#ffffff";
    }

    function handleMouseOut() {
        this.style.backgroundColor = "transparent";
        this.style.color = "#000000";
    }


    var tbl = document.getElementById("tbl_example"), // get the table
        rows = tbl.getElementsByTagName("tr"), // get all the table rows
        i,
        current_row;

    // loop through rows adding style info to the mouseover/mouseout events
    for (i = 0; i < rows.length; i++) {
        current_row = rows[i];

        // cancel highlight of th row
        if (current_row.parentNode.tagName === "THEAD") { 
            continue;
        }

        current_row.onmouseover = handleMouseOver;
        current_row.onmouseout = handleMouseOut;
    }    
}())

Работа в jsFiddle: http://jsfiddle.net/jfriend00/aKfWs/.

Answer 3

Ваш код работает нормально, как есть.this в функциях вашего обработчика событий относится к объекту DOM, который вызвал событие, который является элементом <tr>.Таким образом, вы можете изменить свои стили, изменив свойства this.Вы также можете получить доступ к тому же объекту через параметр функции.

current_row.onmouseover = function (event) {
            console.log(this == event.currentTarget);
}

Это будет регистрировать true на консоли, поскольку this и event.currentTarget - это один и тот же объект элемента DOM.

Но да, вы правы в том, что в области действия вашего цикла for, this (который вы не используете в этой конкретной области) - это объект window верхнего уровня, но внутри функций обработчика событий., this - это другой объект.