javascript - 为什么这些 "this"和 "that"变量都未定义？

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。

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

SITE.initialize();

但是，变量“fadeTime”是局部变量，而不是“SITE”对象的属性。因此，将“fadeTime”引用为“SITE”对象的属性也会导致未定义。

在“初始化”函数中，您可以这样做:

var that = this;

this.fadeTime = 100;

然后引用“fadeTime”作为“that”的属性就可以了。