🚀 CuteJavascript: the ‘this’ keyword in 0.8 minutes 🚀

In JS, we either use ⬛ primitives or { ⬛, ⬛, ⬛ } objects.

Other data types are, or inherit, from either one of these. via prototypal inheritance, not classical inheritance.
Functions are also objects, but with an invocable code property { 🆒, ⬛, ⬛ }.
Classes are also objects { 🟦, 🟥, 🟧 }, and so are Arrays [ ⬛, ⬛, ⬛ ].
Prototypal Inheritance: Class, Function
Prototypal Inheritance: Array

{ ⬛, ⬛, ⬛ console.log(this) } -> { ⬛, ⬛, ⬛ }
Inside Class constructors, 'this' refers to an instance of that class
(i.e. from { 🟦, 🟥, 🟧 }-> the specific thing that it's constructing { 🆗, 🆘, 🆚 }).
The value of 'this' also changes depending on how deeply nested you're using 'this' in an object.

i.e. If it sits directly on the global execution context,
then 'this' === the window object if you're in a browser.
- 'this' when inside a global function running in the browser/client-side (Chrome)
Or if you're not running it in a browser, then ‘this’ === whatever the global object is.
Inside a global function running in Node, 'this' === the 'global' object.
- 'this' when inside a global function running in Node (Debian WSL)
but if you want to, you can manipulate what 'this' refers to, by using .bind(), .call(), or .apply():

.bind( )
- “bind” / “force it to use”
- Inside a React ClassComponent's constructor, we can write: this.🆒 = this.🆒.bind(this).
  - and for that function, 🆒, we've made sure that 'this' refers to an instance of that ClassComponent.
- 🆒.bind(this)
  - "Whatever 'this' refers to at the lexical place you're sitting at. That's what you should use from now on ok? 😡 But I'm not invoking you yet. 😌" - you to your function
- for partial application of functions
  - "partial" 'cause you haven't called or applied it yet.
  - i.e. giving your function args for it to use in the future
to actually bind args and invoke your function at the same time,
- .call( )
  - C == Commas
  - 🆒.call(this, ⓤ, ®️)
- .apply( )
  - A == Array
  - 🆒.apply(this, [ⓤ, ®️])

⬛️.spherify().blueify().squigglify()
⬛️-> ⚫️-> 🔵-> 🌀
'this' is whatever 'this' was, at the left of the dot.
Chaining Object methods on methods on methods is possible since, after modifying ‘this,’ (⬛️-> ⚫️) each of those methods return ‘this,’ (⚫️) for the next method to consume. (⚫️-> 🔵) .. return (🔵) .. then (🔵-> 🌀) .. return (🌀) and so on.
It's like adding beads to a bracelet. Before you can add another bead, you gotta expose the thread inside it.

When you realize that all things in JS are just a ⬛ primitive or an { ⬛,⬛,⬛ } object, it's a lot easier to 🧠remember what 'this' is.

✌️ Thanks for reading! 🐱‍🚀

🌠🚀 ⓤ ®️ 🆒 🚀🌠