代码之家 › 专栏 › 技术社区 › Arvind M.

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

this dom function html javascript

Arvind M. · 技术社区 · 7 年前

我对javascript有点陌生,今天我正在开发一个基本上可以切换值并将其显示为警报的函数,但我偶然发现了一个与真/假和0/1相关的奇怪的javascript行为。

下面的代码,当用户单击toggle anchor link时,它似乎不会切换值,警报总是给出“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 我在函数中使用的指针还是什么?。

4 回复 | 直到 7 年前

Isac 7 年前

问题是你的功能 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()

因此,要使其工作,您只需更改其名称。但是 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();

但是使用由于与您所经历的原因非常相似的原因,不鼓励使用对象 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();

另外,别忘了用分号结束语句,我注意到你几乎没有分号。

Ben 7 年前

既然你是JavaScript新手,你可能还没有听说过,但你应该 know when to use === instead of ==

简而言之,因为 JavaScript is weakly/un-typed 很难知道你是在比较两个相同的东西(数字)还是两个不同的东西(数字和物体):

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

Matthew 7 年前

其他人发表了一些不错的回复,但这是我的两分钱。

您可以在函数中初始化局部变量,该局部变量将初始化一个值,然后在单击按钮时替换该值。您使用 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所指出的,你的 这

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

-1

zhuravlyov 7 年前

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