Javascript/jsLint：使用“use 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(this)，但我不明白用什么替换它。请注意，这是 not，因为 jQuery 没有被声明为全局。

Answer 1

容易多了！ 只需使用 ev.currentTarget 而不是这个。和你可以用 ===

测试的一样

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

Answer 2

通过原生 javascript，this 将在 strict mode 中为 undefined，如果函数包含它也未被调用：

• 作为对象的方法
• 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 3

我认为问题在于您使用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");
};

UPDATED 2：我觉得这个问题很有意思。所以我浏览了ECMAScript standard。我在“Annex C (informative) The Strict Mode of ECMAScript”中找到了以下内容（请参阅 HTML 版本 here 更好）：

如果在严格模式代码中评估 this，则 this 值为 不强制到一个对象。 null 或 undefined 的 this 值不是 转换为全局对象，原始值不转换 包装对象。通过函数调用传递的 this 值 （包括使用 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： 似乎不可能在 function 语句 中使用 this，而在 中使用 this 的可能性函数表达式 似乎很多人都怀疑。今天，我收到了更多关于此的评论。所以我创建了一个非常简单的演示

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

    test();
}());

您可以测试here，在 IE9 中演示显示带有文本“[object Window]”的警报，而在当前版本的 Chrome 和 Firefox 上，您将看到“未定义”。

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

我个人更喜欢使用函数表达式，几乎从不使用更多函数语句。我认为来自其他程序语言的人（也像我一样）一开始会尝试使用在您最喜欢的语言中很好的相同结构。直到后来才发现块中的变量定义不好（JavaScript 中没有块级范围）并且 函数语句 也不总是最好的选择。

Answer 4

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