Video version of this article: https://youtu.be/usVUJ_M5nnU
Posts in this series:
- Default binding
- Implicit binding
- Explicit binding
- New binding (this post)
- Arrow functions
- Gotchas and final notes
In this series we talk about this
binding in JavaScript.
This is a very important topic. It's also something that even experienced developers frequently get wrong and / or have to think about.
Basically in JavaScript there are 4 modes for this
binding. Make that 5 if we include arrow functions.
In order of lowest priority to highest priority, here they are:
- Default binding
- Implicit binding
- Explicit binding
- New binding
- Arrow functions
- Gotchas and final notes
In this post we'll talk about new binding.
How new binding works
new
is a special keyword in JavaScript.
It does a lot of things, but we'll only talk in detail about how it relates to binding.
To start off, note that new
has even higher precedence than even hard binding. Another way of thinking about it is that it ignores the normal binding rules and does its own thing.
You can use new
when calling functions like so: new foo()
.
new
does 4 things:
- It creates a new empty object.
- It makes
this
be the new object. - It makes
foo.prototype
be the prototype of the object. - It implicitly returns
this
if nothing else is returned from the function.
For now ignore points 3 and 4 until a different blog post. Let's focus on points 1 and 2, the binding.
To recap, when you call a function with new
before it, you create a brand new empty object which is assigned to this
inside the function.
For example:
function foo() {
console.log(this);
}
new foo(); // outputs an empty object
As mentioned, new
has higher precedence than even hard binding.
const objForBind = { name: 'objForBind' };
function foo() {
console.log(this);
}
const boundFoo = foo.bind(objForBind); // hard bind foo to objForBind
new boundFoo(); // logs a new empty object to the console, not objForBind
Explanation:
new
has higher precedence than explicit and implicit binding. It ignores them, creates a new object, and binds it to this
.
Next up
Next up we have arrow functions.
Posts in this series: