函数中的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。虚假值为0，""，NaN，null，undefined，当然还有{{{ 1}};所有其他值都是真实的。）

另外：false不是变量名称的好选择，因为它是JavaScript标准库（函数）的一部分。

此外，您当前的Boolean函数执行两项操作：

1. 它将collision设为Boolean或true

2. 返回它设置的值

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

最后：全局变量通常是要避免的。浏览器上的全局命名空间非常拥挤并且很容易发生冲突（例如，一个名为Boolean的全局可能无法按预期工作，因为全局已经有name [这是窗口的名称]）。

Answer 2

不，你真正的问题是，你覆盖布尔类型的构造函数。

第一。坚持编码约定：只有类以大写字母开头。

第二。必须使用var - 关键字（或let用于块范围的变量或const）声明本地变量。
否则你引用周围范围的var;最后，全球范围。

第三。等号：

===表示类型安全包含

3 === 3   //=> true
3 === '3' //=>false

==表示简单比较

3 == '3'  //=> also true now

=表示分配，而不是比较

var foo = 3;

如果它在其他一些代码中，如

var bar = 42 + (foo = 3);
//it works basically like 
var bar = 42 + (function(){
    foo = 3;
    return 3; //NOT FOO!!! not even foo after the assignment
})();

//the same way, that this:
var bar = 42 + foo++;
//works basically like this:
var bar = 42 + (function(){
    var result = foo;
    foo = foo+1;
    return result;
})();