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, Jan 06 '17 at 13:56
@liam: certainly not. Using `Object.create` is correct. See http://stackoverflow.com/questions/17392857/benefits-of-using-object-create-for-inheritance/17393153#17393153 — Felix Kling, Jan 06 '17 at 13:59
You're running the attach click, but are you executing a click? — Matheus Dal'Pizzol, Jan 06 '17 at 14:03
@MatheusDal'Pizzol right thx. Arghhh, since I'm new to oop in javascript I did miss that detail :D. Sorry guys — smarber, Jan 06 '17 at 14:10
I updated your code to include an actual element and it works as expected. — Felix Kling, Jan 06 '17 at 14:10
@FelixKling It works from the beginning actually, I "only" missed to click :'(, thanks anyway — smarber, Jan 06 '17 at 14:11

Matheus Dal'Pizzol · Accepted Answer · 2017-01-06T14:40:35.170

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 06 '17 at 14:40

answered Jan 06 '17 at 14:16

Matheus Dal'Pizzol

5,735
3
19
29

`.doClick() ` is actually shared without the need to define it inside the `A.prototype`, since my code works. – smarber Jan 06 '17 at 14:21
And A is not supposed to be inherited from. – smarber Jan 06 '17 at 14:22
1

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. – Matheus Dal'Pizzol Jan 06 '17 at 14:24
1

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. – Felix Kling Jan 06 '17 at 14:29
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. – Matheus Dal'Pizzol Jan 06 '17 at 14:34

javascript oop override inherited method

1 Answers1