Skip to content

### CuteJavascript: Tiny Guides that Pack a Punch ๐Ÿ‘Š๐Ÿ’ฅ๐Ÿ’ฅ ### ๐Ÿ†• ๐Ÿš€ the โ€˜thisโ€™ keyword in 0.8 minutes ๐Ÿš€

Notifications You must be signed in to change notification settings

SummerTinio/CuteJavascript

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

5 Commits
ย 
ย 

Repository files navigation

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: Class, Function
  • Prototypal Inheritance: Array
    • 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.

    • 'this' when inside a global function running in the browser/client-side (Chrome)
    • '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)
    • '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( ), .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, [โ“ค, ยฎ๏ธ])

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.

About

### CuteJavascript: Tiny Guides that Pack a Punch ๐Ÿ‘Š๐Ÿ’ฅ๐Ÿ’ฅ ### ๐Ÿ†• ๐Ÿš€ the โ€˜thisโ€™ keyword in 0.8 minutes ๐Ÿš€

Topics

Resources

Stars

Watchers

Forks