Most explanations of javascript prototypes are going to go something like this:

What is a prototype? A prototype is an object. Every javascript object has a prototype.

 Wait a second... So you're telling me that every javascript object has a prototype and a prototype is an object itself? Is this some kind of "Javascript Inception?"

Ahaha... No my young ninja, anytime you create an object it automatically has this magical prototype object/functionality.


Let's dig in a little more. In order to learn about prototypes we must first define 3 javascript programming terms:

  1. Objects
  2. Properties
  3. Methods

Let's take a look at a javascript object below:


function person(first, last){
	this.firstName = first;
	this.lastName = last;
	this.fullName = function(){
		return this.firstName + " " + this.lastName;
	}
}

var male = new person("John", "Doe");

Objects - Above we create a person object and a new person named "John Doe"

Properties - In the person object we have 2 properties which are this.firstName and this.lastName. We are saying that the person object has a first name and a last name.

Methods - A method is a function inside of an object. In the code above our method is this.fullName which will return the objects firstName and lastName in the form of a string.

After creating a new object it is very easy to access the properties & methods. The code below will output the 'male' objects firstName and the next line will access the fullName method and output the persons full name.

console.log(male.firstName);
console.log(male.fullName());

And that's a basic overview of Objects, Properties, and Methods. Ok, Moving on...


Using the person object from the code above we are going to create 2 person objects:

var male = new person("John", "Doe");
var female = new person("Sally", "Jones");

Now, let's say that we want this person object to have a middle name. How might we do this?

Well, of course! We could always add this to the person object like so:

function person(first, middle, last){
	this.firstName = first;
	this.middleName = middle;
	this.lastName = last;
	this.fullName = function(){
		return this.firstName + " " + this.lastName;
	}
}

Great! That works fine, but what if we want to add the middle name property without editing the person object. To accomplish this we would access the person prototype object.


function person(first, last){
	this.firstName = first;
	this.lastName = last;
	this.fullName = function(){
		return this.firstName + " " + this.lastName;
	}
}

var male = new person("John", "Doe");
var female = new person("Sally", "Jones");

person.prototype.middleName = "Jay";
male.middleName = "James";
female.middleName = "May";

Above, we use the prototype object to add a new property to the person object. By default the middle name will be "Jay". We could also do this with methods:


person.prototype.greeting = function(){
	return "Hello, my name is " + this.firstName + " " + this.lastName;
}
console.log(male.greeting());
console.log(female.greeting());

We just added a new method to the person object through the prototype. The code above will output the following:

Hello, my name is John Doe 
Hello, my name is Sally Jones

And that's the basics on how Javascript Prototypes work!

To sum it all up, here's your final definition of "What are Javascript Prototypes?"

A prototype is a magic function(object) that lets us add dynamic properties and methods to any javascript object.


Login

or Sign Up

Sign Up

or Login
×
tnylea
Cheers Friend!

I'm Tony, the creator of this site. I'm trying to increase my twitter following. Want to follow me?

Follow @tnylea If not, no worries :)