CODEWITHSUNDEEP
javascriptclassoverridingoverwrite
iamface
iamface

Reputation: 693

Overwriting Javascript method outside class, with default behavior

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,

Upvotes: 0

Views: 855

Answers (2)

Alnitak
Alnitak

Reputation: 339975

x.onclick = destroyAlertl

sets x's onclick handler to a reference local function

whereas

newAlert.destroyAlert = ...

sets this object's destroyAlert property set to a different function. It does not change the reference stored in x.onclick.

You need to put the "default" function on the prototype of AlertModal:

AlertModal.prototype.destroyAlert = function() {
     ...
}

and register the handler differently:

var self = this;
x.onclick = function() {
    self.destroyAlert();
}

If you subsequently overwrite the destroyAlert property of such an object then the new function will be called instead.

Upvotes: 0

Alexey Lebedev
Alexey Lebedev

Reputation: 12197

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/

Upvotes: 1

Related Questions