Declaring properties in Prototype vs. Constructor function? Pros and Cons?

Question

I have a hard time understanding why I should define properties on the constructor class or its prototype object.

Here what i understand about prototype - declaring properties in prototypes (instead of the linked parent object) saves performance since each child object will not have its own COPY of the parent's properties.

Question: But I thought you can't copy values from non-primitive types i.e. function objects only pass references... and can only copy from primitives?

**Does this mean if I inherit parent's methods like below I am copying the reference to the methods or actually copies? **

function Parent() {
   this.name = "jeff";
}

var child = new Parent();
console.log(child.name); /// is copied from parent or the reference is copied??

In the following example, I am referencing the prototype... right?

Parent.prototype.age = 9;
child.age // I looks at the parent class, then reference to prototype.age.

****Question 2:** If i can change the prototype.age for a particular object, then I'm actually copied the value right? So what's the point i.e.**

child.age = 10; // changed the value for THIS object

score 2 · Accepted Answer · answered Jan 12 '19 at 03:24

You have a few things mixed up. This is common when trying to understand javascript from an OO perspective, because it's not a very good fit. Maybe this will help a little:

This is just a function that (when called with new) returns an object:

function Parent() {
   // create a new object and call it this
   this.name = "jeff";
}

The object it returns is created fresh every time and that object is what this is referencing. So each time you run it, it makes an object, gives that object a name parameter set to jeff and retuns. It's easier to see if use a dynamic property:

function Parent() {
    console.log("creating a new object and a new value")
    this.value = Math.floor(Math.random()* 100000);
 }
 
 var child1 = new Parent();
 console.log("child1: ", child1)

 var child2 = new Parent();
 console.log("child2: ", child2)

Value isn't inherited, it's just assigned to the object when the function is called. Parent is just a function.

Like all functions Parent has a prototype property. When it makes an object with new it will link that object to its prototype. If you try to look up a property on the returned object and can't find it, javascript will look on the parent prototype. When you assign child.age = 10 now the child has its own age property. It no longer needs to look on the prototype. It only looks on the prototype for properties if it doesn't have its own.

function Parent() {
    this.name = "Jeff"
}

Parent.prototype.age = 9
 
var child = new Parent();

// child has no age prop so it looks on the prototype:
console.log(child.age)
console.log("Has age:", child.hasOwnProperty('age'))

child.age = 20
// now child has its own age property. It doens't look at the prototype
console.log("Has age:", child.hasOwnProperty('age'))
console.log(child.age)

When you say: Value isn't inherited, it's just assigned.... do you mean copied or reference or something else? — Shaz, Jan 12 '19 at 04:52
@Shaz No. In the body of the function it's *assigned* with a string literal: `this.name = "Jeff"` — Mark, Jan 12 '19 at 05:05
No im asking, so does the child object gets assign this.name value? Right? Not copied. Not referenced. Assign ? — Shaz, Jan 12 '19 at 05:32
Correct. The function `Parent()` makes a new object and gives it its own property `name` then returns that object. — Mark, Jan 12 '19 at 05:42
I kind of get it. But assigning is termed very loosely. What does it mean? Is the engine creating a new memeory space and allocating the value i.e. copy. Or pointer is pointing to the parents reference. Which one? — Shaz, Jan 12 '19 at 06:21
Ohh, I get it now, lol. I have to stop thinking like classical OOP where the child object inherits the methods for the parent class as its own copy. In JS, the new keyword returns an entirely new object with its own this.name label assigned to the child object. Essentially we are return the whole object (this) instead of copying or referring to parent's properties..... that's what I understood. — Shaz, Jan 12 '19 at 08:29

Declaring properties in Prototype vs. Constructor function? Pros and Cons?

1 Answers1