Почему эти «эти» и «эти» переменные не определены?

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

Когда ваши «щелчок» обработчики вызываются, this будет относиться к элементу DOM, участвующих. Поскольку элементы DOM обычно не имеют свойства «fadeTime», значение равно undefined.

В вашем объявлении «этого» отсутствует ключевое слово var. Следовательно, переменная является глобальной. Это относится к «SITE» объекта, если это «инициализировать» функция вызывается в вероятном образом:

SITE.initialize(); 

Однако переменная «fadeTime» является локальной переменной, а не свойство «SITE» объекта. Поэтому, ссылаясь на «fadeTime» как свойство объекта «САЙТ», вы также получаете undefined.

В функции «инициализация», вы можете сделать это:

var that = this; 

this.fadeTime = 100; 

Затем ссылки на «fadeTime» как свойство «что» будет работать.

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;

вместо

вар fadeTime = 100;