CODEWITHSUNDEEP
javascript
Motombo
Motombo

Reputation: 1787

simple usage of .prototype, whats happening behind the scenes?

I've been reading a javascript book which just recently started introducing prototype. I've also been looking at some other stackoverflow questions on .prototype and __proto__ and they all have some examples that are a bit too advanced for me and i'm having trouble understand them. Now the book is explaining this in a very confusing way so I thought I'd ask here for the basic understanding of it. Heres some code I just made up

function Person(firstname,lastname){
    this.firstname = firstname;
    this.lastname = lastname;
}

Person.prototype.getFullName = function(){
    return this.firstname + " " + this.lastname;
}
var john = new Person('John','Doe');
console.log(john);

Now heres where my confusion arises. To my understanding, behind the scenes every function has a prototype but until we use the keyword of new it isn't really coming in to play.

To what I can understand or deduce from my book is that .prototype here is allowing us to add a method to the Person function.

Cool. So If I do console.log(john.getFullName());, we get John Doe. Nice! Just as suspected. But how come if I do console.log(john) it points to the Person function and displays firstname: 'John', and lastname: Doe.

What happened to the method we just added with Person.prototype.getFullName? Why isn't that showing when we log John?

Upvotes: 0

Views: 46

Answers (3)

Batman
Batman

Reputation: 702

Prototypes are used for inheritance in javascript. Think of it like this: every object (except one) has a prototype. the one that doesn't is at the top of the chain and is the end of the inheritance hierarchy. Every object in that chain gets all of the functions and properties of the one above it. This is done through the prototypes. When you add a function or another variable to an objects prototype, as I understand it, every instance of that object will receive it's own copy of it. The thing about java script is that there are about 6 different ways to create an object -- the new keyword is entirely syntactical sugar -- and each one creates an object. Your book should have said at one point or another that even functions are objects.

Javascript isn't that confusing. It's just powerful and designed differently. Its a week reference system making it robust but also prone to errors due to programmer mistakes.

Upvotes: 0

Dennis Shtatnov
Dennis Shtatnov

Reputation: 1363

Objects in Javascript work by 'prototypal inheritance' where each object has regular properties firstname, lastname but is also linked to a regular object used as the 'prototype' (specified in the __proto__ property). The linking process is done automatically when you do var john = new Person(...): by specifying Person.prototype, it knows that when you make an instance of Person, it should be linked to Person.prototype

When you do console.log(john), it will only show the properties directly in the john object.

But, when you do john.getFullName(), Javascript's inheritance model knows that if it doesn't find getFullName in the john object, it will recursively look for it in __proto__ until it finds it. So it will use the getFullName function in Person.prototype because it was linked with that object when john was created.

Upvotes: 0

Matis Lepik
Matis Lepik

Reputation: 1152

It shows up if you expand the __proto__ dropdown in the console. Because you added the function to the prototype, that's where it shows up.

Function in prototype

Upvotes: 1

Related Questions