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

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

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

（函数（）{
//建造师
功能菜单（选择器）{
让菜单=document.querySelector（选择器）；
返回{
activateToggle:function（）{
menu.addEventListener（“单击”，函数（）{
menu.parentNode.querySelector（“ul”）.classList.toggle（“hidden”）；
});
},
默认值：函数（）{
menu.parentNode.querySelector（“ul”）.classList.add（“hidden”）；
}
}
}
让topMenu=新菜单（“汉堡”）；
默认值（）；
topMenu.activateToggle（）；
让bottomMenu=新菜单（“底部汉堡”）；
bottomMenu.activateToggle（）；
})();
。隐藏{
显示：无；
}

顶部菜单
第1项第2项第3项第4项第5项

底部菜单
第1项第2项第3项第4项第5项

您的函数（即使是传统的
函数
函数）不是构造函数，而是构建函数；首先，你不应该使用
new
。构造函数在
this
和某物上设置属性，并且不发出
return
语句。您的函数构建自己的对象（无需
new
）并返回它们

而且，由于您不应该对它们使用
new
，因此可以让它们具有箭头功能。箭头函数不能是构造函数，但可以是生成器

当一个函数是构建器而不是构造函数时，绝大多数情况下它不应该以大写字母开头。例如，
createMenu
而不是
Menu
。这是您的代码，有更改，没有新的
：


（函数（）{
//建造师
让createMenu=（选择器）=>{
让菜单=document.querySelector（选择器）；
返回{
activateToggle:（）=>menu.addEventListener（“单击”，（）=>menu.parentNode.querySelector（“ul”）.classList.toggle（“隐藏”），
默认值：（）=>menu.parentNode.querySelector（“ul”）.classList.add（“隐藏”）
}
}
让topMenu=createMenu（“.burger”）；
默认值（）；
topMenu.activateToggle（）；
让bottomMenu=createMenu（“.bottomburger”）；
bottomMenu.activateToggle（）；
})();
。隐藏{
显示：无；
}

顶部菜单
第1项第2项第3项第4项第5项

底部菜单
第1项第2项第3项第4项第5项

以下是我将如何使用基于类的方法构建结构：

class Menu {
    constructor (selector) {
    this.topMenu = document.querySelector(selector);
    this.parentUl = this.topMenu.parentNode.querySelector("ul");
    this.init();
  }
  init() {
    this.menu.addEventListener('click', this.toggleHiddenState.bind(this));
  }
  toggleHiddenState(e) {
    this.parentUl.classList.toggle("hidden");
  }
  hide() {
    this.parentUl.classList.add("hidden");
  }

}

// Usage
let topmenu = new Menu('.burger');
topmenu.hide();

let bottomMenu = new Menu('.bottom-burger');

是，箭头函数不能用作构造函数。如果要避免使用
函数
s，请使用
类
es。只需删除
新的
关键字即可。你的函数从来都不是真正的构造函数，它们是工厂函数。箭头函数不仅仅是语法，实际函数在重要方面是不同的，不能与
new
一起使用。1.它们关闭
此
，因此即使它们可以与
新
一起使用，它们也无法访问新实例以设置其属性。2.它们没有构造函数必须具备的
[[Construct]]
内部特性。3.它们没有构造函数必须具有的
prototype
属性。但正如Bergi所指出的：你的函数无论如何都不是构造函数@塞巴斯蒂安西蒙非常感谢您的澄清。我们来看看课程。谢谢@Bergi。现在有道理了。这只是一个简单的函数调用。谢谢你的澄清。我几乎在我所有的项目中都使用了new和通过这个关键字设置属性的所有匿名函数。看起来没有必要了。@KiranDash-这两种样式在JavaScript世界中都很常用。由于
类
语法（创建构造函数和原型链），构造函数的语法支持比构建器多了一点，但是你可以对构建器函数和
对象进行同样的操作。创建
（创建原型链）。也感谢分享类方法。