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

Question

I have been working on a dialog in a project and I made it into an object constructor.

 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>

The problem is that when I want to access "this.no" or "this.yes" I keep getting Cannot read property 'No' of undefined . This happened when I used the below code:

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

I need to use d.No to close the dialog. Is there any other way to do it? Or a fix at least.
I am aware of the fact that I could close the dialog from within the constructor itself, but I want to make it possible to do other stuff as well (like detecting whether user choose yes or no).

Thanks in advance

Answer 1

As you have the constructor now, the callbacks are called immediately, and only after they have been called will the constructor return. Two remarks about that:

1. As the constructor has not yet returned at the time that the callbacks are called, the d variable has not yet received a value. So d in the callback will be undefined .

2. This is not realistic, as in practice you would only want to call one of the callbacks, and only when the user has clicked a button. At that time d would be defined.

You can still solve it, by passing an explicit reference to the constructed object. You could for instance pass it as this object:

Change:

noClicked();

...to:

noClicked.call(this);

And then in your callback, change:

console.log(d.No);

...to:

console.log(this.No);

Answer 2

You are calling noClicked() and yesClicked() immediately inside constructor. I think you would want to call them on click of No and Yes . You need to add these functions to event listeners of the buttons. Try below snippet.

 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>