Javascript: Why to use define prototype method for inheritance if inheritance can be achieved without it?

Question

I referred this question/answer to understand prototypical inheritance.

I got to know to extend a method , we need to define Person.prototype.getName in base class. So that in child class it can be called as myCustomer.sayMyName();

Code in the answer can be summarized as follows :

  function Customer(name) {
        this.firstName = name;
    };
    function User() {
     
    }

    Customer.prototype.hi = function() {
        console.log('Test method of parent');
    } 

    User.prototype = new Customer('shaadi');
    var myUser = new User();
    myUser.hi();

But the question is if I can call the same with following syntax, why should I use prototype?

My code:

function Customer(name) {
        this.firstName = name;
        this.hi= function() {
            console.log('Test method of parent');
        } 
    };
    function User() {
     
    }
    User.prototype = new Customer('shaadi');
    var myUser = new User();
    myUser.hi();

I could use the method of parent without defining Customer.prototype.hi, then why/when should Customer.prototype.hi be used?

If both solutions give me access to parent's method, why should I choose former?

score 2 · Answer 1 · answered Oct 25 '16 at 10:52

It's for memory usage..

In you second example every instance of the object will have it's own copy of the function hi()..

By putting function hi() on the prototype, there is only ever one instance of the function.. If you have thousands of these object been created there is a massive saving in memory usage.

score 0 · Answer 2 · answered Oct 25 '16 at 10:55

Memory usage is much better on the former as the method is defined only once.

The second example the function is declared on every instance.

Additionally, the prototype method can be modified / overwritten, and the changes inherited into each instance in use.

e.g.

function Customer(name) {
    this.firstName = name;
};
function User() {

}

Customer.prototype.hi = function() {
    console.log('Test method of parent');
}   

User.prototype = new Customer('shaadi');
var myUser = new User();
Customer.prototype.hi = function() {
    console.log('New Test method of parent');
} 
myUser.hi();

The above prototype function is changed after invoking both the custom and user classes, however it's changes still take affect on all instances.

score 0 · Answer 3 · answered Oct 25 '16 at 10:58

Your two examples are very nearly functionally equivalent. The difference is perhaps best explained with an analogy:

Say you have one directory tree A and its files that you want to show within other directories B & C. You can go two ways about it:

Copy A and all its contents somewhere into B and C, thus having 3 independent copies of the data in A.
Place a link to A within B and C. Data in A exists only once, but it's accessible and visible from B and C too.

In the second case, this also means that changing one file in A will show that change in B and C, same as changing a prototype property will affect all instances of the class.

Javascript: Why to use define prototype method for inheritance if inheritance can be achieved without it?

3 Answers3