The Prototype Copy

Intro to The Prototype

Prototype is an important concept in JavaScript objects. All JavaScript objects have a prototype. In simple words, the prototype is another object that the original object inherits from, which is to say, the original object has access to all of its prototype’s methods and properties.

Learning Objectives

  • What a prototype is and how it can be used.
  • Explain how prototype chains work.
  • Prototypal inheritance.
  • How to inherit methods and properties.
  • The basic do’s and don’t’s of prototypical inheritance
  • What Object.create does.

Since this is a very important concept please make sure to really understand it before you move on.

  1. This article is a straightforward introduction and demonstration of the concept. It also covers constructors again.. good time for a review! The important bits here, once you’ve covered the basics are ‘Prototype-based inheritance’ and the ‘Prototype chain’

  2. Watch this 8-minute quick introduction to the Prototype by Net Ninja:

  1. To go a bit deeper into both the chain and inheritance spend some time with this great article. Don’t skip the exercises at the end of the article! Important note: this article makes heavy use of __proto__ which is not generally recommended. The concepts here are what we’re looking for at the moment. We will soon learn another method or two for setting the prototype.

If you’ve understood the concept of the prototype then this next section about constructors will not be confusing at all!

function Student(name, grade) {
  this.name = name
  this.grade = grade
}
Student.prototype.sayName = function() {
  console.log(this.name)
}
Student.prototype.goToProm = function() {
  // eh.. go to prom?
}

If you’re using constructors to make your objects it is best to define functions on the prototype of that object. This means that a single instance of each function will be shared between all of the Student objects. In other words, if we declare the function directly in the constructor like we did when they were first introduced that function would be duplicated every time a new Student is created.

In simple examples like this one, that wouldn’t really matter much, but in a project that is creating thousands of objects, it really can make a difference.

Recommended Method for Prototypal Inheritance

Up until now we have seen several ways of making an object inherit the prototype from another object.

Having said that, the recommended way of setting the prototype of an object is Object.create ( here is the documentation for that method.) Object.create very simply returns a new object with the specified prototype and any additional properties you want to add. For our purposes you use it like so:

function Student() {
}
Student.prototype.sayName = function() {
  console.log(this.name)
}
function SeventhGrader(name) {
  this.name = name
  this.grade = 7
}
SeventhGrader.prototype = Object.create(Student.prototype)
const peter = new SeventhGrader("peter")
peter.sayName() // console.logs "peter"
peter.grade // 7

So what happens is that after creating the constructor for SeventhGrader we set it’s prototype to a new object that has a copy of Student.prototype.

Warning: The following doesn’t work:

SeventhGrader.prototype = Student.prototype

because it will literally set SeventhGrader’s prototype to Student.prototype (i.e. not a copy), which could cause problems if you want to edit something in the future.

Let’s see another example:

function Student() {
}
Student.prototype.sayName = function() {
  console.log(this.name)
}
function SeventhGrader(name) {
  this.name = name
  this.grade = 7
}
// don't do this!!!
SeventhGrader.prototype = Student.prototype
function NinthGrader(name) {
  this.name = name
  this.grade = 9
}
// noooo! not again!
NinthGrader.prototype = Student.prototype
NinthGrader.prototype.sayName = function() {
    console.log("HAHAHAHAHAHA")
}
const peter = new SeventhGrader("peter")
peter.sayName() //uh oh! this logs "HAHAHAHAHAHA" because we edited the sayName function!

If we had used Object.create in this example then we could safely edit the NinthGrader.prototype.sayName function without changing the function for SeventhGrader as well.

Additional Resources

In this section you can find a lot of helpful links to other content. This is a supplemental material for you if you want to dive deeper into some concepts.

  • This article from Lydia Hallie and this next video from Avelx explains the Prototype concept with graphics and simple language:

Student Approved Resource

Back to Lesson