Method overload in JavaScript

Question

Consider sample html code:

<head>
    ....
    <script src="/js/MyClass.js"></script>
    <script src="/js/extend.js"></script>
    <script>
        $(document).ready(function($) {
            var $obj=new MyClass();
            $obj.run();
        });
    </script>
</head>
<body>

MyClass.js file:

var MyClass=function()
{
    this.run=function() {
        alert("MyClass");
    }
}

extend.js file:

MyClass.prototype.run=function() {
    alert("Extend");
}

Why does this code alert "MyClass" instead of "Extend"? How to correctly rewrite (overload) class method?

Community · Accepted Answer · 2017-05-23 12:24:24Z

It's all got to do with how JS resolves expressions like <object>.<property/function>. I've previously explained this in detail, but here's the schematic run-down applied to your case:

[    MyClass.run    ]<=========================================================\ \
MyClass[run] ===> JS checks instance for property run                           | |
 /\ ||                                                                          | |
 || || --> property found @instance, resolve value------------------------------| |
 || ||                                                                          | |
 || ===========> MyClass.prototype.run could not be found? check prototype      | |
 ||      ||                                                                     | |
 ||      ||--> OR property found @MyClass.prototype, return---------------------| |
 ||      ||                                                                     | |
 ||      ==========> Object.prototype.run: not found check prototype?           | |
 ||          ||                                                                 | |
 ||          ||--> property found @Object.prototype, return---------------------|-|
 ||          ||                                                                 |=|
 ||          =======> chech prototype of Object.prototype -> undefined~~~~~~~~~~|X|
 ||                                                                             \ /
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~< TypeError can't read property run of undefined

This is All of the places JS can check for the run property. Because your constructor function defines a run property on the instance (this.run = function(){};), the lookup never goes past the first step: "JS checks instance for property run".
The prototype-chain never comes into play.

You ask if, and how, it might be possible to overload JS methods. The short answer is: It isn't, not really. Overloading is a valid OOP technique, that is very handy in traditional, class-based OO models. JS doesn't play that way, it uses a prototypal model instead. Trying to force the prototypal system to work like a traditional OO language is possible (owing to the flexability of the prototypal system), but it requires too much effort to keep up, and often just isn't worth it.
You could compare it to using a regular saloon/sedan car to plow a field. At first, you may be able to, but it won't take long before you get stuck, and have to call on a tractor to tow you out of the field.

If you still want to give it a try, here's how:

function MyClass()
{
    this.run = function()
    {
        console.log('child method');
        var backup = this.run;//store reference to instance property
        delete this.run;//delete instance property
        this.run();//call again
        //but now, the instance property is missing, JS will use the prototype
        this.run = backup;//restore instance property
    };
}
MyClass.prototype.run = function()
{
    console.log('prototype run method');
};
var foo = new MyClass;
foo.run();
//logs:
//child method
//prototype run method

You might find it useful to take a look here, it's the previous answer in which I explained JS's way of resolving expressions a bit more detailed. At the bottom of my answer there, I've also added some more links on the matter, might be worth while looking at them, too...

@mike: You're welcome... Have you checked the linked answer? Because at the bottom of that answer, there's some other links (as I said in my answer) that will clarify even more things (I hope/think), especially the one with the images with "functions" holding hands (I know, sounds... erm...), but I think that answer does explain why declaring a method in a constructor is a bad idea

Thilo · Accepted Answer · 2013-10-09 10:44:14Z

1

The prototype is only used when the object itself does not have the property already.

In your case, you put run on the object itself, so that is what run will resolve to.

In a way, your MyClass is overriding its own prototype.

Maybe you want

var MyClass=function(){};
MyClass.prototype.run = function() {
    alert("MyClass");
}

var overridden = new MyClass();
overridden.run = function() {
     alert("Extend");
}

That would be an instance with a different method than its prototype.

Or you could chain prototypes to simulate a class hierarchy.

edited Oct 9, 2013 at 10:44

answered Oct 9, 2013 at 10:36

Thilo

264k107 gold badges527 silver badges674 bronze badges

2 Comments

Mike Doe Over a year ago

Is it possible to overload a method then?

Thilo Over a year ago

Overload is the wrong word. It means multiple functions with the same name distinguished by parameter types. That is not possible in Javascript. What you mean is "override" (which means supplying a different version of a method in a subclass). That can be done by chaining prototypes.

curiousdannii · Accepted Answer · 2013-10-09 10:58:32Z

0

Your MyClass constructor is overriding the prototype. The following code will alert "MyClass", "Extended" and "Overriden" each in turn. The last alert shows that changing the instance's function does not change the prototype's function.

var MyClass=function()
{
    this.run();
    MyClass.prototype.run = function() { alert( "Extended" ) };
    this.run();
    this.run=function() {
        alert("Overriden");
    };
    this.run();
};
MyClass.prototype.run = function() { alert( "MyClass" ); };
var myinstance = new MyClass();
alert( myinstance.run === MyClass.prototype.run );

answered Oct 9, 2013 at 10:58

curiousdannii

2,0982 gold badges33 silver badges52 bronze badges

1 Comment

Elias Van Ootegem Over a year ago

MyClass.prototype.run = function() { alert( "Extended" ) }; is reassigning the prototype on each call to the constructor. That's not a good idea, nor a good example here. var foo = new MyClass will behave as you describe, but if you were to create a second instance: var bar = new MyClass it'll alert Extended twice

Collectives™ on Stack Overflow

Method overload in JavaScript

3 Answers 3

2 Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related