Javascript/jsLint: что заменить jQuery (this) при использовании "use strict";

когда я проверяю следующий код с помощью 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 не объявлен как глобальный.

23
javascript jquery jslint use-strict

4 ответов

Я думаю, проблема в том, что вы используете 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-версии здесь):

если этой оценивается в строгом коде режима, затем этой значение не принуждают к объекту. А этой стоимостью null или неопределено не преобразование в глобальный объект и примитивные значения не преобразуются прессподборщик объекты. The этой значение, переданное через вызов функции (включая звонки, сделанные с помощью и возможность использования this на выражение функции кажется подозрительным для многих людей. Сегодня я получил еще один комментарий по этому поводу. Поэтому я создал очень простую демо

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

    test();
}());

вы можете проверить это здесь что в IE9 демонстрационное предупреждение с текстом "[окно объекта]" и в текущих версиях Chrome и Firefox вы увидите "undefined".

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

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

20

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

2

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

  • как метод объекта
  • by 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);
})();

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

1

гораздо проще! Просто используйте эВ.currentTarget вместо этого. Это то же самое, что вы можете проверить с ===

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