Question

我正在尝试使用JavaScript创建一个简单的菜单切换功能。而且我正在使用带有函数的构造函数来实现它，如下所示：

具有匿名功能的构造函数：

(function(){
  // Constructor
  function Menu(selector){
      let menu = document.querySelector(selector);
      return {
          activateToggle: function(){
              menu.addEventListener("click", function(){
                  menu.parentNode.querySelector("ul").classList.toggle("hidden");
              });
          },
          default: function(){
              menu.parentNode.querySelector("ul").classList.add("hidden");
          }
      }
  }

  let topMenu = new Menu(".burger");
  topMenu.default();
  topMenu.activateToggle();
  let bottomMenu = new Menu(".bottom-burger");
  bottomMenu.activateToggle();
})();

.hidden {
    display: none;
}

<!--Top Menu-->
<div class="topmenu">
    <button class="burger">Top Menu</button>
    <ul><li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li><li>Item 5</li></ul>
</div>
<!--Bottom Menu-->
<div class="bottommenu">
    <button class="bottom-burger">Bottom Menu</button>
    <ul><li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li><li>Item 5</li></ul>
</div>

具有箭头功能的相同菜单：

(function(){
    // Constructor
    let Menu = (selector) => {
        let menu = document.querySelector(selector);
        return {
            activateToggle: () => menu.addEventListener("click", () => menu.parentNode.querySelector("ul").classList.toggle("hidden")),
            default: () => menu.parentNode.querySelector("ul").classList.add("hidden")
        }
    }

    let topMenu = new Menu(".burger");
    topMenu.default();
    topMenu.activateToggle();
    let bottomMenu = new Menu(".bottom-burger");
    bottomMenu.activateToggle();
})();

.hidden {
    display: none;
}

<!--Top Menu-->
<div class="topmenu">
    <button class="burger">Top Menu</button>
    <ul><li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li><li>Item 5</li></ul>
</div>
<!--Bottom Menu-->
<div class="bottommenu">
    <button class="bottom-burger">Bottom Menu</button>
    <ul><li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li><li>Item 5</li></ul>
</div>

上面的代码引发错误 "Menu is not a constructor" 。我试图找到有关如何使用箭头函数创建构造函数的答案，但大多数文章都说我们不能将new关键字与箭头函数一起使用。

那么用箭头函数创建构造函数的正确方法是什么？

Answer 1

您的函数（甚至是传统的function函数）也不是构造函数，它们是 builder 函数；您不应该首先将new与它们一起使用。 构造函数函数在this上设置属性，并且不会发出return语句。您的函数将构建自己的对象（不需要new）并返回它们。

由于您不应该将new与它们一起使用，因此使它们具有箭头功能就可以了。箭头函数不能是构造函数，但可以是构造函数。

当函数是构建器而不是构造函数时，绝大多数情况下不应以大写字母开头。因此，例如，createMenu而不是Menu。这是您所做的代码，其中有此更改，但没有new：

(function(){
    // Constructor
    let createMenu = (selector) => {
        let menu = document.querySelector(selector);
        return {
            activateToggle: () => menu.addEventListener("click", () => menu.parentNode.querySelector("ul").classList.toggle("hidden")),
            default: () => menu.parentNode.querySelector("ul").classList.add("hidden")
        }
    }

    let topMenu = createMenu(".burger");
    topMenu.default();
    topMenu.activateToggle();
    let bottomMenu = createMenu(".bottom-burger");
    bottomMenu.activateToggle();
})();

.hidden {
    display: none;
}

<!--Top Menu-->
<div class="topmenu">
    <button class="burger">Top Menu</button>
    <ul><li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li><li>Item 5</li></ul>
</div>
<!--Bottom Menu-->
<div class="bottommenu">
    <button class="bottom-burger">Bottom Menu</button>
    <ul><li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li><li>Item 5</li></ul>
</div>

Answer 2

这是我如何使用基于类的方法进行构造：

C011=4.000000
C013=6.000000
C015=8.000000

如何使用箭头函数创建构造函数

2 个答案: