【JavaScript】functionとアロー関数のthisの違い

ダメな例

document.addEventListener("turbolinks:load", () => {
    $('#post_image').on('change', () => {
      var size_in_megabytes = this.files[0].size/1024/1024;
      if (size_in_megabytes > 5){
        alert("アップロード可能なファイルサイズは5MBまでです。より小さいサイズのファイルを選んでください。");
        $('#post_image').val("");
      }
    });
  });

このエラーになる

image_size.js:4 Uncaught TypeError: Cannot read property '0' of undefined
at HTMLInputElement.<anonymous> (image_size.js:4)

() => {}内のthisはaddEventListnerメソッド実行時のスコープであるグローバルスコープ(document)を指す。

this.filesは定義されていない(undefinedだ)から'0'は読み込めません！とのこと

document.addEventListener("turbolinks:load", () => {
    $('#post_image').on('change', () => {
      var size_in_megabytes = this.files.size/1024/1024;
      if (size_in_megabytes > 5){
        alert("アップロード可能なファイルサイズは5MBまでです。より小さいサイズのファイルを選んでください。");
        $('#post_image').val("");
      }
    });
  });

image_size.js:4 Uncaught TypeError: Cannot read property 'size' of undefined
at HTMLInputElement.<anonymous> (image_size.js:4)

this.filesは定義されていない(undefinedだ)から'size'は読み込めません！とのこと

うまくいく例

  document.addEventListener("turbolinks:load", () => {
    $('#post_image').on('change', function(){
      var size_in_megabytes = this.files[0].size/1024/1024;
      if (size_in_megabytes > 5){
        alert("アップロード可能なファイルサイズは5MBまでです。より小さいサイズのファイルを選んでください。");
        $('#post_image').val("");
      }
    });
  });

function(){}内のthisはaddEventListnerメソッドを保持する$('#post_image')オブジェクト(DOM)を指す