Javascript「Class」via Prototypes - 變量未定義

我正在使用JavaScript編寫倒數計時器。相當基本。在時間方面只使用setInterval。我使用存儲函數和變量的原型方法編寫它，所以我可以創建一個「類」。Javascript「Class」via Prototypes - 變量未定義

我以這種方式調用代碼。

function testTimer() { 
    var newTimer = new CDTimer($("#voteTimer"),30,""); 
    newTimer.start(); 
}

當下面代碼運行，console.log正在打印undefined或NaN。

function CDTimer (target, duration, callback) { 
    this.target = target; 
    this.duration = duration; 
    this.callback = callback; 
} 

CDTimer.prototype.start = function() { 
    this.start = new Date().getTime(); 
    this.interval = setInterval(this.update, 1000); 
} 

CDTimer.prototype.update = function() { 
    console.log(this.duration, this.start); 
    this.elapsed = this.duration - (new Date().getTime() - this.start)/1000 

    if (this.elapsed < 0) { 
      clearInterval(this.interval); 
      this.callback(); 
    } 
    else { 
     console.log(this.elapsed); 
     $(this.target).text(this.elapsed); 
    } 
} 

CDTimer.prototype.stop = function() { 
    clearInterval(this.interval); 
}

我一定錯過了一些愚蠢的東西。我的變量及其價值發生了什麼？

感謝您的洞察力。

來源

2012-09-19 Morrowind789

你期望'this'指什麼？你還沒有用你的構造函數創建任何對象。 –

從setInterval調用的函數提供了一個this這是窗口，而不是定時器。該MDN提供a detailed explanation

CDTimer.prototype.start = function() { 
    this.start = new Date().getTime(); 
    var _this = this; 
    this.interval = setInterval(function(){_this.update()}, 1000); 
}

注：

你可以做到這一點。

編輯如下評論：如果你不想創建啓動功能一個新的變量，你可以這樣做：

CDTimer.prototype.start = function() { 
    this.start = new Date().getTime(); 
    this.interval = setInterval(function(_this){_this.update()}, 1000, this); 
}

但我不知道可讀性被這一舉動的改進變量的創建，它與IE不兼容（如果你不打補丁，請參閱MDN的解決方案）。

來源

2012-09-19 09:27:20

這正是答案。我現在看到你指出的問題。 'this'不是指'CDTimer'，因爲它在'setInterval'的'function（）'範圍內。正確？另外，感謝將我與MDN聯繫起來，我不知道它存在。 – Morrowind789

我想知道，你可以通過將自己的引用傳遞給'function（）'來跳過創建一個變量。像'function（this）{...}'？ – Morrowind789

新瀏覽器的解決方案是創建[綁定]（https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind）函數。但我不推薦它，它不是很輕。 –

Javascript「Class」via Prototypes - 變量未定義

回答

相關問題