Progressbar原型中的JavaScript事件處理程序出現未定義的值

我目前正在構建一個JavaScript對象，它創建一個進度條並允許使用某些元素上的點擊偵聽器來增加進度欄值。
我有一個問題，當我點擊一個應增加當前值的按鈕時，它說，當我將此值警告給窗口時，值爲NaN，我不知道爲什麼。Progressbar原型中的JavaScript事件處理程序出現未定義的值

這裏是我的代碼：

//Progress Bar 
var ProgressBar = function(element, startVal, endVal, step, addLefts, addRights) { 
    this.element = element; 
    this.endVal = endVal; 
    this.currentVal = startVal; 
    this.step = step; 
    this.addLefts = addLefts; 
    this.addRights = addRights; 
    var self = this;  
} 

ProgressBar.prototype.initializeProgressBar = function() { 
    jQuery(this.element).progressbar({ 
     value : this.currentVal 
    }); 
    for(var i = 0; i < this.addLefts.length; i++) { 
     this.addLefts[i].addEventListener("click", this.removeAmount, false); 
    } 
    for(var i = 0; i < this.addRights.length; i++) { 
     this.addRights[i].addEventListener("click", this.addAmount, false); 
    } 
} 

ProgressBar.prototype.addAmount = function() { 
    this.currentVal += this.step;  
    alert(this.currentVal); 
} 

ProgressBar.prototype.removeAmount = function() { 
    this.currentVal -= this.step; 
    alert(this.currentVal); 
}

和代碼來創建對象的實例

var addLefts = document.getElementsByClassName("btn-left"); 
var addRights = document.getElementsByClassName("btn-right"); 
var progressBar = new ProgressBar("#progress-bar", 0, jQuery(".signup-part").length, 1, addLefts, addRights); 
progressBar.initializeProgressBar();

爲什麼是「this.currentVal」屬性從addAmount和removeAmount函數中返回的NaN ？

來源

2014-11-04 devoncrazylegs

這意味着要麼的'this.currentVal + = this.step'或'this.currentVal - = this.step'導致了問題..檢查值和this.currentVal'和''類型this.step'在操作 – 2014-11-04 10:17:02

之前，您將失去「this」。放一個console.log（this）;在功能的開始處... – 2014-11-04 10:18:47

當您添加或this.addAmount爲this.removeAmount偶數t處理程序，它將在元素的上下文中調用，而不是ProgressBar實例。

要解決此問題，您可以使用bind()強制它在正確的上下文中調用。

for(var i = 0; i < this.addLefts.length; i++) { 
    this.addLefts[i].addEventListener("click", this.removeAmount.bind(this), false); 
}

來源

2014-11-04 10:24:19 Scimonster

你需要，如果你使用的東西，你這個綁定到你的函數...

this.addRights[i].addEventListener("click", this.addAmount.bind(this), false);

喜歡強調你可以做一些更棘手，有一個： -

ProgressBar.prototype.change = function(sign) { 
    this.currentVal += (this.step * sign); 
}

然後： -

this.addLefts[i].addEventListener("click", _.partial(this.change,-1).bind(this), false); 
this.addRights[i].addEventListener("click", _.partial(this.change, 1).bind(this), false);

來源

2014-11-04 10:24:09

Progressbar原型中的JavaScript事件處理程序出現未定義的值

回答

相關問題