Deep JavaScript Foundations, v3

Default Binding

Kyle Simpson

Kyle Simpson

You Don't Know JS
Deep JavaScript Foundations, v3

Check out a free preview of the full Deep JavaScript Foundations, v3 course

The "Default Binding" Lesson is part of the full, Deep JavaScript Foundations, v3 course featured in this preview video. Here's what you'd learn in this lesson:

Kyle explores the results of invoking a function with the default binding in non-strict mode and strict mode.


Transcript from the "Default Binding" Lesson

>> Kyle: And our fourth and final way of invoking a function is the fallback if none of the other three match, which is called the default binding. Here I have an ask function. And when I call it on line 12, you'll notice that on line 12, I don't have any context object.

I don't have any dot call. I don't have a bind, I don't have a new. It's just a plain old, normal function call. It doesn't match any of the other rules. So since it doesn't match any of the other rules, the fallback is defined in the spec as, in non-strict mode, default to the global.

It's why we print Kyle here, cuz there's a global variable called teacher, with a value Kyle. But notice that the askAgain function is in strict mode. And when we invoke it, we actually get a type error. Can anybody guess why there's a type error?
>> Speaker 2: Because the type of this, whatever that may be, doesn't have the teacher method or property on it?

>> Kyle: That's a good intuition. Specifically in strict mode, when you invoke it with no other this bindings, the default behavior is to leave this undefined. So you're now trying to access a property on the undefined value, which is a type error. Now, why do you suppose that they chose in strict-mode to make this undefined, so that it would create a type error?

It's because it is almost certainly an error on your part to define a this-aware function, and invoke it without it any this. That's a terrible idea, that's almost as bad as auto-creating globals. Which nobody would ever do, right? That's a terrible idea to invoke a this-aware function using the default binding.

And in non-strict or so-called sloppy mode, it ends up using the global object, which is almost never what you would want, in exactly the same way that it's almost never the case that you wanna auto-create globals. But strict mode fixes that up for us and it says, hey, you've made an error.

Your error is not that you're doing a this dot reference. Your error is that you've invoked the function without giving it a this. You need to use one of the other three ways. Use a new keyword, use a dot call, or apply, or a bind, or use a context solver.

So there we go, four ways to invoke a function. Those are the only four ways, by the way. That's it, just those four. That's all you need to learn to be able to understand how the this keyword get bound. But let's reset our mind back. The question that we set out to ask is, if I have a this-aware function, how do I know what its this keyword points at?

And our strong temptation is, we wanna assume that we can just answer that by looking at the function. And what we've now seen is, there's no way to look at the function to answer that question. You have to look at the call site. You have to look at how the function's being called.

Because every time it gets called, the how of the call controls what the this keyboard will point at.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now