函数中的Javascript if语句是否覆盖全局变量？

Question

我试图创建一个静态导航面板,当页脚到达页面内容的末尾时,该面板在页脚底部变为绝对.

当我为wordpress开发时,页面的高度可能不同,所以当导航面板与页脚"碰撞"时,我试图触发绝对定位.

到目前为止,我已经使用了此处找到的代码

 function collision($archive, $footer){

    var archivexPos = $archive.offset().left;
    var archiveyPos = $archive.offset().top;
    var archiveHeight = $archive.outerHeight(true);
    var archiveWidth = $archive.outerWidth(true);
    var archiveb = archiveyPos + archiveHeight;
    var archiver = archivexPos + archiveWidth;

    var footerxPos = $footer.offset().left;
    var footeryPos = $footer.offset().top;
    var footerHeight = $footer.outerHeight(true);
    var footerWidth = $footer.outerWidth(true);
    var footerb = footeryPos + footerHeight;
    var footerr = footerxPos + footerWidth;

    if (archiveb < footeryPos || archiveyPos > footerb || archiver < footerxPos || archivexPos > footer) return Boolean = false;
    return Boolean = true;

并使用布尔的全局变量传递给此函数

$(window).on('scroll', function() {

    var scrollmath = Math.round($(window).scrollTop());
    var archiveValue = scrollmath + 48;
    var archiveBottom = archiveValue + 'px';

    console.log('collision boolean', Boolean)


    if (Boolean = false) {
        $('#archive').css('position', 'fixed');
        $('#archive').css('top', '48px');   
    } else {
        $('#archive').css('position', 'absolute');
        $('#archive').css('top', archiveBottom);    
    }  

我的问题是if语句似乎是在创建另一个布尔变量？当我发表评论时,我可以看到控制台按预期报告布尔变量.然而,当我离开它并且它们碰撞时会发生这种情况

什么事发生在这里？

Answer 1

发生的主要事情是你=用于比较.JavaScript使用==(或===),而不是=.=永远是任务.

但是在测试布尔值时,你不需要==或者!=无论如何,只需直接使用布尔值:

if (flag) {
    // It was true
} else {
    // It was false
}

或者,如果您只是测试错误:

if (!flag) {
   // flag was false
}

(请注意,由于JavaScript并强制类型转换,这也将包含比布尔其它数值变量的工作:任何truthy值强制转换到true,任何falsy值强制转换到false该falsy值.0,"",NaN,null,undefined,,当然false,所有其他值是真的.)

另外:Boolean对于变量名称来说不是一个好选择,因为它是JavaScript标准库(函数)的一部分.

此外,您当前的collision功能做两件事:

1. 它设置Boolean为true或false

2. 它返回它设置的值

一般来说,在所有其他条件相同的情况下,最好是函数不具有这样的副作用.如果调用者想要设置Boolean函数的返回值,他/她可以,不需要函数来执行它 - 它已经返回了值.

最后:全局变量通常是要避免的.浏览器上的全局命名空间非常拥挤,很容易产生冲突(例如,全局调用name可能无法按预期工作,因为已经存在name全局[它是窗口的名称]).