Question

为什么以下代码都是：

this.fadeTime
that.fadeTime

未定义，在Javascript类中保存这样的内部变量的最佳方法是什么？

var SITE = SITE || {};
SITE.initialize = function() {

    var fadeTime = 100;
    that = this;

    $('li#linkHome').click(function() {
        resetPageLinks();
        $('li#linkHome').addClass('active');
        resetPages();
        console.log(this.fadeTime); //undefined
        console.log(that.fadeTime); //undefined
        $('div#pageHome').fadeIn(that.fadeTime);
    });
    $('li#linkInfo').click(function() {
        resetPageLinks();
        $('li#linkInfo').addClass('active');
        resetPages();
        $('div#pageInfo').fadeIn(that.fadeTime);
    });
    $('li#linkAbout').click(function() {
        resetPageLinks();
        $('li#linkAbout').addClass('active');
        resetPages();
        $('div#pageAbout').fadeIn(that.fadeTime);
    });

    function resetPageLinks() {
        $('ul.nav li').removeClass('active');
    }

    function resetPages() {
        $('div.sitePage').hide();
    }
}

Answer 1

当您调用“click”处理程序时，this将引用所涉及的DOM元素。由于DOM元素通常没有“fadeTime”属性，因此值为undefined。

您对“那个”的声明缺少var关键字。因此变量是全局的。如果以可能的方式调用“初始化”函数，它引用“SITE”对象：

SITE.initialize();

但是，变量“fadeTime”是局部变量，而不是“SITE”对象的属性。因此，将“fadeTime”称为“SITE”对象的属性也会为您提供undefined。

在“初始化”功能中，您可以这样做：

var that = this;

this.fadeTime = 100;

然后引用“fadeTime”作为“that”的属性。

Answer 2

您可以调用fadeTime，因为它位于初始化函数的范围内。确实不存在this.fadeTime或that.fadetime，因为您没有在此范围内分配变量。

作为旁注，你的fadeTime变量看起来更像是一个常量。在JS中，通常使用所有大写变量名来定义常量：

var MY_CONSTANT = "some-value";

Answer 3

在您的代码中，that引用SITE，即使在事件处理函数中也是如此。因此，that.fadeTime引用SITE.fadeTime - 但SITE.fadeTime永远不会定义。

相反，您可以这样做：

$('div#pageHome').fadeIn(fadeTime);

在您的事件侦听器中，引用您在fadeTime的词法范围中声明的initialize变量，或者您可以

this.fadeTime = 100;

位于initialize的顶部以设置SITE.fadeTime（因此也设置that.fadeTime）。

Answer 4

当你用var标记变量时，它就是一个局部变量。当你想创建一个你可以使用它访问的实例变量时，你必须用

声明变量

this.fadeTime = 100;

而不是

var fadeTime = 100;

为什么这些“这个”和“那个”变量都未定义？

4 个答案: