javascript - オブジェクト内の機能

Question

JS の皆さん、ちょっとしたテスト スクリプトで問題が発生しました。

私はこの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();" />

-functionは my -objectのとの値goを使用する必要がありますが、 undefinedです。誰でも私を助けることができますか？nowTimelastClickbutton

JS-フィドル

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.beforeもありませんでした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;
    }
  }
})();