Check out a free preview of the full Deep JavaScript Foundations course:
The "this Review" Lesson is part of the full, Deep JavaScript Foundations course featured in this preview video. Here's what you'd learn in this lesson:

In reviewing "this," Kyle quizzes the students.

Get Unlimited Access Now

Transcript from the "this Review" Lesson

[00:00:00]
>> Kyle: Let's check some understanding. How do you borrow a function and implicitly set this? Remember how I took the foo function and I put it on the O2 object and then I used O2.foo to call it? That was borrowing the function reference and then calling that was an implicit binding for this keyword.

[00:00:22]
>> Kyle: How do you explicitly set this for a function call?
>> Speaker 2: Call and apply.
>> Kyle: .call or .apply. How can you lock a specific this to a function?
>> Speaker 3: Bind.
>> Speaker 2: Bind.
>> Kyle: .bind, why is that good? What's helpful about that?
>> Speaker 2: You always know what it is.

[00:00:42]
>> Kyle: It's predictable. Why is it bad?
>> Speaker 2: It's inflexible.
>> Kyle: It's loss of flexibility. How do you create a new this for the function call?
>> Speaker 2: New keyword.
>> Kyle: The new keyword, not a trick question. What about arrow functions? You probably all heard about arrow functions. Everybody's enamored with them.

[00:01:04] I don't like arrow functions. I don't really use them but there's one particular thing that you should know about arrow functions. And that is that arrow functions do not have a this keyword in them. Which means if you have an arrow function with a this reference in it like I do on line 2.

[00:01:22] The this keyword inside of that function is not a special keyword at all. It's just a random variable name. And because of that, it's going to look up the lexical scope chain like any regular variable would. So what it's gonna do is go from the arrow function to the enclosing function, which in this case is the foo function.

[00:01:45] And it's gonna say hey, foo function, do you know who this is? And the foo function's gonna say yep, I've got this. So the arrow function is said to have a lexical this behavior. It's a this that behaves by lexical rules. As opposed to the this binding rules cuz it doesn't really have a this itself.

[00:02:05] It's not a special keyword in arrow functions.
>> Speaker 2: So where does it come from then? It just makes a this object?
>> Kyle: Nope. It doesn't exist in that function.
>> Speaker 2: So when did error.
>> Kyle: No, it goes up one level to the foo function and says hey foo, have you ever heard of a this?

[00:02:23] Remember earlier in the workshop when we did that whole look up thing and we were looking for variables? It's gonna do the same thing with the this keyword here. Cuz it's not a special keyword inside of the arrow function, it's just a regular old variable.
>> Speaker 2: So if the foo function was a fat arrow function too, it-

[00:02:40]
>> Kyle: It would go one more level up to the global and say hey global, do you have a this? And the global always has a this.
>> Speaker 2: Okay.
>> Kyle: A lot of people like to say that arrow functions have a hard bound this, that is inaccurate. Arrow functions don't have a this.

[00:02:59] So they always lexically inherit from their enclosing scope.
>> Speaker 2: Do you hear reference or if it's in the global scope?
>> Kyle: Nope. Global scope always has a this.