添加时返回为 NaN 的整数答案

【问题标题】：Integer returning as NaN when added添加时返回为 NaN 的整数
【发布时间】：2018-09-24 23:00:13
【问题描述】：

编写一些代码，当创建一个类的实例时，我有一个整数变量会发生一些奇怪的事情：

function Mat(x, y, spawner) {
    this.x = x;
    this.y = y;
    this.val = 1;
    this._spawner = spawner;
    this.newborn = true;
    this.bornTime = 0;
    this.spawnTimer = setInterval("this.bornTime++; console.log(this.bornTime);", 1000);
}

简洁明了的代码；在创建变量实例后的每一秒，它应该将 bornTime 变量增加 1 并记录它。

Mat.prototype.update = function() {
    if (this.bornTime >= 5) {
        this.bornTime = null;
        clearInterval(this.spawnTimer);
        this.newborn = false;
        console.log("Grown!");
    }
}

这个额外的代码会导致这个实例在 5 秒后“增长”，但是当我检查控制台时，它显示 bornTime 不是数字（NaN）。

为什么会这样，有没有我没有看到的解决方案？

【问题讨论】：

标签： javascript timer setinterval nan

【解决方案1】：

setTimeout 代码内部的this 与外部代码不同（更多信息请参见MDN），因此您的代码实际上是在计算undefined++，即NaN。

你必须创建另一个变量，并将一个函数传递给 setTimeout 而不是让它评估一个字符串（顺便说一下，传递一个函数应该更快，并且看起来更好）：

var that = this;
this.spawnTimer = setInterval(function(){
    that.bornTime++; 
    console.log(that.bornTime);
}, 1000);

【讨论】：

在下面查看我对 es6 箭头函数使用的回答，它在 javascript 中解决了这个问题并避免了额外的代码行。 :)

【解决方案2】：

我知道这是 5 年前的问题，但它是 2018 年的问题，这是一个 Es6 语法解决方案，以避免绑定关键字 this 的额外步骤。

this.spawnTimer = setInterval(() => {
    this.bornTime++; 
    console.log(this.bornTime);
}, 1000);

【讨论】：