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

我认为这两个代码之间有些区别，但我自己找不到或找出来。

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

Answer 1

您必须在文字之外定义var或使用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')
};

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

2 个答案: