Instance property vs Prototype property

Question

In the below code,

function Person(first, last, age) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
}

Person.prototype.planet = "Earth";

p1 = new Person("David", "Beckham", 39);
p2 = new Person("Lionel", "Messi", 30);

If multiple instances p1 p2 are created using constructor Person, then

How do I understand the difference about the property planet with property age? What difference it would make by adding property planet as this.planet in the constructor Person?

Note: Understanding prototype property

Answer 1

Consider situation when in the fututre we are going to change prototype property that is shared by all instances

function Person(first, last, age) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
}

Person.prototype.planet = "Earth";

p1 = new Person("David", "Beckham", 39);
p2 = new Person("Lionel", "Messi", 30);

console.log(p1.planet) // Earth

Person.prototype.planet = "Mars"

console.log(p1.planet) // Mars
console.log(p1.planet === p2.planet) // true

Changing one property on prototype will change it in all instances

Answer 2

A prototype property will be part of any object created from the so-called prototype, and this includes prototype chain.

A instance property will be part of the whole instance, and in your case, it will part of any instance because you're adding it within the constructor function:

function A() {
   this.x = 11;
}

var instance = new A();
instance.x = 11;

Both above cases are adding the property to the own object rather than in the prototype.

Furthermore, adding properties to the prototype has a side effect:

function A() {}
A.prototype.x = 11;

function B() {}
B.prototype = Object.create(A.prototype);

var instanceA = new A();
var instanceB = new B();

A.prototype.x = 12;

// Both "x" will hold 12
alert(instanceA.x);
alert(instanceB.x);

Learn more about prototype chain on MDN.

About some OP comment

So, In java terminology, age is an instance member and planet is a static member. To define a static member, we use prototype property, am I correct? –

This is a wrong statement.

Prototype properties aren't static, since prototypes are regular objects. It's just JavaScript uses prototype chain to implement inheritance and it relies in a standard property called prototype.

In JavaScript there're no statics. When you access any property, JavaScript's runtime will look for it through the prototype chain:

function A() {};
A.prototype.x = 11;

function B() {};
B.prototype = Object.create(A.prototype);

function C() {};
C.prototype = Object.create(B.prototype);

var instanceC = new C();
var x = instanceC.x;
// Once you request a property "x", the runtime will do the following process:
// 1) Is "x" in the own object? No, then 2)
// 2) Is "x" in current object's prototype? No, then 3)
// 3) Is "x" in the parent prototype? No, then 4)
// 4) And so on, until it reaches the top-level prototype, and if this has no
//    "x" property, then runtime will return "undefined"

Answer 3

It's actually memory usage. Here are some images I have created depicting each problem.

In the image below, each instance of person is linked to the same prototype object. This saves memory if multiple instances are created pointing to the same object. However, if you change 'Earth' to 'Mars' every instance will have the same change.

---

In the image below each instance will point to a completely different property linked specifically to that instance. If you believe a specific planet can change names, you should do this.. otherwise use prototype because this will use more resources.