JavaScript/jslint：用“使用严格”替换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");
}

不会给您任何错误或警告。

更新: ：另一个版本非常接近您的原始版本，也没有错误或警告：

/*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中，演示显示警报带有文本“ [对象窗口]”以及当前版本的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
}