Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
JavaScript call() vs apply() vs bind() vs $.proxy()
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();
@VenkataRaju

This comment has been minimized.

Copy link

commented Dec 23, 2014

Easy to understand. Thank you.
Probably this is worth mentioning: some arguments can be provided during the actual function call

var boundFn1 = fn.bind(context, args[0]); // Binding only first argument
console.log(boundFn1(args[1]));
@amitkumar94

This comment has been minimized.

Copy link

commented Jan 27, 2015

Nice Explanataion . Thanks @branneman

@plrthink

This comment has been minimized.

Copy link

commented Jan 28, 2015

Really easy to understand. Thank you.

@branneman

This comment has been minimized.

Copy link
Owner Author

commented Mar 25, 2015

@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.

@yuvi1422

This comment has been minimized.

Copy link

commented May 25, 2015

Very Nice Example.
Thanks for sharing.
Keep it up

@Ankit-Kandoliya

This comment has been minimized.

Copy link

commented Aug 12, 2015

Nice example, easy to understand and implement.

@lekkas

This comment has been minimized.

Copy link

commented Sep 2, 2015

👍

@Shashank085236

This comment has been minimized.

Copy link

commented Jan 16, 2016

Great example

@neo

This comment has been minimized.

Copy link

commented Jan 29, 2016

Thank you so much! It really helped!

@povtasci

This comment has been minimized.

Copy link

commented Feb 12, 2016

Thanks for an helpful post

@saxxi

This comment has been minimized.

Copy link

commented Apr 14, 2016

Finally I got it, thanks! XD

@yckart

This comment has been minimized.

Copy link

commented May 10, 2016

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?

@omer257

This comment has been minimized.

Copy link

commented Jun 4, 2017

Awesome :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.