如何在参数化函数中使用对象属性？

Question

我一直在研究一个项目中的对话框，并将它变成一个对象构造函数。function createDialog(title, noClicked = function(){}, yesClicked = function(){}) {  this.dialog = document.getElementsByClassName("dialog")[0];  this.dialogTitle = this.dialog.getElementsByTagName("h1")[0];  this.No = this.dialog.getElementsByTagName("button")[0];  this.Yes = this.dialog.getElementsByTagName("button")[1];  var dialog = document.getElementsByClassName("dialog")[0];  this.dialogTitle.innerHTML = title;  document.getElementsByClassName("dialogCon")[0].style.display = "flex";  noClicked();  yesClicked();}<div class="dialogCon">      <div class="dialog">        <h1></h1>        <button type="button">No</button>        <button type="button">Yes</button>      </div>    </div>问题是，当我想访问“this.no”或“this.yes”时，我不断收到Cannot read property 'No' of undefined。当我使用以下代码时发生了这种情况：var d = new createDialog("Sample dialog. Exit?", function() {  console.log(d.No);}, function() {  console.log(d.Yes);});我需要使用 d.No 关闭对话框。还有其他方法吗？或者至少是一个修复。我知道我可以从构造函数本身关闭对话框，但我也想让它也可以做其他事情（比如检测用户是否选择是或否）。

Answer 1

您在构造函数中立即调用noClicked()和 yesClicked()。我想你会想在点击No和Yes时给他们打电话。您需要将这些功能添加到按钮的事件侦听器中。试试下面的片段。

function createDialog(title, noClicked = function(){}, yesClicked = function(){}) {

  this.dialog = document.getElementsByClassName("dialog")[0];

  this.dialogTitle = this.dialog.getElementsByTagName("h1")[0];

  this.No = this.dialog.getElementsByTagName("button")[0];

  this.Yes = this.dialog.getElementsByTagName("button")[1];

  var dialog = document.getElementsByClassName("dialog")[0];

  this.dialogTitle.innerHTML = title;

  document.getElementsByClassName("dialogCon")[0].style.display = "flex";

  this.No.addEventListener('click',noClicked);

  this.Yes.addEventListener('click',yesClicked);

}

  

 var d = new createDialog("Sample dialog. Exit?", function() {

               console.log(d.No);

            }, function() {

               console.log(d.Yes);

           });

<div class="dialogCon">

      <div class="dialog">

        <h1></h1>

        <button type="button">No</button>

        <button type="button">Yes</button>

      </div>

    </div>

Answer 2

因为你现在有了构造函数，回调会立即被调用，只有在它们被调用之后构造函数才会返回。对此有两点评论：

1. 由于调用回调时构造函数尚未返回，因此变量d尚未收到值。所以d在回调中将是undefined。

2. 这是不现实的，因为在实践中您只想调用其中一个回调，并且仅在用户单击按钮时调用。那个时候d会被定义。

您仍然可以通过传递对构造对象的显式引用来解决它。例如，您可以将其作为this对象传递：

改变：

noClicked();

...到：

noClicked.call(this);

然后在您的回调中，更改：

console.log(d.No);

...到：

console.log(this.No);