image
Introduction to JavaScript Constructor Methods and Prototypes
Introduction to JavaScript Constructor Methods and Prototypes
Difficulty
Advanced
Duration
5m
Students
79
Ratings
5/5
Description

This practical course explores JavaScript Constructor Methods and Prototypes. A constructor method attaches itself to an instance of the constructor object, a prototype does not and is attached directly to the constructor.

Learning Objectives

  • Learn how to create a constructor method
  • Learn how to create a constructor prototype
  • Learn the differences between a method and a prototype
  • Learn when to use one or the other

Intended Audience

This course is intended for anyone who wants to learn about JavaScript Constructor Methods and Prototypes.

Prerequisites

Anyone with an interest in using the rest operator in JavaScript or who wants to improve their knowledge of JavaScript in general.

Transcript

Introduction to JavaScript Constructor Methods and Prototypes. Object literals can have function methods. Object constructors can have methods that are bound to each instance of the object. On the screen, I have a user constructor. I'm going to add to it a constructor method that displays the username. this.userInfo, and I will set this equal to a function, and this function will return a template literal. Starting with back ticks "Their username is", now using a string expression, this.username.

Now this is ready. I want to create a new user to test this out. const userOne equals new User with a username of staceyLacey and the email of slacey@example.com. Now I will type console.log userOne.userInfo. I will execute this and the message "Their username is stacyLacey" appears on the right. So this constructor method works. And now every instance of the user object will store a copy of this userInfo method in the memory. JavaScript has a built-in method for me to verify this known as hasOwnProperty. I'm going to convert this console.log over to use this method.

So now this states userOne.hasOwnProperty and I have to pass the property name as a string. When I execute this, it returns true. Believe it or not, this presents a problem. And this goes back to what I stated a little earlier. Every instance of the user object will store the userInfo method in the memory even if the method is never used. In JavaScript, there's a mechanism called Prototypes, which is a way for JavaScript objects to inherit features from one another. I'm going to comment out the console.log and I'm going to create a prototype that displays the userEmail. And I will begin by typing user.prototype.userEmailInfo and I will set this equal to a function and the function will return a template literal. Their email is using the string expression this.email.

Now I'm going to use the hasOwnProperty method again on this prototype. console.log userOne.hasOwnProperty passing through userEmailInfo. And when I execute this, there is a value of false in the console. So what happens when I invoke this method on the userOne object? I will change the hasOwnProperty method to userEmailInfo and execute the console.log. And the method has returned "Their email is slacey@example.com"

So how did this method work when it isn't attached to the userOne object? JavaScript first checks the object to see if the property method exists. If it doesn't, it goes through the prototype chain checking if this method exists at the object's constructor. If it does exist, then the method gets executed on the referencing instance of the object as seen on the screen. The advantage is that each object now has access to this userEmailInfo method without directly having this method as part of each instance of the user object, reducing memory overhead. This is referred to as prototypical inheritance.

So when should you not be using prototypes? When you're working with single instances of an object usually created with the object literal, not an object constructor. And that's it! Thanks for watching at Cloud Academy.

About the Author
Students
7051
Labs
24
Courses
73
Learning Paths
31

Farish has worked in the EdTech industry for over six years. He is passionate about teaching valuable coding skills to help individuals and enterprises succeed.

Previously, Farish worked at 2U Inc in two concurrent roles. Farish worked as an adjunct instructor for 2U’s full-stack boot camps at UCLA and UCR. Farish also worked as a curriculum engineer for multiple full-stack boot camp programs. As a curriculum engineer, Farish’s role was to create activities, projects, and lesson plans taught in the boot camps used by over 50 University partners. Along with these duties, Farish also created nearly 80 videos for the full-stack blended online program.

Before 2U, Farish worked at Codecademy for over four years, both as a content creator and part of the curriculum experience team.

Farish is an avid powerlifter, sushi lover, and occasional Funko collector.

Covered Topics