JavaScript/jslint: что заменить jQuery (это) при использовании «Использование строги»;

Question

Когда я проверяю следующий код с JSLINT, я получаю следующие ошибки.

function displayMegaDropDown() {
"use strict";
var liMegaPosition, divMegaOffset;
liMegaPosition = jQuery(this).position();
divMegaOffset = { top: liMegaPosition.top + jQuery(this).height(), left: liMegaPosition.left };
jQuery(this).find("div").offset(divMegaOffset);

jQuery(this).addClass("hovering");
}

Проблема в строке 4 Характер 29: Строгое нарушение.

 liMegaPosition = jQuery(this).position();  

Проблема в строке 5 Характер 56: Строгое нарушение.

divMegaOffset = { top: liMegaPosition.top + jQuery(this).height(), left: liM...

Проблема в строке 6 Характер 12: Строгое нарушение.

jQuery(this).find("div").offset(divMegaOffset);

Проблема в строке 8 Характер 12: Строгое нарушение.

jQuery(this).addClass("hovering");

Я предполагаю, что это из -за использования jQuery (это), но я не понимаю, что его заменить. Обратите внимание, что это нет Потому что jQuery не объявляется как глобальный.

Answer 1

Я думаю, проблема в том, что вы используете this не внутри метода. Следующий код

/*global jQuery */
var myObj = {
    myNethod: function displayMegaDropDown() {
        "use strict";
        var ts = jQuery(this),
            liMegaPosition = ts.position(),
            divMegaOffset = {
                top: liMegaPosition.top + ts.height(),
                left: liMegaPosition.left
            };

        ts.find("div").offset(divMegaOffset);

        ts.addClass("hovering");
    }
};

или этот

/*global jQuery */
function displayMegaDropDown(t) {
    "use strict";
    var ts = jQuery(t),
        liMegaPosition = ts.position(),
        divMegaOffset = {
            top: liMegaPosition.top + ts.height(),
            left: liMegaPosition.left
        };

    ts.find("div").offset(divMegaOffset);

    ts.addClass("hovering");
}

не даст вам никаких ошибок или предупреждений.

Обновлено: Еще одна версия, которая очень близка к вашей оригинальной, также не имеет ошибок или предупреждений:

/*global jQuery */
var displayMegaDropDown = function () {
    "use strict";
    var ts = jQuery(this),
        liMegaPosition = ts.position(),
        divMegaOffset = {
            top: liMegaPosition.top + ts.height(),
            left: liMegaPosition.left
        };

    ts.find("div").offset(divMegaOffset);

    ts.addClass("hovering");
};

Обновлено 2: Я нахожу вопрос интересным для понимания. Итак, я смотрю через Стандарт Ecmascript Анкет Я нахожу следующее в «Приложении C (информативный) строгий режим Ecmascript» (см. Версии лучше в HTML -версии здесь):

Если это оценивается в строгом коде режима, затем это Значение не принуждается к объекту. А это ценность нулевой или же неопределенный не преобразуется в глобальный объект, а примитивные значения не преобразуются в объекты обертки. А это значение, передаваемое с помощью функционального вызова (включая вызовы с использованием Function.prototype.apply а также Function.prototype.call) не принуждайте переданное это значение объекту (10.4.3, 11.1.1, 15.3.4.3, 15.3.4.4).

Я полагаю, что это является причиной ошибки JSLINT.

Причины, если вы выключите строгий режим, код не будет больше ошибок:

/*global jQuery */
/*jslint sloppy: true */
function displayMegaDropDown() {
    var ts = jQuery(this),
        liMegaPosition = ts.position(),
        divMegaOffset = {
            top: liMegaPosition.top + ts.height(),
            left: liMegaPosition.left
        };

    ts.find("div").offset(divMegaOffset);

    ts.addClass("hovering");
}

Обновлено 3: Кажется, что невозможность использования this в оператор функции и возможность использования this в Функция выражения кажется подозреваемым для многих людей. Сегодня я получил еще один комментарий по этому поводу. Итак, я создал очень простую демонстрацию

/*jslint devel: true */
(function () {
    'use strict';
    function test() {
        alert(this);
    }

    test();
}());

Вы можете проверить это здесь Это в IE9 демо -отображение оповещения с текстом «[окно объекта]» и в текущих версиях хрома и Firefox вы увидите «неопределенные».

Таким образом, проблема с использованием this в оператор функции это не "jslint thing". Это реальная проблема, которую вы должны принять во внимание во время разработки ваших программ JavaScript.

Я лично предпочитаю использовать Функция выражения И почти никогда не используйте больше Функциональные операторы. Анкет Я думаю, что люди, которые приезжают из других языков программы (как и я), стараются в начале, чтобы использовать ту же конструкцию, которая была хорошей на ваших любимых языках. Только позже кто -то узнает, что определение переменных в блоке плохое (в JavaScript не существует объема уровня блока) и что Функциональные операторы Не всегда лучший выбор.

Answer 2

Здесь нет строгий режим нарушение в вашем кодексе. Если бы это было, вы бы получили какую -то ошибку.

Answer 3

Родным JavaScript, this будет undefined в strict mode Если функция содержит, это также не вызывается:

• как метод объекта
• по Function.call или же Function.apply
• как конструктор

По этой причине Jshint жалуется на это.

Однако, если функция используется в качестве обработчика событий для jQuery, jQuery приведет $(this) как объект jQuery в DOM, который запускает событие.

Чтобы доказать это, откройте консоль этой страницы и запустите следующий код.

(function(){
    "use strict";
    function event_handler() {
        $(this).css('background','red');
    }

    $('#content').on('click', 'table', event_handler);
})();

Нажмите на любой вопрос или ответ на эту страницу, и вы увидите, что фон становится красным.

Answer 4

Намного легче!Просто используйте ev.currenttarget вместо этого. Это то же самое, что вы можете проверить с ===

function event_handler(ev) {
    //var $el = $(this); // jshint - error
    var $el = $(ev.currentTarget); // is exactly the same as above
}