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
1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Understand JavaScripts this keyword within Prototypes

    Tyler ClarkTyler Clark
    javascriptJavaScript

    It may be confusing to understand how the this keyword is used when accessing a method through the prototype chain. For example if one object has a method with this used and is called through a linked object, what is the context? We’ll play around with this usage and show when context changes.

    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
    Discuss

    Discuss

    Transcript

    Transcript

    Instructor: Let's create a function called Foo that takes an argument of name and has this.name = name. Then we do Foo.prototype.myName as a function that returns this.name.

    We'll create another function called Bar that takes in a name argument as well. Inside, we'll invoke Foo with name. Then we do const a = new Bar(), passing through "Tyler" as a string and then console.logging a.myName.

    As you can see, we have some problems with this. We're trying to access a method that lives on the Foo prototype, but we created our a variable with the Bar function.

    At this point, these two prototypes are not linked together on the chain. We can connect them by doing Bar.prototype = Object.create(Foo.prototype).

    Now if we look at our console.log, we're no longer getting an error, but it's just an undefined at this point. Our goal is to have "Tyler" appear instead of this undefined from our console.log.

    We're trying to have it be assigned to the newly created object by the invocation of the Foo function inside the Bar function. When the new keyword is used, the this context used within the executing function is directly to the newly created object as a result from using this new keyword.

    If we add to the top of this file a use strict, we'll see that we're getting a bunch of errors. Use strict enforces a bunch of stuff. One in particular is making sure our this context is not undefined or pointed at the global scope.

    We need to invoke the Foo function with the correct context. If we did Foo.call(this, name), we see that we now get "Tyler" printed to the console.

    This is because we're controlling the this context used within the Foo function by passing through the context that the Bar function has when it's used with the new keyword, which is directed to the newly created object assigned to the a const.

    When we just log our object, we see that the property name is being assigned now that we have the correct context passed through. It's also good to mention that the this context of the myName function, even though it's a couple objects deep on the prototype chain of the a object, still points to this a object.

    It can be easy to think that the this context is on the next inline prototype object, but that's not the case.