JS Function Methods call( ), apply( ), and bind( )
ฝัง
- เผยแพร่เมื่อ 9 ต.ค. 2017
- Functions all share three methods - call( ), apply( ), and bind( ).
These methods let you call functions while letting you specify the context for calling the function. This lets you define what the "this" keyword will represent.
call( ) and apply( ) let you pass in parameters to the functions when you call them too.
bind( ) will let you set the context, pass in parameters, and return a copy of the function with the context and those values saved to be used later.
Code GIST: gist.github.com/prof3ssorSt3v...
in that calming voice even javascript doesn't make blood boil
I must say, you are a very good communicator. One of the most clear and concise explanations, in addition to your examples, I have seen. Thank you!
Steve any time I get stuck on something I look you up to explain it. You are great!
Every tutorial from you is GOLD, thank you.
hurt my brain reading complicated articles with no results, thanks for this awesome explanation!
Man, my life is useless without your courses! Thank you!
I always look for your green thumbnail in my TH-cam search. And if I find I just don't even read your title and give it a shot.
Because you are awesome and whatever knowledge you give, I want everything.
Love you ❤️ from 🇮🇳
XD, it funny because i do search the green thumbnail and with out thinking i click the video
after many tutorials, i got a clear vision here. awesome approach brother. thanks a lot
Always great content, easy to understand and a calming voice.
Perfect. to understand call apply and bind thanks for sharing
one of the best teachers about javascript on youtube
Finally I binded myself to You.. Awesome teaching. Thank you.
Its very clear,you are an amazing teacher is what all i have to say!Thank you.
this is the best and very clear explaination to these fucntions till date...
Thanks! If you found it useful please share. :)
Fantastic explanations. I do believe my new knowledge will help me solve my current problem. Thanks!
this one is my fifth, and i finally got it. amazing!
This video really helped me improve my developing skills! Thanks
Thanks man! Worth to watch.
You are awesome please keep updating us with your knowledge
Lost you on bind although I was already familiar with that function and I use it. You make it to complex for no reason. I was here for the call and apply and i got that one, thanks.
Very nicely explained!
Thank you very much :)
I think you just saved me from the official document hell.
Every time I need to properly learn some base functionality of javascript, there's one of your videos about the topic ❤❤
7:20 cat falls off wardrobe, no-one notices :-)
Cat "falls" off wardrobe...
Love the sound effects ;)
Great, concise and simple explanation. I was reading lodash's implementation of "once" method. It calls "before" method in its body and there they have used "apply" to call the given function.
Thank you, I was able to understand it after watching this video.
You may also be interested in this - th-cam.com/video/J06Uz7m-Jn8/w-d-xo.html
It is the vanilla JS implementation of once, in the browser.
@@SteveGriffith-Prof3ssorSt3v3 Thanks, it's quite helpful. I really like the way you explain in-depth and core concepts in your videos, it's quite hard to find such type of videos nowadays.
Very good explanation!
Another very cool tutorial !!!
amazing explanation, thank you!
Wow...great explanation, thanks.
7:19 I accidentally stepped on my cat's tail, I apologize :)))
awesome explanation, thanks
Best explanation seen !!!!
i 'm a little confused about these method. thank you so much
i'm just subscribing your channel
Hi. Thank you, it is a great content
sincerely thankyou so much sir..!
It finally makes sense, thanks much
Excellent!
This is the first time I've watched your video and know nothing about you. But I know that you are Canadian :).
good job man, keep up.
Thank you!
Absolutely awesome tutorial, thank you Steve. Your videos are extremely helpful.
Thank you sir
Best explanation that I have found . Thank you a lot! One question, have you considered creating a full JS course with projects and exercises? I would gladly pay for something like that. Tnx
Thanks. It's what I do full-time as my job, teaching web development. I have given lots of thought to creating a course on one of the many platforms like Udemy. I have been approached by a number of schools and publishers to do this too. It's just hard to find the time on top of my full time work and keeping up this channel.
Sharing my channel with more people does help me though, so please share it.
@@SteveGriffith-Prof3ssorSt3v3 I have already recommended your YT channel on Reddit, and I will keep doing it in the future. I have learned a lot from you! I understand that you don't have enough time , but you are a great teacher and If you decide to create a course on Udemy I will support it 100%. Big thank you!
@@SteveGriffith-Prof3ssorSt3v3 Just came here to say, you make a course on js, i buy it right away on udemy. Even if i would by that time get to a point where i dont need it, i would still buy it. Not just js, whatever web dev related you make.
Excellent
big thanks!
easiest explanation nice
I didn't really understand why we needed to use call for the method example, doing this would work too:
function bob(name, age){...}
let obj = {
method(fn, n, a){
fn(n, a);
}
}
obj.method(bob, "Jack", 16)
most of the time it is used for delegation. The first parameter in call( ) apply( ) or bind( ) is what you want to use as `this`. You get to change the context for calling your method and do it with a single line of code.
There are always alternative ways of doing pretty much anything in JavaScript. It is about understanding how all the tools work so you can use the best one for your current situation.
Amazing tutorial once again Steve! One question I have is that in the bob function you have a return true statement at the end and wondered what's the purpose of that please? Many thanks.
Just to illustrate that when you use bind you get back a copy of the function, not the true.
@@SteveGriffith-Prof3ssorSt3v3 Thank you.
hey Steve, great video understood the working of call, apply, and bind, but can you state where I could use it and why, why do we pass a context to a function when it is doing the same thing.
When you need to create a closure around a value that will be used in the function when it gets called or when you need to change the context in which the function will run.
Not something that you need to worry about until those other concepts make sense and you realize that you need them.
@@SteveGriffith-Prof3ssorSt3v3 thanks Steve, btw I am seeing a lot of things in JS revolve around closures.
@@jasbindarsingh1640 Closures are definitely a core feature in JS in how scope is handled.
Apply is Array, Call is Comma, Bind is 'BloBject'. Dumb. I know, like a Blontext.
Sorry where did we get fn() function inside the method?
When we call bill.myMethod( bob ) we are passing in bob, which is a function.
So, inside the bill object...
bill = {
...
myMethod: function (fn) {
//fn is the function bob that we passed in
}
}
thank you
This is so complicated. Is there a better way than using call, apply, bind methods in 2021?
This is core functionality. Still in 2021.
Wish there was a real world practical example
Sir, I expected when Bob was called inside the bill object then the value of 'this' should be object bill not the window object...
I got it after the full video... Thanks... Yo
One question though Steve. If, fn.apply(bill, [n, s]); does exactly the same thing as fn.call(bill, n, s); why would you choose the version with 3 extra characters? Are you some sort of secret keyboard torturer? haha
Sometimes you will have a single variable which is an array. Other times you will have several variables. Choose the version that works for your circumstances.
@@SteveGriffith-Prof3ssorSt3v3 So the only difference between call and apply, is the parameters it takes?
@@RedEyedJedi yep
@@SteveGriffith-Prof3ssorSt3v3 Thanks Steve, I appreciate you taking your time to respond.
Still a bit confusing but this helped
David Attenborough of JavaScript YT Videos
영어 모르는 한국인을 울고갑니다
:) And I wish my Korean was better so I didn't have to use Google Translate to read your comment.
7:20 was that a cat ?
Very probably.
where you are going man its not good
this keyword this was quite confusing
th-cam.com/video/eWDXgsIgTGk/w-d-xo.html
Hi i really love your lessons. But thins mouse voice is soo annoying can you fix this please ))))
I did years ago.
Sorry but it seems that all people who are smart at coding know little to nothing about TEACHING.
Are you referring to me? Or am I not understanding what you are trying to say?
Because I have been an award winning professor for nearly 20 years. There is also a difference between explaining a method or concept and a tutorial that explains the exact solution to a problem that someone is having.
@@SteveGriffith-Prof3ssorSt3v3 I apologize. My own frustrations and inadequacies in learning I have spoken out of turn. Obviously your courses or examples here are not intended for people trying to learn JS but for people who already know JS and you are, giving examples of what ever this is. I am looking for something more along the beginners side of teaching CALL's are, you know someone who is trying to learn how to implement this in a real world situation and without context, like your example, to me this might as well be Chinese spoke by a Greek Professor to a class room full of Mexicans. It means nothing to me and there in lies my frustrations and I apologize if my comment , as smart and as award winning as you may be, has offended you.
I have become comfortable with HTML, CSS, PHP, SQL, but as many hours of JS as I have watched it is abstract information to me without anyone ever using it in context to a WEB SITE or how to actually implement this in a web site. THAT IS MY ISSUE and NOT YOURS and I again apologize for offending you. But if this is how you TEACH I would not want to take one of your classes.
No offence taken. JavaScript is a huge topic. There is some that applies directly to the browser and some other things that have nothing to do with the browser. This topic is one that I teach my students after about 3 - 4 months worth of prior JS training. It's not a topic that is necessarily directly applicable to a web site.
I have a playlist called JS from the Start. This list is about the topics that are just JS programming topics, not things that need a browser. I have another big playlist that is called JS in the Browser. That list is about scripting things for a website.
I have lots of other smaller playlists about specific topics like loops, functions, arrays, AJAX, HTML5 APIs, etc. those lists have a mixture of things that are browser dependent and things that have nothing to do with websites, they are just programming concepts.
The programming concepts are about learning the tools of the language. Once you know enough tools then you can start to use combinations of those tools to solve problems.
If you are looking for website specific stuff, since you already have some programming experience with PHP, I would recommend that you look through the JS in the Browser and the HTML5 APIs playlists. Those sound more like what you are looking for.
@@SteveGriffith-Prof3ssorSt3v3 Thank you for your time and response. Have a fantastic weekend.
Thank you!