Функция в объекте

Question

JS-folks, У меня проблема с небольшим тестовым скриптом.

Я получил это JS:

var button = { 
    lastClick: 0, 
    nowTime: new Date().getTime(), 
    go: function() { 
     var diff = this.nowTime - this.lastClick; 
     if (diff < 3000) alert('Too fast:' + diff/1000); 
     lastClick = this.nowTime; 
    }.bind(this) 
}; 

И этот HTML:

<input type="button" value="Go" onClick="button.go();" /> 

go -функции следует использовать значение nowTime и lastClick от моего button -объекта, но они неопределенных. Кто-нибудь может мне помочь?

JS-Fiddle

Answer 1

Это потому, что this не определен, когда вы делаете привязку (так вы связываете с window).

Вы можете сделать это:

var button = { 
    lastClick: 0, 
    nowTime: new Date().getTime() 
}; 
button.go = function() { 
    var diff = this.nowTime - this.lastClick; 
    if (diff < 3000) alert('Too fast:' + diff/1000); 
    this.lastClick = this.nowTime; 
}.bind(button); 

Вы также пропуская ни this. перед тем lastClick.

Альтернативой является использование закрытия/завода:

var button = (function(){ 
    var lastClick = 0; 
    var nowTime = new Date().getTime(); 
    return { 
    go: function() { 
     var diff = nowTime - lastClick; 
     if (diff < 3000) alert('Too fast:' + diff/1000); 
     lastClick = nowTime; 
    } 
    } 
})(); 

разницы (которая может быть или не быть преимуществом для вас) является то, что внутреннее состояние кнопки спрятано в этой версии (поля обычно называются «частными»).

Если вы хотите nowTime, чтобы всегда быть в текущее время, не храните его:

var button = (function(){ 
    var lastClick = 0; 
    return { 
    go: function() { 
     var nowTime = new Date().getTime(); 
     var diff = nowTime - lastClick; 
     if (diff < 3000) alert('Too fast:' + diff/1000); 
     lastClick = nowTime; 
    } 
    } 
})();