函数中的Javascript if语句覆盖全局变量？答案

【问题标题】：Javascript if statement in function overwriting global variable?函数中的Javascript if语句覆盖全局变量？
【发布时间】：2016-05-19 12:33:20
【问题描述】：

我正在尝试创建一个静态导航面板，当到达页面内容的末尾时，该面板在页脚之前的底部变得绝对。

当我为 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 语句似乎在创建另一个布尔变量？当我将其注释掉时，我可以看到控制台按预期报告了布尔变量。但是，当我把它留在里面并且它们发生碰撞时，就会发生这种情况

这里发生了什么？

【问题讨论】：

if (Boolean = false) { 不能赋值，只能进行比较。
不，你真正的问题是，你覆盖了布尔类型的构造函数。

标签： javascript jquery html css wordpress

【解决方案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，当然还有false；所有其他值都是真实的。）

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

另外，您当前的 collision 函数做了两件事：

它将Boolean 设置为true 或false
它返回它设置的值

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

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

【讨论】：

完全监督。知道等于操作数，但显然不够清楚，谢谢

【解决方案2】：

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

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

第二。本地变量必须使用 var-Keyword 声明（或 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;
})();

【讨论】：