jQuery プラグイン化した際のhover内の記載方法

Question

実現したいこと

ロールオーバーで切り替わる画像（画像パスがhoge_offからhoge_onに変わる）を実装しています。
実装は完了しましたが、次にこれをプラグイン化しようと参考書を参考に組んでみました。
その際の不明点になります。

発生している問題・エラーメッセージ

hover内の$(this)が思ったように動きません。
プラグイン化しない場合、アロー関数を使用してもhoverさせた要素のimg要素が正常に取得できていました。
プラグイン化した場合は
①hoverイベント内でアロー関数を使い、ホバーした要素を取得して変化させた
②アロー関数を使用し 誤作動 a要素にsrc属性がついてしまう
③アロー関数未使用→成功
っと挙動が変わってしまい、なぜ変わってしまうのか理解できませんでしたので、知見お持ちの方ご教授いただけますと幸いです。

■html
<ul class="menu">
<li><a href="http://example.com/" class="rollover"><img src="images/menu01_off.png" alt="Home" /></a></li>
<li><a href="http://example.com/" class="rollover"><img src="images/menu02_off.png" alt="Products" /></a></li>
<li><a href="http://example.com/" class="rollover"><img src="images/menu03_off.png" alt="Company" /></a></li>
</ul>

該当のソースコード

//プラグイン化
$.fn.rollover = function (options) {
  options = $.extend({
    off: '_off',
    on: '_on'
  }, options);

  this.each(function () {
    const rollover = $(this);
    const imgs = rollover.find('img');
    const img_off = imgs.attr('src');
    const img_on = img_off.replace(/(^.+)_off(\..+)/g, '$1_on$2');
    $('<img>').attr('src', img_on);

    //成功
    //①hoverイベント内でアロー関数を使い、ホバーした要素を取得して変化させた
    // imgs.hover((i,e) => {
    //   console.log($('> img', this));
    //   $('> img', this).attr('src', img_on);
    // }, () => {
    //   console.log('hoverオフ');
    //   $('> img', this).attr('src', img_off);
    // });//hover


    //②アロー関数を使用し→誤作動 a要素にsrc属性がついてしまう
    //https://www.sejuku.net/plus/question/detail/15205
    // imgs.hover(()=> {
    //   $(this).attr('src', img_on);
    //   }, ()=> {
    //   $(this).attr('src', img_off);
    // });//hover

    //③アロー関数未使用→成功 
    // imgs.hover(function() {
    //   $(this).attr('src', img_on);
    //   }, function() {
    //   $(this).attr('src', img_off);
    // });//hover


  });//each
};//end

$(function () {
  $('.menu .rollover').rollover();
});


//プラグイン化なし
$(function () {
  $('.menu').each(function () {
    const rollover = $(this).find('.rollover');
    const imgs = rollover.find('img');
    const img_off = imgs.attr('src');
    const img_on = img_off.replace(/(^.+)_off(\..+)/g, '$1_on$2');
    $('<img>').attr('src', img_on);

    imgs.hover(() => {
      $(this).attr('src', img_on);
      }, () => {
      $(this).attr('src', img_off);
    });//hover

  });
});

Answer 1

javascriptでアロー関数を使用した場合、スコープが限定されません。

ですので、「imgs.hover」内部のアロー関数式のthisは、その直前のthisです。

アロー関数式

Answer 2

ご回答、誠にありがとうございます。

参考ページ一通り見てみましたが、まだ理解できず…

javascriptでアロー関数を使用した場合、スコープが限定されません。

スコープが限定されない、っというのはアロー関数内のthisは常にどこを指すことになるでしょうか？

ですので、「imgs.hover」内部のアロー関数式のthisは、その直前のthisです。

「アロー関数式のthisは、その直前のthis」というのは、何を指すことになるでしょうか…

Comments

[yambejp]

回答への返信はコメント欄をご利用ください

[shinoru]

不慣れですみません、ありがとうとざいます。コメント欄に同内容記載いたします。
━━━━━━━━━━━━━━━━
ご回答、誠にありがとうございます。

参考ページ一通り見てみましたが、まだ理解できず…

javascriptでアロー関数を使用した場合、スコープが限定されません。

スコープが限定されない、っというのはアロー関数内のthisは常にどこを指すことになるでしょうか？

ですので、「imgs.hover」内部のアロー関数式のthisは、その直前のthisです。

「アロー関数式のthisは、その直前のthis」というのは、何を指すことになるでしょうか…