Join egghead, unlock knowledge.

Want more egghead? It's 45% off for a limited time only!

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

Unlock All Content for 45% Off

Already subscribed? Sign In

Save 45% for a limited time.

Get access to all courses and lessons on egghead today.

Autoplay

    The "this" keyword: The new and window Binding

    Tyler McGinnisTyler McGinnis

    In this lesson we talk about the "new binding" as well as the "window binding" for rules three and four of how to understand the "this" keyword in JavaScript.

    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

    00:00 In this video, we're going to talk about the last two rules for figuring out what this keyword is referencing. The first one is new binding, and the last one will be the Window binding. You may have seen this before. What we have here is a function.

    00:13 We have capitalized the first letter to express that this is going to be a constructor function, and that should be called with the new keyword. Let's go ahead and have this function take in a color, a name, and a type. Then what we usually do is just go ahead and add those to this.

    00:27 What happens when this function is invoked? Let's make a new zebra. Because we're invoking it with the new keyword, what's going to happen is, behind the scenes here, JavaScript is going to create a brand new object for us and save it as this. It's a little bit more fancy than just a regular object, which we'll talk about in another video.

    00:46 For now, you can leave out. This in here is just an object. The new binding rule states that when a function is invoked with the new keyword that this keyword inside that function is bound to the new object being constructed, or this object right here.

    00:59 The last rule for trying to figure out what this keyword is referencing inside a function is Window binding.

    01:04 Let's say here we had a say age function just like we had in the last video. All it's going to do is console.log this.age.

    01:14 If I add a function, what we'd usually do is, if we wanted to call say age in the context of me, we would have to do sayage.call and pass in me.

    01:23 What happens if we didn't have to do that? What if we just tried to invoke say age and we don't specify what the this keyword is?

    01:30 We're not using call. There's nothing to the left of the dot, so let's see what happens here. I'm going to command all this stuff out, and I run this. You'll notice I get undefined, because what's happening is if you invoke a function that uses the this keyword but doesn't have anything to the left of the dot, it's not using the new binding, and you're not using call, apply, or bind, then the this keyword is going to default to the Window object.

    01:54 If I come in here and add a property of age to the Window object and then I invoke say age again, what we should see is undefined. Then I set the age property on Window. Then it gives me 35. Probably not the best thing in the world, but it's what happens in JavaScript.

    02:14 What's interesting, though, is if I come in here and I run this function in strict mode, basically, what strict mode allows us to do is it allows us to opt into a more strict version of JavaScript.

    02:24 Now, if I go ahead and try to run say age, what happens is I get an error because strict mode is smart enough to know that, "Hey, you don't want to do what you're doing. You don't want the this key word to be bound to the Window object or to reference the Window object, so I'm not even going to let you do that."

    02:39 To recap all our rules, we have implicit binding, which is you look to the left of the dot, at call time, explicit binding, which is telling a function what the context of the this keyword is going to be using call, apply, or bind.

    02:52 The new binding is whenever you have a function invoked with the new keyword, the this keyword is bound to the new object being constructed. Then the Window binding where if none of these rules apply, then the this keyword is going to default to the Window object unless you're in strict mode. Then it's just going to be undefined.

    Discuss

    Discuss