DEV Community

Understanding This, Bind, Call, and Apply in JavaScript

Tania Rascia on October 28, 2019

The author selected the Open Internet/Free Speech Fund to receive a donation as part of the Write for DOnations program. The this keyword is a ver...

Read full post

Josh • Oct 28 '19

This is a fantastic post covering the intricacies and nuances of this! If you're open to receiving suggestions, I think a section that covers how implementing a handleEvent function within an object ensures proper scoping of this (with almost zero overhead to memory and CPU) to the object when it is used in cases like addEventListener(event, objectImplementingHandleEvent). It's a ridiculously powerful pattern, no joke 😳

Nikos Katsos • Oct 29 '19 • Edited

tl;dr; (opinionated)
Code in es6+ and you will never need call, apply and bind. Fat arrow will do the hard work for you.

But read this article. You have to know why you need fat arrow and when is really needed.

Tania Rascia • Oct 30 '19

I don't think that's the tl;dr...

Nikos Katsos • Nov 1 '19

sorry, forgot to mention that this is my personal perspective from my experience

beernutz • Oct 30 '19 • Edited

Great article, thank you!

I wonder if it is worth explicitly pointing out in the "fat arrow" example, that the "arrowFunction" call to "this" could be pointing at global scope "this".

That alone seems like a good argument for avoiding the use of "this" entirely, as it feels like it violates the "Principal of Least Surprise".

(sorry for all the quotes, just seemed to make sense)

ZaneHannanAU • Oct 30 '19

May as well do it:

call moves the hidden this to a self parameter (ie: rust).
apply moves the parameters tuple list to a tuple or fixed array.
bind moves the hidden this to a self and creates a context using it.
this is the object it was called upon; or undefined in toplevel strict mode.
arrow functions consume only arguments and context, and do not have a this context of their own. In rust the closest is a closure with move. This is normal.

These can be composed in insane ways:

const fbind = fn => Function.prototype.call.bind(fn);

In this case, I move the this hidden parameter into the self leading parameter. I use this a lot actually... my typescript for it is

export declare const fbind: <F extends (this: T, args: any[]) => R, T, R>(fn: F) => (self: T, ...args: Parameters<F>) => R;

Furthermore, including Reflect and Proxy:

Reflect.apply adds a dynamic dispatcher (function) option.
Reflect.construct adds a class dispatcher (class/new) option.
Proxy { apply() {} } is the inverse of Reflect.apply; and can be heavily reused in children.
same in Proxy { construct() {} }

Adding getters and setters:

get a() {} returns some value representing a; which may be a constant or variable or an internal value. This can also have side effects...
set a(val) {} returns void (undefined) and sets a; or else throws when there's some issue with val. For example, checking Number.isInteger(val) and throwing when it fails. Side effects allowed here as well...