bind and this - Object Creation in JavaScript P1 - FunFunFunction #43
HTML-код
- Опубликовано: 20 июн 2024
- 💖 Support the show by becoming a Patreon
/ funfunfunction
This video is the first in a video series about how to do Object Creation in JavaScript. I will NOT be teaching object orientation principles in general - this video series is for you if you’re already pretty familiar with object orientation, but confused around how it works in JavaScript specifically. At the end of this series, you’ll be a lot less confused about the prototype, classes, bind, Object.create, modules, factories, constructors and so on.
Object Creation in JavaScript
goo.gl/KFeTFN
Higher-order functions in JavaScript
goo.gl/3aTDR6
💛 Follow on Twitch
We record the show live Mondays 7 AM PT
/ funfunfunction
💛 Fun Fun Forum
Private discussion forum with other viewers in between shows. www.funfunforum.com. Available to patron members, become one at / funfunfunction
💛 mpj on Twitter
/ mpjme
💛 CircleCI (Show sponsor)
Robust and sleek Docker-based Continuous Integration as a service. I used CircleCI prior to them becoming a sponsor and I love that their free tier is powerful enough for small personal projects, even if they are private. Use this link when you sign up to let them know you came from here:
circleci.funfunfunction.com
💛 Quokka (Show sponsor)
Wonder how MPJ evaluates JavaScript inline his editor. Quokka is the answer - use this link when you buy to let them know you came from here:
quokka.funfunfunction.com
💛 FUN FUN FUNCTION
Since 2015, Fun Fun Function (FFF) is one of the longest running weekly RUclips shows on programming 🏅 thanks to its consistency and quality reaching 200,000+ developers.
🤦♂️ The Failing Together concept is what makes FFF unique. Most coding content out there focus on step-by-step tutorials. We think tutorials are too far removed from what everyday development is like. Instead, FFF has created a completely new learning environment where we grow from failure, by solving problems while intensively interacting with a live audience.
Tutorials try to solve a problem. Failing Together makes you grow as a developer and coworker.
📹 Each show is recorded live on Twitch in a 2-hour livestream on Mondays. The host, assisted by the audience, is tasked to complete a programming challenge by an expert guest. Like in the real world, we often fail, and learn from it. This, of course, reflects what the audience identifies with, and is one of the most praised aspects of the show.
⏯ On Fridays, an edited version of the show is adapted for and published on RUclips.
Content Topics revolve around: JavaScript, Functional Programming, Software Architecture, Quality Processes, Developer Career and Health, Software Development, Project Management 
Наука
"Confusion is your friend. It means you're learning" - that is going on my wall.
Best explanation of `bind` I've seen. Thanks!
For anyone confused, `this` in functions is different depending on execution context. So if you call it from the global scope aka window, this is going to equal window. Also do note that when you bind the functions with .bind or _.bind you cannot override it anymore.
talk about: prototypal inheritance vs class extends
Yes Please! it will take many eposides for that
Same thing
👆
just syntactic sugar
After a really hard day of almost crying after work for writing as much sub-par code as I can physically type in 10 hours without a f-ing brake, you sir, have the ability to make me enthousiasthic about code again. Thank you...
Dude, your videos are AMAZING. Please never stop making them.
I think he stopped :'(
@@dan110024 thank god. this video was terrible. I could barely get through it
@@MA-ek1xl you're a doodoo head
When the subject is JavaScript, this is the best RUclips Channel of the world.
I would like to add a few things that helped me personally to come to understanding (please correct me if they are wrong):
- 'this' keyword refers to the , so the context is represented by an object
- depends on where the function is being called from
How the is determined upon function call?
- dog.talk() -> the context is the left part of the call (the object within which it's being called)
- talkFunction() -> here since the left part is empty, the is the global object
let boundFunction = someFunction.bind(newContextObject)
Here, the bind() call returns a function with artificially bound to a new object
To illustrate the artificial nature of this binding, V8 debugger adds a few internal properties for a newly created bound function that can be examined in your favorite debugger such as :
[[BoundArgs]], [[BoundThis]] and [[TargetFunction]]
So, what essentially clarified the thing to me is realizing that 'context' is just an object which is determined upon a function call by some set of rules, and 'this' keyword simply refers to that object.
"Good Monday morning!"
Your positivity is contagious. Thank you!
*Today I learnt:* JS is a bastard from Scheme and Java.
But this isn't necessarily true. As we learned a couple of weeks ago: JS is the legitimate son of Rhaegar Targaryen and Lyanna Stark, and thus not a bastard.
@@Silverjerk lol
Holly crap dude. This video started playing on its own after another I was watching and I'm glad my hands were busy and I didn't turn it off right away.. You have By FAR the most awesome and intuitive way of explaining things on youtube. Despite knowing all this, I still learned a lot!
For the first time in 7-8years of working with jquery, I finally understand bind! Thank you!
Thanks for the video! I've been struggling to learn JavaScript lately, but your content is helping me a lot!
This guy... This knowledge... This ACCENT... I'm brazilian, and this accent is so beautiful to me. His teaching is excellent. Hope he returns, some day.
When you feel confused it means you are learning - love it!
Venturing into Javascript from a Java background, this looks like a perfect video series for me!
You’re fabulous ! I love the way you provide great insight without being boring !
well, I'd say the best topic for the next video is the 'prototype' keyword and inheritance. after that, some talk on class design (via the 'class' keyword) would be awesome. thx for an awesome video!
I have been using 'bind' in my React components for over a year because another course said to, and now I know why. Thanks!
Love your presenting style! Great video, look forward to the rest!
Hey MP!
I've only reached half way through this video and I cant tell you how satisfied I am at last by the explanations given by you on the nature of JavaScript in a nutshell.
Ive gone through a ton of videos to understand how exactly the 'this' keyword works, and your video just cleared it out for me
Please keep up the good work and cheers to your great presentation style, it always manages to make me smile every now and then!
absolutely amazing, probably my favorite channel thus far!
There's a looong intro and a lot of adjacent stuff before he gets to explaining how 'bind' and 'this' actually work.
However, after I've watched 3 videos and read a few articles on the topic, I can wholeheartedly say that THIS is the best video I've seen. The only one that actually got me to understanding this concept. Good job! Subscribed!
"It's installed on god damn everything" -- Love that line
Great episode as usual. I'd love to see your approach to private members in JS.
Brilliant job of making things clear and simple (and humorous)! I have been using jQuery for 10+ years now, but find that I have a really hard time grasping certain JS concepts. I have to come back to them over and over and over (and over(x10)) before I get them. These videos have been really helpful in getting there. Thanks for taking the time to put them out.
"Python is a language that's tightly controlled by a single Dutch, middle-aged white guy." That got my subscribe.
:)
lol
Haha! And "What the fuck-shit-ass" got mine.
And "WTF Shit Ass" is what got mine.
Compte Prive me too! Lol
Always waiting for your videos every Monday. Thank you for making these videos.
Very awesome lesson. 15 minutes just flew by! Would love to hear about the prototype chain in the next episode. Thanks!
I was actually dealing with this quirk in a project at work recently; good to know what went wrong and how I can fix it. Thanks so much MPJ; you seriously know how to make learning the in's and out's of javascript fun!
Wide eyed !!! Truly enjoying you !!! I might need to go grab another glass to keep up.
7MD is all I need to watch a video. That being said, came for the video, stayed for the music, and will surely embark on the entire series, very good content!
I have seen 4 videos about this until now, and this one with some history is the best.
Thanks! Well explained. I was in trouble understanding with 'this' and 'bind'.
Coming from nothing but learning JS, and it is giving me more clarity too. Thanks
As a fledgling web dev, this is the best channel on youtube. thanks mpj!
The best explanation of bind I have ever come across. Thank you
I want to thank you for these videos. You're very entertaining and present the material in a way that is both engaging and informative. I'm learning a lot and for that I'm very thankful. Keep it up!
Great explanation man! 101% understood. Keep doing this, you are a natural!
awesome thank you for making these videos they seriously help me out each and everytime. you are like the senior mentor i never had.
Awesome video man! I was stuck with bind and this. And, you cleared it within 15 mins.
Such a great job explaining!!!! Thanks a lot MPJ.
rewatching. Loving it, again.
I only wish I could give this video more likes! I've been programming in Java for a while but find myself scratching my head a lot of the time when it comes to JavaScript, so I really love how your videos are quite informative and entertaining :D
Some years after I watched this... still the coolest explanation.
this is great, I don't know what I want to see next but anything objects and functions in js are interesting! thanks!
Incredibly helpful, THANK YOU!
You explain things amazingly well. Nice!
Interestingly enough you can fetch the talk function from the dog and bind it to a completely different object context, with a different sound:
let growl = dog.talk.bind({ sound: 'growl' });
console.log(growl());
Awesome insight!
Great video! For your next video I would like to get your take on everything about the 'new' keyword.
Looking forward to it!
I love your videos and your t-shirts! They are so fun to watch and I am learning so much! Thank you!
+Isis Naomi Ramirez thank you so much for your kind words and t-shirt appriceation!
Great, this video helped me understand it all. Thank you very much!!!
Thanks so much for this, it clears up so many headaches for me. Having 'this' depend on how something is called was pretty confusing for me. Understanding bind will help fix many issues I've been having in my program.
thanks for the help! one of the only bind tutorials that makes sense!
Its going to take some more iterations for me to get to the point where i use it intuitively but you, sir, are a fantastic teacher. Thank you!
A simple yet clear explanation.
What an outstanding explanation. Way to go man!
Hye MPJ, thank you for the videos. They're amazing! Kudos to your aggressive approach XD.
Love your style of teaching! Keep up the incredible work good sir!
this was a beautiful explanation! Thank you!
"Will output 'undefined'...when you first run across this you might be thinking 'What the fuck shit ass'... " That right there just earned you a subscription. Now I'm really looking forward to the series.
the last example helped me understand a bit more. thanks!
Love your channel and all your videos ! It's smart, clear, funny :D Your objective is to make people love coding with javascript and you have succeeded with me ! Thank you so much for learning :D
I'd love to see a video on object oriented programming vs functional programming, the essence, where they came from and what we have now, I think other people will find this interesting too!
Thank you for your videos
Your explanation was incredible, thanks
I suggest to describe the currying arguments using bind
Keep up the good work! I learn so much from your videos!!!
U are simply an amazing person......u made my day....people should learn from u...how to enjoy while coding...
man, you explain stuff so well, thanks!
Awesome, Mattias! I'll write a post in portuguese on my blog using this video as inspiration! Thanks!
Amazing work my friend!
Great vid! Really helped me out! Thanks!
Really good. I've been programming using JavaScript for a while without knowing some of the underlying principals. I just copy/use what I know works. It's time to learn the underlying concepts
This is brilliant - I learned JavaScript stuff and also life tips for psychologically dealing with others.
Great video :) I'd love one on using Call with inheritance, and prototypes inheriting from other prototypes!
A couple of topic suggestions for you: 1) Whilst discussing context (this) of the bind function is it worth mentioning the apply and call methods to re-enforce understanding? 2) Possibly discuss the prototype property and the pros and cons of using it - inheritance.
WTF-SA!!! I'm so happy I searched for understanding about the Javascript bind method. Your personality and explanations are fantastic.
Using bind in event handler is awesome!
This guy is a pro. I learn JS and english at once watching his videos.
Thanks for the awesome content, as always! One thing that I'm very confused and is kind difficult to find good resources is about promises in JavaScript.
I just got amazed by his entrance and subscribed 🤩
Super cool Mattias, as always. Just one thing, in your example addEventListener() will bind this to element not to window. Glad that you started this series, I know already it's going to be great one!
thanks bro. I always end up learning with your videos.
@11:41 When the realization hits that you might actually understand the concepts, and that the confusion is not eternal, it is almost orgasmic. Thank you my man.
PS : If by any chance (especially because I'm finding JS confusing as heck, coming from an Java background), there is something in this playlist that is deprecated, or redundant now, please let me know. After hours of confusion, when i finally understand something, if it turns out to be futile, it would utterly destroy me. Thank you.
different ways of object creation and their real world use-cases and their benefits and pitfalls. Nice video.
Extremely entertaining, and great explanations!
Great job explaining JS. Keep it up!
Finally, I got it -- Thanks, sir!
Very nice explanation. Next topic I hope to see: when to use bind vs call/apply. Also, the pro vs cons of the different ways of creating objects/classes in JavaScript.
Hey, I really enjoy your episodes of JS. What I would like to see next is a demonstration of how you code on a daily basis. For example, what is your preferred way of writing your scripts and what type of functions you use depending on the purpose. Something like a simple website with JS, HTML and CSS. Sometimes I get kind of lost on how to apply JS as I'm still learning.
Keep your videos coming, I'm really interested!.
"When you first come accross this, you're probably thinking something in the lines of .... what the fuck shit ass'
I burst into laughter
Just so you know, Python is technically a specification too. The de-facto implementation is CPython. but PyPy, IronPython etc exist as well
bruuhhhhhhhhhh you are amazinggg literally i watched many videos read stack overflow but in the end your video cleared alll thnkss
Great video. Probably the best explanation I cam across regarding bind()
Awesome explanation !!
Great video as usual. I'd love to see a video comparing different types of delegation e.g. the use of "new Constructor()" vs Object.create(), OLOO vs normal prototypes, etc.
Still one of my top 5 humans on earth. I remember watching MPJ 5 years ago at these videos even though I wasn’t actively learning, I just liked his personality.
Awesome tuts. I love the way u explain. many thanks
More video idea suggestions:
1. Map, WeakMap, Set, WeakSet
2. fetch and CORS
Now you're good enough to make all of these on your own! :D
Really clear explanation! It would be awesome if you would make a video (or a series really) about design patterns in Javascript!