Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Refactor Inheritance with JavaScript Classes to Object Composition with Factory Functions

    Thomas GrecoThomas Greco

    The ES6 class keyword is just a neat syntax for creating constructor functions in JavaScript. The issue is that constructors force us to write tightly coupled code. In this lesson, we check out the use of factory functions and how they can be used to solve the issues that constructor's bring about.

    javascriptJavaScript
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    Instructor: 00:01 On this page, I'm going to define a new function using the ES6 class keyword. Our player class is going to take an object that has a name. I'm going to set the default value to default name. We are also going to give it a default health property with a value of 100.

    00:25 Inside of our constructor, we're going to use the this keyword to give us access to the new names and healths that are going to be passed into this class. If nothing's passed in, it's going to create an object with these default values.

    00:41 The last thing I'm going to give the player class is a method called reportStatus. When this method is called, it's going to log out a statement that says the player's name, along with his health percentage value.

    00:54 Now that my class is defined, I'm going to go ahead and instantiate an object from it. Here, I'm making a player1 variable. Since our class is essentially a constructor function, we're going to need to use the new keyword to instantiate new objects.

    01:12 Here, I'm going to create a new player with the name of John Smith. I'm going to leave the health alone, so we get the default health back.

    01:24 Now, if we log this out and execute this file, we'll see that an object has been created for us, and it has the name John Smith, as well as the default health of 100. Additionally, we can hook into our constant and fire off that reportStatus method as well.

    01:40 Let's see how we could do this with the factory function. A factory function is simply a function that takes in objects and it turns them. In this case, our factory function is going to take in an object that has a name and a health property.

    01:59 Just like in our class, I'm assigning default values to the name and health properties. Then all we need to do is pass them into the object we're returning. I also want to pass in that reportStatus function that we defined as a method in player.

    02:15 Now that our factory is complete, we can use it to create a player2 variable. Once again, I'm just changing the name from default name to Mike Tyson. We're going to keep the default health.

    02:29 Now, if we log this out, we should see an object being created, with the name Mike Tyson and a health of 100. If we run that report status, we'll see that that works as well.

    02:41 It's important to note that when using factories, as opposed to constructors, we don't have to use the new keyword, and therefore, we don't have to worry about forgetting to use the new keyword when creating an object.

    02:53 Additionally, factory functions give the standard usage of the this keyword. As a result, we're able to create new objects without having to tinker with this.

    Discuss

    Discuss