javascript - 将变量设置为“未定义”？

Question

我有一个粘性标题，当用户向下滚动时，它会停留在页面顶部。

如果用户滚动过去某个点，我想制作一个隐藏标题菜单部分的脚本。如果用户点击屏幕顶部，我还想让菜单重新出现，因此我编写了这个脚本：

var lastmargintop = 0;  

$(document).scroll(function() {


var margintop = $('#stickyheader').css('marginTop');
var margintop = parseInt(margintop, 10);

if(margintop > 10){
  $('#menu').hide('fast');
}

if (lastmargintop < 10){
  $('#menu').show('fast');
}

console.log(lastmargintop);
var lastmargintop = margintop;

});

但变量lastmargintop显示为undefined。我不确定为什么会这样。谁能告诉我为什么？

Answer 1

原因是 JavaScript 变量声明被提升了。所以即使你var lastmargintop低于console.log()，它的行为就像声明部分在上面一样。

所以这...

var lastmargintop = 0;  

$(document).scroll(function() {
    //  ...removed code...

    console.log(lastmargintop);  // expecting 0? you'll get undefined
    var lastmargintop = margintop;

});

实际上是这样解释的：

var lastmargintop = 0;  

$(document).scroll(function() {
    var lastmargintop;

    //  ...removed code...

    console.log(lastmargintop);  // Probably clearer now why you get undefined
    lastmargintop = margintop;

});

注意var lastmargintop被移到函数的顶部。这在显式变量声明中隐式发生。

Answer 2

首先，如果您希望将新值lastmargintop打印到控制台，然后再重新定义它。另外，我不会margintop像那样定义两次，然后在定义中调用它。我会在那里使用一个新的变量名。