与javascript中的箭头函数混淆

这是我使用window.setinterval增加intVariable值的代码

var Arrow=（函数（）{
函数箭头（）{
this.intVariable=1；
this.itemId=-1；
这个时间间隔=25；
}
Arrow.prototype.activateTimer=函数（）{
if（this.itemId==-1）{
setInterval（this.showTimer（），this.interval）；
}
};
Arrow.prototype.showTimer=函数（）{
this.intVariable+=this.interval；
console.log（this.intVariable）；
};
返回箭头；
}());
var arrow=新箭头（）；
arrow.activateTimer（）您可以直接使用函数引用（不使用括号）

通过使用函数调用

window.setInterval(this.showTimer(), this.interval);
//                               ^^

插入函数调用的结果，而不是函数本身

当你使用

window.setInterval(() => this.showTimer(), this.interval);

插入函数时没有实际调用它

window.setInterval(() => this.showTimer(), this.interval);

就像

window.setInterval（函数（）{this.showTimer（）}，this.interval）

window.setInterval（this.showTimer（），this.interval）不起作用，因为您只需要传递
this.showTimer
，但您正在动态调用它
您应该为interval提供函数，而不是函数的返回

无论何时编写
window.setInterval（this.showTimer（），this.interval）
事实上，你正在这样做

var returnValue = (function () {
  this.intVariable += this.interval;
  console.log(this.intVariable); // You get your log for once
})() // -> null
window.setInterval(returnValue/*null*/, this.interval);

然后
setInterval
尝试在每次
this.interval
之后调用
null
，这不会在控制台上给您一个错误

但当您使用arrow调用它时，this.showTimer（）表示：

var returnValue = function() {
  this.showTimer();
} // -> Function
window.setInterval(returnValue/*Function*/, this.interval);

您正在为interval提供一个函数


此外，如果您忘记将函数绑定到此
作用域，您将无法访问您的作用域。因此，您可能会看到大量的
NaN
s

setInterval
尝试调用注册函数的全局作用域为
window
。因此，当您在函数中写入
此
时，它将把
此
作为
窗口
。因此，每当您尝试记录
this.intVariable
时，它都会尝试记录未定义的
window.intVariable

因此，我们应该将函数绑定到当前对象范围。因此，无论何时使用
此
，您的范围都将绑定到当前对象（箭头）。然后得到当前的箭头
intVariable

但是，无论何时编写
（）=>
，您都会像上面那样创建匿名函数，并且已经将其作用域连接到对象中。所以您不需要额外的绑定

这是你的解决方案

    var Arrow = (function () {
        function Arrow() {
            this.intVariable = 1;
            this.itemId = -1;
            this.interval = 25;
        }
        Arrow.prototype.showTimer = function () {
            this.intVariable += this.interval;
            console.log(this.intVariable);
        };
        Arrow.prototype.activateTimer = function () {
            if (this.itemId === -1) {
                window.setInterval(this.showTimer.bind(this), this.interval);
            }
        };
        return Arrow;

}());
var arrow = new Arrow();
arrow.activateTimer();

这里有一个
有父母和没有父母打电话有什么区别？是的，这很有效。但是我很困惑，我是如何使用这个引用的，那么bind（这个）有什么不同呢。另外，如果使用类似（）的arrow方法=>showtimer（），那么它也可以工作。所以我需要知道这两种方法为什么有效/@yashshhukla解释了更多细节，编辑了答案。我已经理解了70%，但仍然混淆了这两种方法，（）=>和bind（这两种方法）的功能不完全确定。你知道我在哪本书或博客上能找到这方面的好信息吗？非常感谢你的帮助help@yashshukla我无法为您找到一个好的源代码，但您可以检查，这给了我NAN在日志中可能是因为showTimer中的代码，如果您在内部使用此关键字，则两者在函数和箭头函数中的行为不同
    var Arrow = (function () {
        function Arrow() {
            this.intVariable = 1;
            this.itemId = -1;
            this.interval = 25;
        }
        Arrow.prototype.showTimer = function () {
            this.intVariable += this.interval;
            console.log(this.intVariable);
        };
        Arrow.prototype.activateTimer = function () {
            if (this.itemId === -1) {
                window.setInterval(this.showTimer.bind(this), this.interval);
            }
        };
        return Arrow;

}());
var arrow = new Arrow();
arrow.activateTimer();