Question

There is any interesting article which warns about JS problems.

However, notice #2:

<input type="button" value="Gotcha!" id="MyButton" >
<script>
var MyObject = function () {
    this.alertMessage = "Javascript rules";
    this.ClickHandler = function() {
          alert(this.alertMessage );
      }
}();

</script>

Notice the self executing function by () at the end. However I’m pretty sure the this.xxx is used when doing new MyObject(). He wrote :

If you call MyObject.ClickHandler(); you will get a popup saying “Javascript rules”.

and his sample doesn’t work. I’ve tried MyObject.ClickHandler() and got an error…(Cannot call method ‘ClickHandler’ of undefined)

How can I make MyObject.ClickHandler() work ?

Answer 1

You are missing the new keyword. Currently, this refers to window and ClickHandler is available through window.ClickHandler.

When using the new keyword, a new object is created and the this keyword will refer to that newly created object. That is why the ClickHandler method will be added to MyObject below:

var MyObject = new (function () {
    this.alertMessage = "Javascript rules";
    this.ClickHandler = function () {
        alert(this.alertMessage);
    };
})();

Be careful when doing something like:

document.getElementById("MyButton")
    .addEventListener("click", MyObject.ClickHandler, false);

addEventListener makes this refer to the object on which the event listener was assigned. See also bind for changing the this scope.