JavaScriptのスクリプト内でのthisの参照元の原理がわかりません。

以下のような、STARTボタンを押した後にSTARTボタンがSTOPボタンに切り替わるスクリプトを組みました。

JavaScript
1<body>
2        <div class="container">
3            <p id="timer">00:00:00</p>     
4            <div>
5                <button id='start_stop' class="btn btn-lg btn-primary">START</button>
6            </div>
7        </div> 
8        <script>
9                var startClick = function() {
10                     start = new Date();
11                     var seconds = start.getSeconds();
12                     var minutes = start.getMinutes();
13                     var hours = start.getHours();   
14
15                    this.innerHTML = "STOP";
16              
17                   document.getElementById('timer').innerHTML = hours + ':' + minutes + ':' + seconds;
18                }
19
20               document.getElementById('start_stop').addEventListener('click', startClick, true);
21        </script>
22</body>

この上記のスクリプトでstartClick関数内で、this.innerHTML = "stop";　と定義しているのですが、
このコードのthisがdocument.getElementById('start_stop')　を参照しているように感じるのですが、
なぜ、thisがdocument.getElementById('start_stop')　を参照しているのかがわかりません。
なぜ、startClick関数内でthis.innerHTML = "stop";　と定義しているのにthisがdocument.getElementById('start_stop')　を参照しているのでしょうか？

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

回答3件

質問されている

なぜ、startClick関数内でthis.innerHTML = "stop";　と定義しているのにthisがdocument.getElementById('start_stop')　を参照しているのでしょうか？

に端的に答えるとすれば、そうなるようにaddEventListener というメソッドが作られているからです。MDN の addEventListener の説明にも以下のように書かれています。

ハンドラー関数を addEventListener() を使って要素に装着したとき、ハンドラーの中の this の値は要素への参照となります。

要点としては、functionで宣言された関数あるいは関数式の本体における this は、その関数がどのような状況下で呼ばれたかによって変わるということですが、そのような thisの特性を意識するためのthisの言い表し方があります。JQueryの作者John Resigさんは著書「JavaScript Ninjaの極意ライブラリ開発のための知識とコーディング」の中で、以下のようにthisを呼び出しコンテクストと呼ぶことを提案しています。

this パラメータが指し示すものは、実際には（Javaのように)その関数が宣言された方法によって定義されるのではなく、その関数が呼び出された方法によって定義される。だから thisは呼び出しコンテクスト（invocation context)と呼ぶのが正しい。

以上、同著 3-3 「関数の呼び出し」　P.52から引用

投稿2022/07/06 08:14

退会済みユーザー

総合スコア0

重箱の隅ですが。

Element: click イベント - Web API | MDN
の通り、コールバック関数にMouseEventインターフェースでイベントに係わる情報が伝達させるので、
var startClick = function(_event) { などとするとMouseEventインターフェースを受け取れますよ。

アロー関数式の話は、
アロー関数式 - JavaScript | MDN
もどうぞ。

投稿2022/07/06 08:10

退会済みユーザー

総合スコア0

ベストアンサー

クリックイベントのCallback内では、基本的にはクリックイベントが発火したエレメントが「this」になります。
「startClick」関数は定義こそ、クリックイベント外にありますが、実際に動作する際は「#start_stop」のコールバック関数として動作するため、「this」が「#start_stop」になります。

javascript
1var startClick = function() {
2    start = new Date();
3    var seconds = start.getSeconds();
4    var minutes = start.getMinutes();
5    var hours = start.getHours();   
6
7    this.innerHTML = "STOP";　// クリックイベントのコールバックとして指定する関数であれば、ここのthisはクリックイベントが発火したエレメントになる。
8              
9    document.getElementById('timer').innerHTML = hours + ':' + minutes + ':' + seconds;
10}
11
12document.getElementById('start_stop').addEventListener('click', startClick, true);　// startClickは実際にはこのクリックイベントで動作する。

基本的にと記載したのは、コールバックに与える関数の定義によって変化するからです。
下記のようにアロー関数式として定義した場合は、この限りではありません。

javascript
1var startClick = () => {
2    start = new Date();
3    var seconds = start.getSeconds();
4    var minutes = start.getMinutes();
5    var hours = start.getHours();   
6
7    this.innerHTML = "STOP";
8              
9    document.getElementById('timer').innerHTML = hours + ':' + minutes + ':' + seconds;
10}
11
12document.getElementById('start_stop').addEventListener('click', startClick, true);　// startClickは実際にはこのクリックイベントで動作するが、thisは「start_stop」じゃない。