带有ES6类的JavaScript模式

我正在尝试使用es6类创建一个模式。 密码笔：

其思想是使用模态的

data

属性从dom中获取一个按钮，通过

data-modal

属性获取模态本身的搜索。然后，应将

showmodel

和

hideModal

方法绑定到作为

Modal

类实例创建的元素。为什么它不起作用

我的JS看起来像这样：

class Modal {
  constructor(modalName) {
    this.showBtn = document.querySelector(`[data-for-modal=\'${modalName}\']`)
    this.modalWrapper = document.querySelector(`[data-modal=\'${modalName}\']`);
    this.closeBtn = document.querySelector(`[data-modal=\'${modalName}\']`).children[0].children[0].children[1];
  }

  showModal () {
    this.modalWrapper.classList.add('.ui-modal-wrappper.ui-modal-wrappper--active-modal');
  }

  hideModal () {
    this.modalWrapper.classList.remove('.ui-modal-wrappper.ui-modal-wrappper--active-modal');
  }

  this.showBtn.addEventListener('click', this.showModal);
  this.closeBtn.addEventListener('click', this.hideModal);

}

const m1 = new Modal('modal-1');
const m2 = new Modal('modal-2');

为什么它不起作用

---

因为处理程序被绑定的上下文

与类
模式
中的上下文不同

您需要绑定正确的上下文
此
：

this.showBtn.addEventListener('click', this.showModal.bind(this));
this.closeBtn.addEventListener('click', this.hideModal.bind(this));

函数
bind
将从class
Modal
中绑定该上下文
this
，并返回一个绑定到正确上下文的新函数


类模态{
构造函数（modalName）{
this.showBtn=document.querySelector（`[data for modal=\'${modalName}\']`）
this.modalWrapper=document.querySelector（`[data modal=\'${modalName}\']`）；
this.closeBtn=document.querySelector（`[data modal=\'${modalName}\']`）。子项[0]。子项[0]。子项[1]；
this.showBtn.addEventListener（'click'，this.showModal.bind（this））；
this.closeBtn.addEventListener（'click'，this.hideModal.bind（this））；
}
showModal（）{
log（this.modalWrapper）；
add（'.ui modal wrapper.ui modal wrapper--active modal'）；
}
hideModal（）{
log（this.modalWrapper）；
remove（'.ui modal wrapper.ui modal wrapper--active modal'）；
}
}
常数m1=新模态（“模态-1”）；
常数m2=新模式（“模式2”）
*{
保证金：0；
填充：0；
大纲：0；
}
身体{
字体系列：无衬线；
}
.按钮面板{
背景：#ccc；
边际上限：50vh；
文本对齐：居中；
填充：20px0；
}
.ui显示模式btn{
背景：#3b5998；
字号：1.5em；
边界：0；
大纲：0；
利润率：0.10px；
填充：10px 15px；
颜色：#fff；
过渡：不透明度。3s缓解；
}
.ui显示模式btn：悬停{
光标：指针；
不透明度：.9；
}
.ui模态包装器{
显示：无；
证明内容：中心；
对齐项目：居中；
位置：绝对位置；
排名：0；
左：0；
底部：0；
右：0；
背景：rgba（51,51,51,0.7）；
}
.ui-modal-wrappper.ui-modal-wrappper--active-modal{
显示器：flex；
}
.ui模态体{
宽度：80%；
背景:#ececec ;；
字体系列：Arial，无衬线；
盒影：5px 5px 5px#333；
}
.ui-modal-body___头，
.ui-modal-body\uuu页脚{
颜色：#ececec；
背景：#3b5998；
填充：10px 15px；
}
.ui-modal-body\uuuu头{
显示器：flex；
证明内容：之间的空间；
对齐项目：居中；
字号：1.5em；
}
.ui-modal-header__title{}
.ui-modal-header\uuu close-btn{
填充：5px 0px 5px 15px；
过渡：放松所有人；
}
.ui-modal-header\uuu close-btn：悬停{
光标：指针；
不透明度：.8；
}
.ui-modal-body\uuu页脚{
字体大小：1.3em；
文本对齐：居中；
}
.ui-modal-body\u内容{
填充：20px 15px；
颜色：#222；
文本对齐：对齐；
}
.ui-modal-body\uuu内容p{
填充：0 10px 0；
}
.ui-modal-body____内容p：最后一个子项{
填充：0px 0 0px 0；
}

显示模式1
显示模式2
模式1标题
x
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作。酒后驾车
这是一种不受欢迎的行为，它是一种不受欢迎的行为。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡

知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作。酒后驾车
这是一种不受欢迎的行为，它是一种不受欢迎的行为。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡

模态页脚
模式2标题
x
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作。酒后驾车
这是一种不受欢迎的行为，它是一种不受欢迎的行为。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡

知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作。酒后驾车
这是一种不受欢迎的行为，它是一种不受欢迎的行为。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡

模态页脚
因为处理程序被绑定的上下文
this
与类Modal中的上下文不同。如何使
this
引用构造函数？使用
bind（）
this.showmodel.bind（this）
当你制作这个时，可能值得了解它的存在，使用这个平台总是最好的，但是制作你自己的polyfill会很酷。