JavaScript/jslint：「Strictを使用する」を使用する場合、JQuery（This）を置き換えるもの。

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");
}

エラーや警告はありません。

更新しました: ：もう1つのバージョンは、元のバージョンに非常に近いもので、エラーや警告もありません。

/*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標準 。 「Annex C（Informative）The Strict Mode of ECMAScript」に次のものがあります（HTMLバージョンでより良い参照 ここ):

もしも これ Strict Modeコード内で評価されます これ 価値はオブジェクトに強制されていません。 a これ の値 ヌル また 未定義 グローバルオブジェクトに変換されず、プリミティブ値はラッパーオブジェクトに変換されません。 これ 関数呼び出しを介して渡された値（使用した呼び出しを含む 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では、テキスト「[Object Window]」でデモディスプレイアラートが、ChromeとFirefoxの現在のバージョンでは、「未定義」が表示されます。

したがって、の使用に関する問題 this の 関数ステートメント 「jslintのもの」ではありません。 JavaScriptプログラムの開発中に考慮すべきことは本当の問題です。

私は個人的に使用することを好みます 関数式 そして、ほとんど使用することはありません 関数ステートメント. 。別のプログラム言語（私のような）から来た人々は、最初にあなたのお気に入りの言語で良かった同じ構造を使用しようとしていると思います。後で、ブロック内の変数の定義が悪いことを発見しました（JavaScriptにはブロックレベルの範囲はありません）。 関数ステートメント 常に最良の選択ではありません。

Answer 2

ありません 厳密なモード コードの違反。ある場合、ある種のエラーが発生します。

Answer 3

ネイティブJavaScriptによって、 this そうなるでしょう undefined の strict mode 関数が含まれている場合、それも呼び出されません：

• オブジェクトの方法として
• に Function.call また Function.apply
• コンストラクターとして

それがJshintがそれについて不平を言っている理由です。

ただし、関数がjQueryのイベントハンドラーとして使用されている場合、jQueryは $(this) イベントを発射するDOMのjQueryオブジェクトとして。

これを証明するには、このページのコンソールを開き、次のコードを実行します。

(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
}