Prototype in JavaScript

Prototype is very interesting concept, that is only exist in JavaScript.

As you may know Object in JavaScript inherits its property to their child.

function parents() {
  this.tall = 'very tall';
  this.face = 'handsome';
}
let child = new parents;

If we use the new keyword, it will inherit the declaration of its property.
Child will have the same property of its parents parents .
This is the manual inheritance from its parents, but only in JavaScript, there is another way to inherit its property to their child.

> Prototype comes into play here.

Let’s toggle the arrow.

Did we add Prototype property in parents?

Nooo, right?

We can call a prototype a gene.

If my parents were tall, I will be tall.
If my parents were handsome and pretty, I will be handsome.
// I know it's not always happen to the real world.. but worth to have as an example here :)

^Like this, once we set some property in the prototype(gene) of its parents, child has the same property.

parents.prototype.lastName = 'lee';
console.log(child.lastName); // ???

If there’s no property name called lastName in a object, the machine will look for its parents too. <- This is called prototype chain .

console.log(child.lastName); // 'lee'

Now what?

You might have encountered this website, right?

It said Array.prototype.slice()
we normally use the slice method without a prototype keyword, but why it is showing you Array.prototype.slice()?

It is because Array has a property called slicein their gene.

Array is a data type of javascript that can hold multiple values with its index. and this is also a type of object; it inherits its property to its child, the child will get its parent’s gene property which is, for example, the slice method.

So there are already builtin a ton of prototype properties in Array.