javascript - 如何从对象内部调用方法中的变量？

Question

我正在尝试在 javascript 中学习 OOP。

我制作了以下代码，该代码应该返回在某个邮件线程中花费的时间：

function mailThread(url) {
    this.timerIsOn = true;
    this.c = 0;
    this.url = url;
    this.timerCounter = function () {
        if(this.timerIsOn) { //doesnt get called??
            console.log('timerison');
            this.c = this.c + 1;
            console.log(this.c);
        } else {
            this.windowTimeOpen = this.c
        }
    }
    this.timerInterval = setInterval(this.timerCounter, 1000);
}

mailThread1 = new mailThread('test');

然而 this.timerIsOn 似乎返回 undefined 从而阻止计时器运行。我在这里做错了什么？

我也在下面的小提琴中测试了这个：http: //jsfiddle.net/B5vt5/

Answer 1

问题是在名为 timerCounter 的函数范围内，“this”指的是函数本身。做这个：

function mailThread(url) {
    var self = this;
    self.timerIsOn = true;
    self.c = 0;
    self.url = url;
    self.timerCounter = function () {
    if (self.timerIsOn) { //Using self instead of this
        console.log('timerison');
        self.c=this.c+1;
        console.log(self.c);
    } else {
    self.windowTimeOpen = self.c
    }
    }
    self.timerInterval = setInterval(self.timerCounter,1000);
}

mailThread1 = new mailThread('test');

我推荐你看看MDN 对 OOP 的介绍

Answer 2

this不是您在回调中的对象setTimeout，而是全局对象 ( window)。一种解决方案是将其保存在变量中：

var _this = this;
this.timerCounter = function () {
    if (_this.timerIsOn) { 
        console.log('timerison');
        _this.c++;
        console.log(_this.c);
    } else {
         _this.windowTimeOpen = _this.c
    }
}

Answer 3

this.timerCounter是一个函数。当它从它调用setTimeout时给出了window上下文，所以this不是你认为的那样。

你要么需要使用.bind来设置this你想要的。

this.timerInterval = setInterval(this.timerCounter.bind(this),1000);

或者，保存this到变量中：

var that = this;
this.timerCounter = function () {
    if (that.timerIsOn) {
        // use that instead of this
    }
}

this.timerInterval = setInterval(this.timerCounter,1000);