如何将构造函数的方法用于事件侦听器答案

【问题标题】：How to use constructor's method for an event listener如何将构造函数的方法用于事件侦听器
【发布时间】：2017-09-30 00:24:49
【问题描述】：

所以我正在开发 OO Quiz 应用程序，并且我有 Quiz 构造函数，它应该启动带有所有问题等的测验应用程序本身。我要做的第一件事是当用户键入他的姓名和电子邮件并单击提交按钮时，console.log 在 JSON 字符串中使用名称、电子邮件等新创建的用户对象。我给 Quiz 原型提供了一个方法 clickBtn，它检查输入是否为空，如果不是，则给我 JSON 字符串。

在方法之后，我在一个按钮上添加了事件监听器，并没有给它一个随机函数，而是prototype.clickBtn 方法。不幸的是，我不断收到Uncaught ReferenceError: clickBtn is not defined 错误。问题是什么？代码sn-p：

function Quiz (User, Question) {
  this.user = User;
  this.question = Question;
}

Quiz.prototype.constructor = Quiz;

Quiz.prototype.clickBtn = function () {
      if (theName.value == "") {
        var message = document.createElement("p");
        message.className = "message";
        message.innerHTML = "You forgot the name and email";
        var body = document.getElementsByTagName("body")[0];
        body.appendChild(message);
      } else {
        var message = document.getElementsByClassName("message")[0]; // first one
        message.parentNode.removeChild(message);
        console.log(message);
        var user1 = new User (theName.value, theEmail.value);
        users.push(user1);
        console.log("Quiz Created On: " + this.getQuizDate);
        console.log(JSON.stringify(users, null, 2));
      }
      theName.value = "";
      theEmail.value = "";
}

var btn = document.getElementById("button");
btn.addEventListener("click", clickBtn);

【问题讨论】：

这是一种非常奇怪的做事方式，特别是因为如果不创建 new 实例，这些方法的原型实际上并不能做任何事情？
问题不清楚

标签： javascript oop constructor closures prototype

【解决方案1】：

首先，创建一个 Quiz 实例：

var quiz = new Quiz;

然后将您的事件侦听器附加为您的 Quiz 对象的方法。

btn.addEventListener("click", quiz.clickBtn);

【讨论】：

为什么我们必须创建新实例而不能只说 Quiz.clickBtn？会不会是语法错误？

【解决方案2】：

必须添加 Quiz 方法的 clickBtn 方法，目前使用的是 clickBtn，但是 clickBtn 是 Quiz 的方法，所以要访问 clickBtn，需要使用 Quiz 方法的实例调用它

【讨论】：