Understand what the prototype object is
Describe and diagram the relationship between __proto__, prototype and constructor
Add methods and properties on the prototype object to write more efficient code
Explain the differences between adding methods and properties to the prototype versus the constructor function
Creates an object out of thin air
Assigns the value of 'this' to be that object
Adds 'return this' to the end of the function
Creates a link (which we can access as __proto__) between the object created and the prototype property of the constructor function
We previously used the new keyword to create objects from constructor functions - let's recap what it does
We're going to focus on the 4th point - let's see what that link looks like!
Person
Person
.prototype
elie
colt
.__proto__
.prototype
.constructor
// this is the constructor function
function Person(name){
this.name = name;
}
Let's see that previous example in code - feel free to look back at the diagram
// this is an object created from the Person constructor
var elie = new Person("Elie");
var colt = new Person("Colt");
// since we used the new keyword, we have established
// a link between the object and the prototype property
// we can access that using __proto__
elie.__proto__ === Person.prototype; // true
colt.__proto__ === Person.prototype; // true
// The Person.prototype object also has a property
// called constructor which points back to the function
Person.prototype.constructor === Person; // true
Where does the prototype property fit into all of this? Remember, the prototype is shared among all objects created by that constructor function
// this is the constructor function
function Person(name){
this.name = name;
}
// this is an object created from the Person constructor
var elie = new Person("Elie");
var colt = new Person("Colt");
Person.prototype.isInstructor = true;
elie.isInstructor; // true
colt.isInstructor; // true
// how were we able to access properties on the prototype??
// __proto__!
How does JavaScript find methods and properties?
Array
Array
.prototype
.__proto__
.prototype
.constructor
.__proto__
Object
.prototype
.__proto__
arr
null
function Person(name){
this.name = name;
this.sayHi = function(){
return "Hi " + this.name;
}
}
elie = new Person("Elie");
elie.sayHi(); // Hi Elie
// now this code works, but it is inefficient
// every time we make an object using the new keyword we have to redefine this function
// but its the same for everyone! Let's put it on the prototype instead!
Now that we know that objects created by the same constructor have a shared prototype, let's refactor some code
function Person(name){
this.name = name;
}
Person.prototype.sayHi = function(){
return "Hi " + this.name;
}
elie = new Person("Elie");
elie.sayHi(); // Hi Elie
// Muchhh better
function Vehicle(make, model, year){
this.make = make;
this.model = model;
this.year = year;
}
Vehicle.prototype.isRunning = false;
Vehicle.prototype.turnOn = function(){
this.isRunning = true;
}
Vehicle.prototype.turnOff = function(){
this.isRunning = false;
}
Vehicle.prototype.honk = function(){
if(this.isRunning){
return "beep!";
}
}
Every time the new keyword is used, a link between the object created and the prototype property of the constructor is established - this link can be accessed using __proto__
The prototype object contains a property called constructor, which points back to the constructor function
To share properties and methods for objects created by a constructor function, place them in the prototype as it is the most efficient