クラスの関数を動作させたい

javascriptのクラスの勉強をしております。
何時何分何秒という時間の表示をするにあたって、それぞれ（getHours、getMinutes、getSeconds）の一桁目を0～10未満だったら「0」と表記させたいのですが（例　01 : 02 : 03）、その関数（set2dig）がどうも

Uncaught ReferenceError: set2dig is not defined at showClock (greeting.js:26)

というエラーになってしまいます。
クラスの場合、このset2dig関数はどのように組み込んでいけばいいのでしょうか？
因みにset2dig関数無しでやってみると、一桁目の0表記はありませんがうまく実装しているようです。

クラスについて、正直まだよくわかっていない部分が多いのでご教示いただければ幸いです。

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
  <meta charset="utf-8">
  <title>javascriptの練習</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
  </head>
  <body>
		<div id="greetingTime" class="mt-5 alert alert-success" role="alert">
  			A simple success alert—check it out!
		</div>
		<div id="btnCenter" class="d-flex justify-content-center">
			<button type="button" class="btn btn-info" data-time="now">押してくださいな</button>
		</div>
	<script src="scripts/greeting.js" defer></script>
  </body>
</html>

greeting.js

(() => {
	class RealTime{
		constructor(obj){
			const greetingTime = document.getElementById(obj.hookName1);
			setInterval(this.showClock, 1000)
			console.log(this.showClock)
			document.getElementById('btnCenter').addEventListener('click', (e) => this.isatu(e));
		}
　　　　//問題の関数
		set2dig(num){
				let twoDig;
				if(num < 10){ twoDig = "0" + num; }
				else{ twoDig = num; }
				return twoDig;
		}
        //何時何分何秒の部分
		showClock(){
			let now = new Date();
			let hr = this.set2dig(now.getHours());
			let mi = this.set2dig(now.getMinutes());
			let sc = this.set2dig(now.getSeconds());
			let clock = `只今の時刻　${hr}:${mi}:${sc}`;
			greetingTime.innerHTML = clock;
		}
		isatu(e){
			let now = new Date();
			let hr = now.getHours();
			let mi = now.getMinutes();
			let sc = now.getSeconds();
			if(hr >= 5 && hr <= 10){
				window.alert('おはようございます')
			}else if(hr >= 11 && hr <= 16){
				window.alert('こんにちは')
			}else if(hr >= 17 && hr <= 21){
				window.alert('こんばんは')
			}else{
				window.alert('おやすみなさい')
			}	
		}
	}
	const mamyPoco = new RealTime({
			hookName1: '#greetingTime'
	})
})();

think49

2021/01/29 03:49

> Uncaught ReferenceError: set2dig is not defined at showClock (greeting.js:26) ReferenceErrorではなく、TypeErrorが発生するコードに読めるのですが、確認したコードは本当に質問文に書かれたコードですか？ this.set2digをset2digに書き換えれば、ReferenceErrorが発生すると思いますが…。

of_the_Europa

2021/01/29 05:25

すみません、そこは間違えてました。 this.set2dig　→　TypeError set2dig　　　→　ReferenceError ご指摘の通りこのエラーで合っております。ありがとうございますm(__)m

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

回答1件

ベストアンサー

setIntervalのコールバックのとり方がおかしいのでは？

javascript
1setInterval(this.showClock, 1000)
2↓↓↓
3setInterval(()=>this.showClock(), 1000)
4
5//もしくは
6setInterval(this.showClock.bind(this), 1000)

投稿2021/01/29 03:20

編集2021/01/29 03:21

yambejp

総合スコア116724

of_the_Europa

2021/01/29 07:38

>setInterval(this.showClock.bind(this), 1000) こちらで無事思うような動作ができました。ありがとうございますm(__)m まだbindメソッドに対して理解が乏しいのですが、今回のbindの中のthisは、showClock内で定義したset2dig関数を指しているということで、認識としては合っていますか？再度の質問で、度々お手数をおかけします。

yambejp

2021/01/29 08:00

いえ、bindするthisはclass RealTimeです。 bindしないでsetIntervalのコールバックに直接this.showClockを指定すると showClockが参照するthisはwindowになってしまいます

of_the_Europa

2021/01/29 08:43

まだ理解するのに慣れていない部分がありますが、つまり参照する範囲が「 this.showClock() 」では広すぎるということでしょうか。因みにイベントリスナーのこの部分「 (e) => this.isatu(e) 」も、「 this.isatu.bind(this) 」これでもできるということは分かってきました。

yambejp

2021/01/29 08:46

回答の最初にもどりますが、コールバックの指定方法がおかしいのですきちんとsetInterval(()=>this.showClock(), 1000) で呼び出せばthisはbindしなくてもクラス自信を参照しますよね？

of_the_Europa

2021/01/29 09:34

setInterval(()=>this.showClock(), 1000) このかたちでもできています。 () => こちらもクラス自身を参照しているということですね。

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