Using .prototype for adding method to variable

Question

I'm looking to analyze this code and I'm having some trouble. My trouble starts with this line. Customer.prototype = new Person();. Now as far as i'm aware. We can add some methods to our variables like we did with Person.prototype.getName. Great, now Person has a proto pointed towards a function that returns a name. So what does it mean when we do Customer.prototype = new Person();. Does this mean that take all the methods and statements in Person and put them inside the variable Customer?

var Person = function(name) {
  this.name = name;
};

Person.prototype.getName = function() {
  return this.name;
};


var john = new Person("John");

//Try the getter
alert(john.getName());


Person.prototype.sayMyName = function() {
  alert('Hello, my name is ' + this.getName());
};

john.sayMyName();

var Customer = function(name) {
    this.name = name;
};


Customer.prototype = new Person();     


var myCustomer = new Customer('Dream Inc.');
myCustomer.sayMyName();


Customer.prototype.setAmountDue = function(amountDue) {
    this.amountDue = amountDue;
};
Customer.prototype.getAmountDue = function() {
    return this.amountDue;
};


myCustomer.setAmountDue(2000);
alert(myCustomer.getAmountDue());

Don't put too much thought on it, [it's wrong anyway](http://stackoverflow.com/a/17393153/1048572?Benefits-of-using-Object.create-for-inheritance) — Bergi, Jul 01 '16 at 22:39

score 1 · Answer 1 · answered Jul 01 '16 at 22:39

By doing Customer.prototype = new Person() we are essentially doing class-inheritance as in another language. So, say we had:

var p = new Person();
Customer.prototype = p;
var c = new Customer();

The prototype (__proto__) of c is p and the prototype of p is Person.prototype.

The naive way to do inheritance would be to Customer.prototype = Person.prototype which would make all instances of Customer share the same methods as Person. But, if we did Customer.prototype.newMethod = ..., it would also modify the prototype of Person.prototype (as they are the same object.

To allow a distinction between Customer prototype and Person prototype, we use new Person() instead as an intermediate in the chain which still has a link to the prototype of Person but is a separate object.

Note: Usually it is more conventional to do Customer.prototype = Object.create(Person) followed by Customer.prototype.constructor = Customer; because doing new Person() means that the constructor of Person is called (which is usually not wanted unless you are actually making a real object).

Please let me know if the following is correct: Say person has some properties. Perhaps it can return your full name. Now we do var p = new Person();. So P inherits all the properties from person. Now we say Customer.prototype = p;. Since P inherits everything from person, Customer now inherits everything from p, which inherited from Person. Now C inherits from Customer. Is that a good understanding? — Muntasir Alam, Jul 01 '16 at 22:46
Yes, that is correct. c inherits Customer.prototype and if p.fullname = 'john', then c.fullname will also be 'john' as c inherits the properties in p (as well as all those inherited by p itself). — Dennis Shtatnov, Jul 01 '16 at 22:51
thanks that helped. I need to learn a bit more before I delve a bit deeper. Looks like this material is quite deep. — Muntasir Alam, Jul 01 '16 at 23:03

trincot · Accepted Answer · 2016-07-01T23:34:31.883

1

Every object has a prototype, which is also an object.

When you do

Customer.prototype = new Person();

... you set the Customer's prototype object. The methods and properties do not get copied into a Customer object, but when you reference a property/method on a Customer, the prototype chain is followed to find that property/method.

In the case of myCustomer.sayMyName, the JavaScript engine first looks in myCustomer's owned properties, then in its prototype, which is a Person object, and then finally in the prototype of Person which is an object that has that method:

Person.prototype.sayMyName = function() {
  alert('Hello, my name is ' + this.getName());
};

edited Jul 01 '16 at 23:34

answered Jul 01 '16 at 22:40

trincot

317,000
35
244
286

What exactly do you mean they don't get copied but reference properties? Does that mean to say Customer can use everything Person has in it, but its not like the actual VALUE of Customer is being changed? – Muntasir Alam Jul 01 '16 at 22:42
What do you mean with value? The only thing that changes in Customer is its prototype (its `__proto__` property). All the rest is regulated by the JavaScript engine, which implements the prototype chain inheritance. And yes, the properties exposed by Person are available to Customer, unless Customer has its own implementation for them. – trincot Jul 01 '16 at 22:47
I see. So the properties exposed by Person are avaliable to Customer, but the opposite is surely not true? – Muntasir Alam Jul 01 '16 at 22:49
Indeed, as you say. – trincot Jul 01 '16 at 22:49
Cool. Seriously this stuff seems so overly verbose, every documentation seems to explain this with such garbage wording. Thanks – Muntasir Alam Jul 01 '16 at 22:50
This is because JavaScript offers [more than one way](https://developer.mozilla.org/en/docs/Web/JavaScript/Inheritance_and_the_prototype_chain) to do it, which has led to a variety of programming styles, opinions, articles, ... – trincot Jul 01 '16 at 22:52
By the way, when I was studying through my book it says not to use the __proto__ to change stuff like this, and how its really bad. That being the case, should I think of __proto__ and prototype as the same thing? – Muntasir Alam Jul 01 '16 at 23:06
underscore underscore proto underscore underscore for some reason it didnt show double underscore – Muntasir Alam Jul 01 '16 at 23:21
Indeed, you probably shouldn't use `__proto__`. I just referred to that special property to indicate what changes when you assign to a constructor's `.prototype`. Note that you use `.prototype` on constructors (functions), while the object you instantiate with a constructor has the `__proto__` property which you normally should have no reason to access. I realise I should have written "a Customer object" in an above comment, where I just wrote "Customer". Sorry for the confusion that might have brought. – trincot Jul 01 '16 at 23:32
Thanks, you saved the day once again! – Muntasir Alam Jul 02 '16 at 00:09
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/116279/discussion-between-cresjoy-and-trincot). – Muntasir Alam Jul 02 '16 at 22:08
Just had a question if you could respond when you are free :) – Muntasir Alam Jul 02 '16 at 22:08

Using .prototype for adding method to variable

2 Answers2