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(这个),但我不明白要用什么替换它.请注意,这不是因为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中没有块级范围),并且函数语句也不总是最佳选择.