javascript oop override inherited method

Question

// The parent class
    var Parent = function (jqueryElement) {
        this.jqueryElement = jqueryElement;
    };
    
    Parent.prototype.attachClick = function () {
        var that = this;
         
        this.jqueryElement.click(function (e) {
            e.preventDefault();
    
            that.doClick($(this));
        });
    }
    
    Parent.prototype.doClick = function ($element) {
        console.info('click event from parent');
    }
    
    // First child class
    var A = function(jqueryElement) {
        var that = this;
    
        Parent.call(this, jqueryElement);
    
        // this is supposed to override the Parent's
        this.doClick = function ($element) {
            console.info('click event from A');
        };
    };
    
    A.prototype = Object.create(Parent.prototype);
    
    
    
    var test = new A($('.selector'));
    test.attachClick();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class="selector">Click me</button>

At this stage, I'm supposed to see the message "click event from A", but the weird thing is that I don't see any message as if the doClick method is never executed. How do I override an inherited method (doClick) in the child class?

@Liam it does actually thanks to this A.prototype = Object.create(Parent.prototype); — smarber
– smarber, Commented Jan 6, 2017 at 13:56
@liam: certainly not. Using Object.create is correct. See stackoverflow.com/questions/17392857/… — Felix Kling
– Felix Kling, Commented Jan 6, 2017 at 13:59
You're running the attach click, but are you executing a click? — Matheus Dal'Pizzol
– Matheus Dal'Pizzol, Commented Jan 6, 2017 at 14:03
@FelixKling It works from the beginning actually, I "only" missed to click :'(, thanks anyway — smarber
– smarber, Commented Jan 6, 2017 at 14:11

Matheus Dal'Pizzol · Accepted Answer · 2017-01-06 14:40:35Z

1

You forgot to execute a click. Your code is working. =) I will only suggest to put your .doClick() method in A.prototype, so it will be shared by all A instances.

// The parent class
    var Parent = function (jqueryElement) {
        this.jqueryElement = jqueryElement;
    };
    
    Parent.prototype.attachClick = function () {
        var that = this;
         
        this.jqueryElement.click(function (e) {
            e.preventDefault();
    
            that.doClick($(this));
        });
    }
    
    Parent.prototype.doClick = function ($element) {
        console.info('click event from parent');
    }
    
    // First child class
    var A = function(jqueryElement) {
        var that = this;
    
        Parent.call(this, jqueryElement);
    
    };
    
    A.prototype = Object.create(Parent.prototype);

    // this is supposed to override the Parent's
    A.prototype.doClick = function ($element) {
       console.info('click event from A');
    };
    
    var test = new A($('.selector'));
    test.attachClick();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class="selector">Click me</button>

https://jsfiddle.net/ekw6vk43/

edited Jan 6, 2017 at 14:40

answered Jan 6, 2017 at 14:16

Matheus Dal'Pizzol

6,1253 gold badges24 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

smarber Over a year ago

.doClick() is actually shared without the need to define it inside the A.prototype, since my code works.

smarber Over a year ago

And A is not supposed to be inherited from.

Matheus Dal'Pizzol Over a year ago

Sorry, but in the way your code is written, every new instance of A will create a new .doClick() method in memory. If you want to create it only once and have it shared by all the instances of A, you'll need to put it into A.prototype.

Felix Kling Over a year ago

If there is no problem with the code then the question should be closed with the appropriate close reason (or deleted by the OP), not answered.

Matheus Dal'Pizzol Over a year ago

The element responsible for running the task he was testing was missing. Isn't that a "problem with the code"? Also, there was a method declared in the wrong place.

Collectives™ on Stack Overflow

javascript oop override inherited method

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related