Почему я не могу назвать значения внутри объекта?

Question

Через несколько дней после того, как я начал создавать плагин, я задумался, в чем разница между этими двумя кодами и почему второй код не работает.

Первый выглядит так:

<div class="searching">
    <ul>
        <li></li>
    </ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

(function($) {
  $.fn.slideInit = function() {
    const myGallery = $(this),
          myList = myGallery.find('li');

    <!-- Log Section -->
    console.log(myList);
    <!----------------->
  };
} (jQuery));
$('.searching').slideInit();

Этот код отлично работает, как я и ожидал.Переменная myGallery может быть определена внутри блока кода.

И вторая, которая не работает, выглядит следующим образом:

(function($) {
  $.fn.slideInit = function() {
    const defaults = {
      myGallery: $(this),
      myList: myGallery.find('li')
    };

    <!-- Log Section -->
    console.log(defaults.myList);
    <!----------------->
  };
} (jQuery));
$('.searching').slideInit();

В этом коде я сделал следующее:только что добавил переменные внутри объекта, который называется defaults, но когда я запускаю этот код, появляется ошибка:

index.html: 59 Uncaught ReferenceError: myGallery не определена

Я думаю, что есть какая-то разница между этими двумя кодами, но я не смог найти или выяснить сам.

Не могли бы вы, ребята, научить меня, почему myGallery ограничен переменной * 1022?* не может быть определено?

Answer 1

Вы должны определить свою переменную вне литерала или ссылаться на нее, используя this

const defaults = {
      myGallery: "DONALD DUCK",
      myList: function() { console.log(this.myGallery) }
    };
 
 defaults.myList();

Answer 2

Проблема здесь:

const defaults = {
  myGallery: $(this),
  myList: myGallery.find('li') // <====
};

В этой точке нет переменной myGallery.Вы можете либо вызвать $() дважды, добавить myList по факту, либо использовать myGallery переменную:

const defaults = {
  myGallery: $(this),
  myList: $(this).find('li')
};

или

const defaults = {
  myGallery: $(this)
};
defaults.myList = defaults.myGallery.find('li');

или

const myGallery = $(this);
const defaults = {
  myGallery,
  myList: myGallery.find('li')
};