Question

I’m trying to understand Javascript OOP. I’m trying to overwrite a method inside a class. The class has a default functionality when a ‘click’ in made. I want to override that function, so something new happens when a click is made.

I have a Javascript class that looks like this:

AlertModal = function(){
  var x = *this is my close object;

  x.onclick = destoryAlert;

  function destroyAlert(){
    console.log('destroy');
  }
}

My HTML file shows:

<script type="text/javascript">
  window.alert = function (message) {
    var newAlert = new AlertModal();
    newAlert.destroyAlert = function(){
      console.log('new alert destroy');
    };

    newAlert.destroyAlert();
  };

I get ‘new alert destroy’ which is great. But when I click the ‘x’, it says destroy as well. So it is overwritten, but not?! It’s like it creates a new ‘destroyAlert’ function, when it’s called, but leaves the default.

Can anyone please show me how I would do this, to create a class, with default functionality, but how to overwrite it if needed?

I’m use to programming in Java and Actionscript, extending classes and overwritting public/protected methods, but doing it Javascript seems so much different and I can’t understand the logic to do so.

Thanks,

Answer 1

You can override methods on instance level:

AlertModal = function() {
    this.init();
};

AlertModal.prototype.init = function() {
    var modal = this;
    var x = ...;
    x.onclick = function() {
        // Note that I'm not using `this` here, because it would
        // reference `x` instead of the modal. But we can pass the modal
        // from the outer scope. This is called a lexical closure.
        modal.destroy();
    };
};

AlertModal.prototype.destroy = function() {
    console.log('destroy');
};

var myalert = new AlertModal();
myalert.destroy = function() {
    console.log('new destroy');
};

myalert.destroy();

But if you want to do the same override in multiple places, it would probably be better to create a specialized OtherAlertModal by inheriting from AlertModal class. Here’s a good approach to inheritance in JavaScript: http://ejohn.org/blog/simple-javascript-inheritance/