bindメソッドの使い方について

JavaScript本格入門[改訂新版]という本を読みながらJSの勉強をしているのですが、
以下のコードにおいて詰まってしまったので質問致します。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>JS</title>
</head>
<body>
	<button id="btn">クリック！</button>
	<script>
		document.addEventListener('DOMContentLoaded', function() {
			var Counter = function(elem) {
				this.count = 0;
				this.elem = elem;
				elem.addEventListener('click', function() {
					this.count++;
					this.show();
				});
			};

			Counter.prototype.show = function() {
				console.log(this.elem.id + 'は' + this.count + '回クリックされました');
			}

			var c = new Counter(document.getElementById('btn'));

		});
	</script>
</body>
</html>

現状、上記のコードでボタンをクリックすると、

Uncaught TypeError: this.show is not a function

at HTMLButtonElement.<anonymous>

というエラーが出ます。

本によると、アロー関数にすると解決するとあり、実際機能します。

elem.addEventListener('click', () => {
		this.count++;
		this.show();
});

しかし同時に、bindメソッドを利用しても解決すると書いてあり、その方法を知りたいです。

よろしくお願いします。

行動規範の内容に同意します

回答2件

ベストアンサー

.bindは、thisを特定のオブジェクトにむすびつける機能です。外側のthisを内側のthisに固定することができます。

javascript
1elem.addEventListener('click', function() {
2  this.count++;
3  this.show();
4}.bind(this));

なお、これらの方法を使うとイベントで本来送られるthisが届かないので、このような解決策もあります。

javascript
1// 外側のthisを別名で使えるようにしておく
2var instance = this;
3elem.addEventListener('click', function() {
4  instance.count++;
5  instance.show();
6});

投稿2017/04/09 06:04

編集2017/04/09 06:05

maisumakun

総合スコア145183

gaisei

2017/04/09 11:52

ご回答ありがとうございました。教えていただいたやり方で解決できました。また、別の解決策も例示していただき大変参考になりました。またいろいろ教えていただけたら幸いですm(_ _)m

行動規範の内容に同意します

bind の使い方は maisumakun さんの回答の通りなので省略しますが、addEventListener には元々、this 束縛のための機構が用意されているので handleEvent を持つオブジェクトを第二引数に指定すればスマートに書けます。
また、第三引数は後方互換性のために省略しない方が良いと思います。

JavaScript
1document.addEventListener('DOMContentLoaded', function() {
2  var Counter = function(elem) {
3     this.count = 0;
4      this.elem = elem;
5      elm.addEventListener('click', this, false);
6   };
7
8  Counter.prototype.show = function() {
9    console.log(this.elem.id + 'は' + this.count + '回クリックされました');
10  };
11
12  Counter.prototype.handleEvent = function() {
13     this.count++;
14     this.show();
15  };
16
17  var c = new Counter(document.getElementById('btn'));
18});