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 standard。我在“附件C（资料性）ECMAScript的严格模式”中找到以下内容（请参阅HTML版here中更好的内容）：

如果在严格模式代码中评估此，则此值为没有强迫对象。 null 或未定义的此值不是转换为全局对象并且不转换原始值包装对象。此值通过函数调用传递（包括使用 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(); }());的可能性许多人似乎怀疑函数表达式。今天我又收到了一条评论。所以我创建了非常简单的演示

this

您可以在IE9中测试here在IE9中使用文本“[对象窗口]”的演示显示提醒，在当前版本的Chrome和Firefox上，您将看到“未定义”。

所以在函数语句中使用{{1}}的问题不是“jslint事情”。这是您在开发JavaScript程序时应该考虑的真正问题。

我个人更喜欢使用函数表达式，几乎从不使用更多函数语句。我认为来自其他程序语言的人（比如我）也会尝试使用与您最喜欢的语言相同的结构。只有在后来才发现块中变量的定义是错误的（JavaScript中没有块级别范围），函数语句也不总是最好的选择。

Answer 2

您的代码中没有严格模式违规。如果有，你会得到某种错误。

Answer 3

通过原生javascript，如果函数包含this，则undefined将strict mode Function.call：

作为对象的方法
Function.apply或$(this)
作为构造函数

这就是jshint抱怨它的原因。

但是，如果该函数被用作jQuery的事件处理程序，jQuery将强制(function(){ "use strict"; function event_handler() { $(this).css('background','red'); } $('#content').on('click', 'table', event_handler); })();作为触发事件的DOM的jQuery对象。

要证明这一点，请打开此页面的控制台并运行以下代码。

open FIC, "$f" or warn "$f E/S: $!\n";

点击此页面的任何问题或答案，您会看到背景变为红色。

Answer 4

更容易！ 只需使用ev.currentTarget而不是这个。与使用===

进行测试的情况相同

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

Javascript / jsLint：当使用“use strict”时，用什么替换jQuery（this）;

4 个答案: