TypeScriptのthisについて

arrow.js

var Counter = (function () {
  function Counter() {
    var _this = this;
    this.countUp = function () {
      _this.count++;
      alert(_this.count);
    };
    this.countDown = function () {
      _this.count--;
      alert(_this.count);
    };
    this.count = 0;
  }
  return Counter;
})();
window.onload = function (event) {
  var counter = new Counter();
  document.getElementById('count-up').onclick = counter.countUp;
  document.getElementById('count-down').onclick = counter.countDown;
};
//# sourceMappingURL=app.js.map

arrow.ts

class Counter {
  private count: number;

  constructor() {
    this.count = 0;
  }

  countUp = () => {
    this.count++;
    alert(this.count);
  }

  countDown = () => {
    this.count--;
    alert(this.count);
  }
}

window.onload = (event) => {
  var counter = new Counter()

  // counterのthisが「Counterクラス」になる -> this.countが表示される
  document.getElementById('count-up').onclick = counter.countUp;
  document.getElementById('count-down').onclick = counter.countDown;
};

bind.js

var Counter = (function () {
  function Counter() {
    this.count = 0;
  }
  Counter.prototype.countUp = function () {
    this.count++;
    alert(this.count);
  };
  Counter.prototype.countDown = function () {
    this.count--;
    alert(this.count);
  };
  return Counter;
})();
window.onload = function (event) {
    var counter = new Counter();
    var countUpHandler = counter.countUp.bind(counter);
    var countDownHandler = counter.countDown.bind(counter);
    document.getElementById('count-up').onclick = countUpHandler;
    document.getElementById('count-down').onclick = countDownHandler;
};
//# sourceMappingURL=app.js.map

bind.ts

class Counter {
  private count: number;

  constructor() {
    this.count = 0;
  }

  countUp() {
    this.count++;
    alert(this.count);
  }

  countDown() {
    this.count--;
    alert(this.count);
  }
}

window.onload = (event) => {
  var counter = new Counter();

  var countUpHandler = counter.countUp.bind(counter);
  var countDownHandler = counter.countDown.bind(counter);

  // counterのthisが「Counterクラス」になる -> 数値が表示される
  document.getElementById('count-up').onclick = countUpHandler;
  document.getElementById('count-down').onclick = countDownHandler;
};

closure.js

var Counter = (function () {
  function Counter() {
    this.count = 0;
  }
  Counter.prototype.countUp = function () {
    this.count++;
    alert(this.count);
  };
  Counter.prototype.countDown = function () {
    this.count--;
    alert(this.count);
  };
  return Counter;
})();
window.onload = function (event) {
  var counter = new Counter();
  document.getElementById('count-up').onclick = function () {
    counter.countUp();
  };
  document.getElementById('count-down').onclick = function () {
    counter.countDown();
  };
};
//# sourceMappingURL=app.js.map

closure.ts

class Counter {
  private count: number;

  constructor() {
    this.count = 0;
  }

  countUp() {
    this.count++;
    alert(this.count);
  }

  countDown() {
    this.count--;
    alert(this.count);
  }
}

window.onload = (event) => {
  var counter = new Counter()

  // counterのthisが「Counterクラス」になる -> 数値が表示される
  document.getElementById('count-up').onclick = function () { counter.countUp(); }
  document.getElementById('count-down').onclick = function () { counter.countDown(); }
};

error.js

var CountClass = (function () {
  function CountClass() {
    this.count = 0;
  }
  CountClass.prototype.countUp = function () {
    this.count++;
    alert(this.count);
  };
  CountClass.prototype.countDown = function () {
    this.count--;
    alert(this.count);
  };
  return CountClass;
})();
window.onload = function (event) {
  var counter = new CountClass();
  document.getElementById('count-up').onclick = counter.countUp;
  document.getElementById('count-down').onclick = counter.countDown;
};
//# sourceMappingURL=app.js.map

error.ts

class Counter {
  private count: number;

  constructor() {
    this.count = 0;
  }

  countUp() {
    this.count++;
    alert(this.count);
  }

  countDown() {
    this.count--;
    alert(this.count);
  }
}

window.onload = (event) => {
  var counter = new Counter()

  // counterのthisが「button#count-up」になる -> NaN
  document.getElementById('count-up').onclick = counter.countUp;
  // counterのthisが「button#count-down」になる -> NaN
  document.getElementById('count-down').onclick = counter.countDown;
};

index.html

<!DOCTYPE html>

<html lang="ja">
<head>
  <meta charset="utf-8" />
  <title>TypeScript HTML App</title>
  <script src="app.js"></script>
</head>
<body>
  <h1>TypeScript HTML App</h1>

  <div id="content"></div>
  <button type="button" id="count-up">カウントアップ</button>
  <button type="button" id="count-down">カウントダウン</button>
</body>
</html>