javascript このthisは一体?

Question

<div class="container">
  <div id="myImages" class="gallery">
    <ol>
      <li data-image="img1">
        <img src="" alt="">
      </li>
      <li data-image="img2">
        <img src="" alt="">
      </li>
      <li data-image="img3">
        <img src="" alt="">
      </li>
    </ol>
  </div>
</div>

<script type="text/javascript">
function test(root) {
  const images = root.querySelectorAll('[data-image]');
  function onClickImage () {
    console.log(this);
  }

  images.forEach(i => {
    i.addEventListener('click', onClickImage);
  });
}

const elem = document.getElementById('myImages');
test(elem);
</script>

上記のようなコードがあったとしてメソッドonClickImageでthisをconsoleで吐いているのですが、結果は

<li data-image="img1"><img src="" alt=""></li>

になります。このthisはグローバルオブジェクトではないということでしょうか？
なぜこのthisがこういった結果になるか、教えていただけませんでしょうか？
よろしくお願い致します。

Comments

[wwbQzhMkhhgEmhU]

まずは基本↓
JavaScript の this を理解する多分一番分かりやすい説明 - Qiita
https://qiita.com/takkyun/items/c6e2f2cf25327299cf03

ただイベントリスナーの呼び出しはユーザーがするわけではないのでコードがなく、.の前は何だったんだ！？となりますが、普通にイベントを受けたオブジェクトになるようです。

[kirokira]

こちらのURLを拝見させて頂きました。ありがとうございます。
ただ一つわからないのは
```
test(elem);
```
としていて.の前になにも指定していないのでwindowオブジェクト?になるのではないかな？と思った次第です。wwbQzhMkhhgEmhUさんがおっしゃっている普通にイベントを受けたオブジェクトとは
forEachで回した変数iという認識でよろしいでしょうか？

[wwbQzhMkhhgEmhU]

testの中では、各LI要素のclickイベントに対して、onClickImageをイベントハンドラとして登録しているだけです。実際にLI要素がクリックされたときにonClickImageが呼ばれます。この呼び出しはユーザーコードではなく、ブラウザが呼び出しているわけですから、.の前に何がついているか分かりませんよね？
しかし、通常の想定通り、LI要素オブジェクトが.の前についているのと同じ挙動をする、ということです。
ただ、このタイミングでのthisは昔からバグりやすいと言われているので、私も使ったことはないです。

[wwbQzhMkhhgEmhU]

あ、まともな回答ついてましたね。
think49さんの方の回答を参考にしてください。

Answer 1

addEventListenerとコールバック関数

コールバック関数 内の this 値はコールバック関数を呼び出している関数側で制御されている場合があります。
つまり、addEventListenerの仕様を調べて下さい。

• EventTarget.addEventListener() - Web API | MDN

呼び出し方によって例外はありますが、基本的には、event.currentTarget と等価という認識で良いと思います。

event.currentTarget === this

Strict Mode

このthisはグローバルオブジェクトではないということでしょうか？

関数呼び出しした際の規定値として、グローバルオブジェクトと認識されているようですが、Strict Modeでは undefined になります。

• Strict モード - JavaScript | MDN

Re: kirokira さん

Answer 2

グローバルオブジェクトをどのようなイメージで使われているのか今一つわかりませんが、
thisはイベントが発生した自身をさしています。
複数同じfunctionを呼び出すようにされているようなので、今は最初の要素をクリックした結果<li data-image="img1"><img src="" alt=""></li>が出ているだけで、クリックする要素によって出力内容がそのクリックした要素に変わるはずです。

Comments

[kirokira]

<li data-image="img1"><img src="" alt=""></li>
もオブジェクトの一つということでしょうか？

[think49]

> グローバルオブジェクトをどのようなイメージで使われているのか
グローバルオブジェクトは、グローバル変数名のプロパティを持つオブジェクトを指し、Webブラウザにおいては window で参照できます。
質問者が示唆しているのは、おそらく、関数を静的呼び出しした際の this 値の既定値で <script>(function () { console.log(this); }());</script> だと思います。

[think49]

> thisはイベントが発生した自身をさしています。
細かいことですが、個人的には「イベントが発生した要素ノード = event.target」「イベントを定義した要素ノード = event.currentTarget (= this)」 の認識ですね…。

[m.ts10806]

確かにそうですね。補足ありがとうございます。

質問者さん
すごく厳密には違いますが、(jQueryでは$(element名)で取得するので)方向性はそうです。