Javascript / jsLint：当使用“use strict”时，用什么替换jQuery（this）; [英] Javascript/jsLint: What to replace jQuery(this) with when using "use strict";

问题描述

当我使用jslint验证以下代码时，我收到以下错误。

When I validate the following code with jslint I get the following errors.

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：严格违规。

Problem at line 4 character 29: Strict violation.

 liMegaPosition = jQuery(this).position();  

第5行问题56：严格违规。

Problem at line 5 character 56: Strict violation.

divMegaOffset = { top: liMegaPosition.top + jQuery(this).height(), left: liM...

第6行问题12：严格违规。

Problem at line 6 character 12: Strict violation.

jQuery(this).find("div").offset(divMegaOffset);

第8行问题12：严格违规。

Problem at line 8 character 12: Strict violation.

jQuery(this).addClass("hovering");

我猜这是因为使用了jQuery（这个）但我不明白用什么来代替它。请注意，这是 not ，因为jQuery未被声明为全局。

I'm guessing that it's because of the use of jQuery(this) but I don't understand what to replace it with. Note that this is not because jQuery isn't declared as a global.

推荐答案

我认为问题是你使用这个不在方法内。以下代码

I think the problem is that you use this not inside of a method. The following code

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

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

will give you no errors or warnings.

更新：还有一个版本与原版非常接近，也没有错误或警告：

UPDATED: One more version, which is very close to your original one, also has not errors or warnings:

/*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版本此处）：

UPDATED 2: I find the question interesting for understanding. So I look through ECMAScript standard . I find the following in the "Annex C (informative) The Strict Mode of ECMAScript" (see better in HTML version here):

如果在严格模式代码中评估此，则此值为
未被强制转换为对象。 null 或未定义的此值不是
转换为全局对象且原始值未转换为
包装对象。 this 值通过函数调用
传递（包括使用 Function.prototype.apply 和
调用Function.prototype.call ）不要强制将此值传递给
对象（10.4.3,11.1.1,15.3.4.3,15.3.4.4）。

If this is evaluated within strict mode code, then the this value is not coerced to an object. A this value of null or undefined is not converted to the global object and primitive values are not converted to wrapper objects. The this value passed via a function call (including calls made using Function.prototype.apply and Function.prototype.call) do not coerce the passed this value to an object (10.4.3, 11.1.1, 15.3.4.3, 15.3.4.4).

我认为这是JSLint错误的原因。

I suppose that it is the reason of the JSLint error.

原因如果你要关闭严格模式，代码会有没有更多错误：

Of cause if you would switch off the strict mode the code will have no more errors:

/*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 以及在此中使用的可能性许多人似乎怀疑功能表达。今天我又收到了一条评论。所以我创建了非常简单的演示

UPDATED 3: It seems that impossibility of the usage of this in the function statement and the possibility of the usage of this in the function expression seems suspected for many people. Today I received one more comment about this. So I created very simple demo

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

    test();
}());

你可以测试它这里在IE9中，演示显示警告文本[对象窗口]，在当前版本的Chrome和Firefox上，您将看到未定义。

You can test it here that in IE9 the demo display alert with the text "[object Window]" and on the current versions of Chrome and Firefox you will see "undefined".

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

So the problem with the usage of this in function statement is not "a jslint thing". It's real problem which you should take in considerations during development of your JavaScript programs.

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

I personally prefer to use function expression and almost never use more function statements. I think that the people who come from another program languages (like me too) try at the beginning to use the same construction which was good in your favorite languages. Only later one finds out that definition of variables in block is bad (there are no block level scope in JavaScript) and that function statements is not always the best choice too.

这篇关于Javascript / jsLint：当使用“use strict”时，用什么替换jQuery（this）;的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！