javascript - JavaScript 中的 true/false 与 int(意外行为)

Question

我是 javascript 的新手，今天我正在研究一个基本上可以切换值并将其显示为警报的函数，但我偶然发现了 JavaScript 与 true/false 和 0/1 相关的奇怪行为。

下面的代码，当用户点击切换 anchor 链接时，它似乎没有切换值并且警报总是给出“true”(我认为应该发生):

document.body.innerHTML = '<a href="#" id="toggle"> toggle </a>'+ document.body.innerHTML;
function f() {
    this.status = true;
    var btn = document.getElementById("toggle")
    btn.addEventListener("click", () => {
        if (this.status == true) {
             alert(this.status)
            this.status = false;
        } else {
            alert(this.status)
            this.status = true;
        }

     }, false)
}

f()

但如果我使用 0 和 1 而不是 true/false，代码会出于某种原因工作。

document.body.innerHTML = '<a href="#" id="toggle"> toggle </a>' +document.body.innerHTML;

function f() {
    this.status = 1;
    var btn = document.getElementById("toggle")
    btn.addEventListener("click",()=>{
    if(this.status==1){
         alert(this.status)
         this.status = 0;
    }else{
        alert(this.status)
        this.status = 1;
      }

     },false)
 }

 f()

我不知道这里发生了什么，这是因为我在函数中使用了 this 指针还是其他原因？

Answer 1

问题是你的函数 f 是在没有 new 的情况下调用的，所以 this 指的是 window object ，它已经有一个 status property with its own meaning .

如果你打印它的类型你可以看到这个:

function f() {
    this.status = true;
    console.log(typeof this.status);
 }

 f()

请注意结果是 string 而不是预期的 boolean。

但是如果你给它起不同的名字:

function f() {
    this.myprop = true;
    console.log(typeof this.myprop);
 }

 f()

它产生正确的类型。

因此，要使其正常工作，您只需更改其名称即可。但是你必须反转 boolean 的 if else 逻辑可以变成 !(不是)，它大大简化了代码:

document.body.innerHTML = '<a href="#" id="toggle"> toggle </a>' + document.body.innerHTML;

function f() {
  this.myStatus = true;
  var btn = document.getElementById("toggle");
  
  btn.addEventListener("click", () => {
    this.myStatus = !this.myStatus; //here the value is inverted only with the ! (not)
    console.log(this.myStatus);
  }, false);
}

f();

但不鼓励使用 window 对象，原因与您遇到的原因很相似，并且 myStatus 属性仍存储在那里。

您可以进一步改进解决方案:

document.body.innerHTML = '<a href="#" id="toggle"> toggle </a>' + document.body.innerHTML;

function f() {
  let myStatus = true;
  var btn = document.getElementById("toggle");
  
  btn.addEventListener("click", () => {
    myStatus = !myStatus; //here the value is inverted only with the ! (not)
    console.log(myStatus);
  }, false);
}

f();

另外，不要忘记用分号结束语句，我注意到你几乎没有分号。