Understand JavaScripts this keyword within Prototypes
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.
Instructor: [00:00] 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.
[00:12] 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.
[00:26] 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.
[00:36] 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).
[00:48] 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.
[00:58] 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.
[01:16] 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.
[01:31] 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.
[01:43] 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.
[01:58] 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.
[02:18] It can be easy to think that the this context is on the next inline prototype object, but that's not the case.