Last active
February 22, 2024 21:06
-
-
Save branneman/5814160 to your computer and use it in GitHub Desktop.
JavaScript call() vs apply() vs bind() vs $.proxy()
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var fn = function(arg1, arg2) { | |
var str = '<p>aap ' + this.noot + ' ' + arg1 + ' ' + arg2 + '</p>'; | |
document.body.innerHTML += str; | |
}; | |
var context = { | |
'noot': 'noot' | |
}; | |
var args = ['mies', 'wim']; | |
// Calls a function with a given 'this' value and arguments provided individually. | |
// Support: everywhere | |
fn.call(context, args[0], args[1]); | |
// Calls a function with a given 'this' value and arguments provided as an array | |
// (or an array like object). | |
// Support: everywhere | |
fn.apply(context, args); | |
// Creates a new function that, when called, has its 'this' keyword set to the | |
// provided value, with a given sequence of arguments preceding any provided | |
// when the new function was called. | |
// Support: ECMAScript >= 5 (thus >= IE9) | |
var boundFn1 = fn.bind(context, args[0], args[1]); | |
boundFn1(); | |
// Same as bind() | |
// Support: same as your jQuery version, available since 1.4 | |
var boundFn2 = $.proxy(fn, context, args[0], args[1]); | |
boundFn2(); |
Nice Explanataion . Thanks @branneman
Really easy to understand. Thank you.
@VenkataRaju: Correct, but that would be currying & partial application, and I think .bind()
is not the right tool for the job when you're currying.
Very Nice Example.
Thanks for sharing.
Keep it up
Nice example, easy to understand and implement.
๐
Great example
Thank you so much! It really helped!
Thanks for an helpful post
Finally I got it, thanks! XD
Merely a note (for me), to map an array of values as arguments:
fn.bind.apply(fn, [context].concat(args))()
fn.bind.apply(fn, Array.prototype.concat.call(context, args))()
fn.bind.apply(fn, args.slice(0).reverse().concat(context).reverse())()
...any other solutions?
Awesome :)
Thx a lot ๐
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Easy to understand. Thank you.
Probably this is worth mentioning: some arguments can be provided during the actual function call