CODEWITHSUNDEEP
javascriptjquery
Alexander Solonik
Alexander Solonik

Reputation: 10230

understanding $.proxy function in button.js

was going through the twitter bootstrap button.js code and code across some peice of code that really does't make sense to me , so i am here asking you guys help , if any one of you could be kind enough to explain the meaning of this code to me , it would simply be great .

well , here is the peice of code that is really difficult to understand , 

setTimeout($.proxy(function () {
  if (state == 'loadingText') {
    this.isLoading = true
    $el.addClass(d).attr(d, d)
  } else if (this.isLoading) {
    this.isLoading = false
    $el.removeClass(d).removeAttr(d)
  }
}, this), 2000)

now here's my understanding of the proxy function in jquery. In the doc's i see the following example : 

$(document).ready(function(){
                        var me = {
                        // I'm a dog
                        type: "dog",
                        // Note that event comes *after* one and two
                        test: function( one, two, event ) {
                        $( "#log" )
                        // `one` maps to `you`, the 1st additional
                        // argument in the $.proxy function call
                        .append( "Hello " + one.type + ":" )
                        // The `this` keyword refers to `me`
                        // (the 2nd, context, argument of $.proxy)
                        .append( "I am a " + this.type + ", " )
                        // `two` maps to `they`, the 2nd additional
                        // argument in the $.proxy function call
                        .append( "and they are " + two.type + "." )
                        // The event type is "click"
                        .append( "Thanks for " + event.type + "ing." )
                        // The clicked element is `event.target`,
                        // and its type is "button"
                        .append( "the " + event.target.type + "." );
                        }
                        };
                        var you = { type: "cat" };
                        var they = { type: "fish" };
                        // Set up handler to execute me.test() in the context
                        // of `me`, with `you` and `they` as additional arguments
                        var proxy = $.proxy( me.test, me, you, they );
                        $( "#test" ).on( "click", proxy );
                });

now clearly proxy is being passed 4 arguments in the example listed in the doc's , but i don't see that happening in the proxy function inside the button.js code WHY ?

i understand that proxy somewhat works like prototype.bind or prototype.call in javascript and can be used to change the context of a given call to a function , but this code in button.js still does't make sense to me and seems overly complicated to a novice dev like me , would really appreciate if someone could make sense of this piece of code that i found in button.js.

Thank you.

kind regards. Alexander.

Upvotes: 1

Views: 66

Answers (1)

r3wt
r3wt

Reputation: 4742

In javascript, you can pass as many arguments as you would like to a function, regardless of how many parameters the function expects. If you will notice, it even shows that it accepts additional arguments in the documentation on the jQuery website:

http://api.jquery.com/jquery.proxy/#jQuery-proxy-context-name-additionalArguments

So effectively, the Bootstrap folks are just passing extra arguments to the execution scope, arguments that wouldn't otherwise be available in the scope.

Upvotes: 1

Related Questions