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

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 属性 'No' of未定义。当我使用以下代码时发生了这种情况：

var d = new createDialog("Sample dialog. Exit?", function() {
  console.log(d.No);
}, function() {
  console.log(d.Yes);
});

我需要使用 d.No 来关闭对话框。还有其他方法吗？或至少修复。
我知道我可以从构造函数本身关闭对话框，但我也想让它也可以做其他事情（比如检测用户是否选择是或否）。

提前致谢

Answer 1

因为你现在有了构造函数，回调会立即被调用，只有在它们被调用后才会调用构造函数 return。两点说明：

由于在调用回调时构造函数尚未 returned，因此 d 变量尚未收到值。所以回调中的 d 将是 undefined.
这是不现实的，因为在实践中您只想调用一个回调，并且仅在用户单击按钮时调用。在时间 d 将被定义。

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

变化：

noClicked();

...收件人：

noClicked.call(this);

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

console.log(d.No);

...收件人：

console.log(this.No);

Answer 2

您正在构造函数中立即调用 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>

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

How to use object properties inside a parameterized function?

javascript

object

undefined

javascript-objects