javaScript中的true/fals -vs int(意外行为)

Question

我是javaScript的新手false和0/1。

以下代码，当用户单击切换锚链接时，它似乎没有切换值，并且警报始终给出" 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代替/fals/fals，则代码出于某种原因工作。

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对象，该对象已经具有具有其自身含义的status属性。

如果您打印了它的类型：

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

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

但是，如果您以不同的命名：

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

它产生正确的类型。

为了使它起作用，您只需要更改其名称即可。但是if else逻辑您必须将boolean倒入!（非），这简化了代码：

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();

另外，不要忘记用半洛龙完成陈述，我注意到你几乎没有。

Answer 2

，由于您是您可能没有听到的JavaScript的新手，但您应该知道何时使用===而不是==（提示：始终）。

，在简而

new Number(10) == 10 // true
new Number(10) === 10 // false

因为：

typeof Number(10) // returns number
typeof 10 // returns number
typeof new Number(10) // returns object

^上面的示例来自https://coderwall.com/p/bqurhg/why-always-use-in-javascript

Answer 3

其他人发布了一些很好的回复，但这是我的两分钱。

您可以在函数中初始化一个本地变量，该变量将初始化一个值，然后在单击按钮时在该值上进行交替。您对this符号的使用似乎在这里不需要。

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

使用此功能时，请始终知道您所指的内容。正如ISAC指出的那样，您的this转介到文档窗口，这似乎是一个问题。

codepen：

https://codepen.io/foozie3moons/pen/ggrbxz?editors = 0010

Answer 4

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