DEV Community

Spyros Argalias
Spyros Argalias

Posted on • Originally published at sargalias.com

2 1

This binding in JavaScript – 4. New binding

This post (This binding in JavaScript – 4. New binding) was originally published on Sargalias.

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:

  1. Default binding
  2. Implicit binding
  3. Explicit binding
  4. New binding
  5. Arrow functions
  6. 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:

  1. It creates a new empty object.
  2. It makes this be the new object.
  3. It makes foo.prototype be the prototype of the object.
  4. 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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Explanation:
new has higher precedence than explicit and implicit binding. It ignores them, creates a new object, and binds it to this.

Tiugo image

Fast, Lean, and Fully Extensible

CKEditor 5 is built for developers who value flexibility and speed. Pick the features that matter, drop the ones that don’t and enjoy a high-performance WYSIWYG that fits into your workflow

Start now

Top comments (0)

Neon image

Next.js applications: Set up a Neon project in seconds

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Get started →

👋 Kindness is contagious

Engage with a wealth of insights in this thoughtful article, valued within the supportive DEV Community. Coders of every background are welcome to join in and add to our collective wisdom.

A sincere "thank you" often brightens someone’s day. Share your gratitude in the comments below!

On DEV, the act of sharing knowledge eases our journey and fortifies our community ties. Found value in this? A quick thank you to the author can make a significant impact.

Okay