JavaScript（Vue.js）のaddEventListenerのスコープについて

Question

アップロードする画像の高さと幅を取得し、その配列を作りたいと思っています。

<template>
  <input type="file" ref="preview" @change="getWidthAndHeight" accept="image/*" multiple>
</template>

export default {
  data() {
    return {
      widthAndHeightArray: [];
    }
  }
  methods: {
    getWidthAndHeight() {
      const files = this.$refs.preview.files;
      for (let i = 0; i < files.length; i++) {
        let image = new Image();
        image.src = URL.createObjectURL(files[i]);
        image.addEventListener('load', function() {
          const widthAndHeight = {
            width: image.naturalWidth,
            height: image.naturalHeight,
          };
          this.widthAndHeightArray.push(widthAndHeight);
        });
      }
    }
  }
}

上のようなコードを書いたのですが（重要な部分以外は省略しています）、

this.widthAndHeightArray.push(widthAndHeight);
の部分で「Cannot read property 'push' of undefined」のエラーがでます。

つまり、widthAndHeightArrayが未定義ですよということです。

widthAndHeightArrayはグローバルな変数のはずですが、addEventListenerの中では使えないという仕様なのでしょうか？

どうすればwidthAndHeightArrayにwidthAndHeightをpushすることができるのでしょうか？

試したこと

ダメもとですがaddEventListenerの代わりにonloadを使ってみましたが同じくダメでした。

Answer 1

イベントハンドラー内でthisを使用する場合、オブジェクト（image）内を指すことになるからだと思われます。アロー関数を使用すれば回避できるのではないでしょうか。

image.addEventListener('load', ()=> {
          const widthAndHeight = {
            width: image.naturalWidth,
            height: image.naturalHeight,
          };
          this.widthAndHeightArray.push(widthAndHeight);
        });

リンク内容
リンク内容

ご参考までに。

Comments

[izaya]

おっしゃる通りアロー関数にすることでthisがdataを参照するようになり、うまくコードが動きました！
thisの参照を確かめるべきでした。。
参考記事まで教えていただいてありがとうございますm(__)m
thisの理解が甘かったようですので、そのあたりもう一度勉強してみます。

[BlueMoon]

解決できて良かったです。自分もvueとJSは勉強中です。

Answer 2

間違えました。

下記の案のようにimage.addEventListener('load', this.handleOnLoad(image));としてしまうと、load時にthis.handleOnLoad(image)が呼ばれるのではなく、その場でthis.handleOnLoad(image) を実行した値が引数として渡されてしまうので誤りでした。失礼しました。

解決案

イベントハンドラ部分を別途methodsの１つとして定義することで問題を回避できそうです。
例えば、methods部分を下記のように実装します。

getWidthAndHeight() {
const files = this.$refs.preview.files;
for (let i = 0; i < files.length; i++) {
let image = new Image();
image.src = URL.createObjectURL(files[i]);
image.addEventListener('load', this.handleOnLoad(image));
}
},
handleOnLoad(image) {
const widthAndHeight = {
width: image.naturalWidth,
height: image.naturalHeight,
};
this.widthAndHeightArray.push(widthAndHeight);
}

解説

widthAndHeightArrayはグローバルな変数のはずですが、addEventListenerの中では使えないという仕様なのでしょうか？

上記に少し認識間違いがあるかもしれません。
あくまでwidthAndHeightArrayはVueコンポーネントに紐づく変数であり、グローバルと呼ぶには語弊があります。
またthisはVueコンポーネントの中であまりにも多用するため勘違いしそうになりますが、必ずしもVueコンポーネントで定義したdataやmethodがある場所を参照するものではありません。thisが何を指すかについて解説すると大変パターンが多くなるので気になれば調べてみてください。
izayaさんが実装しているaddEventlistenerの第２引数に設定しているfunction内にあるthisも期待した所を参照できていません。ここでのthisはおそらくimageを指しています。function内でconsole.log(this)することでそれを確かめることができます。

以上でご説明したとおり、コードが上手く行かない原因はthis.widthAndHeightArrayでdata内のwidthAndHeightArrayを参照できていないことです。
こちらの解決策は単純に、確実にwidthAndHeightArrayを参照できるmethodとして別でロジックを定義しておいて、解決案でお伝えしたようにimage.addEventListener('load', this.handleOnLoad(image));のように呼び出してあげることです。

何か不明な点があればお伝え下さい。
ご確認をよろしくおねがいします！

Comments

[izaya]

とても丁寧でわかりやすく説明していただいてありがとうございます！
thisが何を参照するのかをきちんと把握すべきでしたね。。ずっと感覚で使ってしまっていました。。
確かにイベントハンドラを別メソッドとして定義することで動くようになりました。
ただ、
handleOnLoad(image) {
const widthAndHeight = {
width: image.naturalWidth,
height: image.naturalHeight,
};
this.widthAndHeightArray.push(widthAndHeight);
}
のところで、console.log(widthAndHeight)を調べてみると、なぜだか{width: 0, height: 0}になっていました。。画像の読み込みが終わっていないのになぜだか処理が実行されているようです。
そこで、
getWidthAndHeight() {
const files = this.$refs.preview.files;
for (let i = 0; i < files.length; i++) {
let image = new Image();
image.src = URL.createObjectURL(files[i]);
image.addEventListener('load', () => {
const widthAndHeight = {
width: image.naturalWidth,
height: image.naturalHeight,
};
this.widthAndHeightArray.push(widthAndHeight);
});
}
},
上記のようにアロー関数にしてあげると、ちゃんとthis.widthAndHeightArrayがdata内のwidthAndHeightArrayを参照するようになりました！
これからはmarasonPDさんのおっしゃるよう、うまくいかない場合はthisの参照を確かめてみるようにします！大変勉強になりましたm(__)m

[marasonPD]

あー、、すみません。{width: 0, height: 0}になってしまう件ですが確かに仰るとおりです。
addEventListenerに渡している時点でhandleOnLoad(image)が実行されてしまう（実行して返ってくる値が引数として渡される）ので、良くないコードでした。もしこの形で書くなら結局handleOnLoadでその関数自体をreturnするようにしないといけなそうですね。
それを考えるとイケていないので、もう一人の方が仰る通りその場でアロー関数を用いるのが良さそうです。すみません、こちらも勉強になりました。

[izaya]

あ、なるほどです、引数になってしまうのですね！
でもなんか、marasonPDさんのおかげで結果的に+αの学びを得られたのでよかったです^^
問題解決に必要な前提知識であるthisの参照についてもとても丁寧に解説していただいたので、今後も同じところでつまづくことはなさそうです。ありがとうございましたm(__)m