CuteJavascript: Tiny Guides that Pack a Punch ๐๐ฅ๐ฅ
-
by @SummerTinio โ
๐ 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
Inside objects, 'this' refers to the object itself.
- { โฌ, โฌ, โฌ 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.
Inside a function, 'this' === the object that owns that function.
- It depends on the function's execution context
-
Where th r u running me?? ๐ค - your function
- Are you running it from inside another Object? what data type is it? -- or, ...
If the function doesn't belong to any object
-
i.e. If it sits directly on the global execution context,
-
then 'this' === the window object if you're in a browser.
-
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.
-
but if you want to, you can manipulate what 'this' refers to, by using .bind(), .call(), or .apply():
.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, [โค, ยฎ๏ธ])
- .call( )
How does method chaining relate to '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! ๐ฑโ๐
๐ ๐ โค ยฎ๏ธ ๐ ๐๐
License & Copyright
All materials herein are ยฉ 2021 Summer Tinio.
This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 4.0 Unported License.