DEV Community

Cover image for Understanding This, Bind, Call, and Apply in JavaScript

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...
Collapse
 
thepeoplesbourgeois profile image
Josh

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 😳

Collapse
 
beernutz profile image
beernutz • 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)

Collapse
 
zanehannanau profile image
ZaneHannanAU

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...
Collapse
 
katsos profile image
Nikos Katsos • 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.

Collapse
 
taniarascia profile image
Tania Rascia

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

Collapse
 
katsos profile image
Nikos Katsos

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

Collapse
 
levisr93 profile image
Levi

really amazing article!!
Thank you for dedicating time on THIS.
it really helped a lot!

Collapse
 
juliettet profile image
Juliette

Thank you Tania! I needed a refresher:-)

Collapse
 
manojkrajasekar profile image
Manoj Kumar Rajasekar

Best article/post on "this"..... !

Collapse
 
selvaraj_c profile image
Selvaraj Chandrasekaran

Excellent article

Collapse
 
gbolu profile image
Gbolu Adeyemi

This (no pun intended...) article was an amazing read. Very very helpful.

Collapse
 
robincsamuel profile image
Robin C Samuel • Edited

A concise article, thanks!

Collapse
 
orivolfo profile image
Ori Volfovitch • Edited

Great article!
I have been struggling with this for a very long time.
This was a very good explanation.

Collapse
 
chimexi_42 profile image
Chima Chidera Okoro

Awesome post...loved it

Collapse
 
nandumoura profile image
Fernando Moura

Great article

Collapse
 
pereriksson profile image
Per Eriksson • Edited

God herself wrote this article. This is really a piece of art! :-)