🚨 $100K in Sight: Follow Bitcoin’s Final Push Live! TRACK NOW

Code has been added to clipboard!

Using jQuery .proxy() Method Explained

Reading time 1 min
Published Jan 10, 2018
Updated Oct 10, 2019

jQuery proxy: Main Tips

  • The jQuery .proxy() method takes an existing function and returns a new one with a specific context.
  • Since jQuery 1.6, .proxy() accepts unlimited number of additional arguments. They will be passed to the function whose context is set to change.
DataCamp
Pros
  • Easy to use with a learn-by-doing approach
  • Offers quality content
  • Gamified in-browser coding experience
  • The price matches the quality
  • Suitable for learners ranging from beginner to advanced
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable
Udacity
Pros
  • Simplistic design (no unnecessary information)
  • High-quality courses (even the free ones)
  • Variety of features
Main Features
  • Nanodegree programs
  • Suitable for enterprises
  • Paid Certificates of completion
edX
Pros
  • A wide range of learning programs
  • University-level courses
  • Easy to navigate
  • Verified certificates
  • Free learning track available
Main Features
  • University-level courses
  • Suitable for enterprises
  • Verified certificates of completion

Using the .proxy() Method

When JavaScript executes code, every called function has its execution context. An execution context consist of the activation object, scope chain and this value.

There are two methods for changing the value of this: .call() and .apply().

jQuery .proxy() serves the same purpose: it changes the value of this for a specific function and returns that new function.

The example below sets the context of the info function inside personObject:

Example
$("button").click($.proxy(personObject, "info"));

Syntax for jQuery .proxy()

The syntax of jQuery .proxy() is as follows:

$("selector").proxy(name, context);

Let's review the arguments jQuery .proxy() takes:

  • name is the name of the function whose context will be changed.
  • context represents the object to which the context of the selected function will be changed.
  • You can also add extraArguments at the end.

Note: changing the order of parameters makes no difference – the .proxy() jQuery method would still work.