javascript - 为什么不能在对象内部调用该值？

自从我开始制作插件后的几天，我想知道这两个代码之间的区别是什么，以及为什么第二个代码不起作用。

第一个看起来像这样：

<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未捕获的ReferenceError：未定义myGallery


我认为这两个代码之间有些区别，但是我自己找不到或弄清楚。

你们会教我为什么不能定义变量myGallery限定的default吗？

最佳答案

问题在这里：

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')
};