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());

in OOP tems it means that Customer inherits from Person

Dayan Moreno Leon
– Dayan Moreno Leon

2016-07-01 22:34:37 +00:00
Commented Jul 1, 2016 at 22:34 — Dayan Moreno Leon
– Dayan Moreno Leon, Commented Jul 1, 2016 at 22:34
Don't put too much thought on it, it's wrong anyway

Bergi
– Bergi

2016-07-01 22:39:32 +00:00
Commented Jul 1, 2016 at 22:39 — Bergi
– Bergi, Commented Jul 1, 2016 at 22:39

trincot · Accepted Answer · 2016-07-01 23:34:31Z

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 1, 2016 at 23:34

answered Jul 1, 2016 at 22:40

trincot

357k38 gold badges282 silver badges338 bronze badges

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

12 Comments

Motombo Over a year ago

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?

trincot Over a year ago

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.

Motombo Over a year ago

I see. So the properties exposed by Person are avaliable to Customer, but the opposite is surely not true?

trincot Over a year ago

Indeed, as you say.

Motombo Over a year ago

Cool. Seriously this stuff seems so overly verbose, every documentation seems to explain this with such garbage wording. Thanks

|

Dennis Shtatnov · Accepted Answer · 2016-07-01 22:39:06Z

1

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).

answered Jul 1, 2016 at 22:39

Dennis Shtatnov

1,38311 silver badges17 bronze badges

3 Comments

Motombo Over a year ago

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?

Dennis Shtatnov Over a year ago

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).

Motombo Over a year ago

thanks that helped. I need to learn a bit more before I delve a bit deeper. Looks like this material is quite deep.

Collectives™ on Stack Overflow

Using .prototype for adding method to variable

2 Answers 2

12 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

12 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related