www.webdeveloper.com
Results 1 to 3 of 3

Thread: Can someone help me to understand this code?

  1. #1
    Join Date
    Mar 2014
    Posts
    1

    Smile Can someone help me to understand this code?

    Hi,
    I was going through javascript tutorials in learn.jquery.com website. I couldn't understand a piece of code. Can someone help me out?
    Below is the code.
    // starts here
    if (!Function.prototype.bind) {

    Function.prototype.bind = function( oThis ) {

    if (typeof this !== "function") {
    // closest thing possible to the ECMAScript 5 internal
    // IsCallable function
    throw new TypeError( "Function.prototype.bind - what is trying to be bound is not callable" );
    }

    var fSlice = Array.prototype.slice,
    aArgs = fSlice.call( arguments, 1 ),
    fToBind = this,
    fNOP = function() {},
    fBound = function() {
    return fToBind.apply( this instanceof fNOP
    ? this
    : oThis || window,
    aArgs.concat( fSlice.call( arguments ) ) );
    };

    fNOP.prototype = this.prototype;

    fBound.prototype = new fNOP();

    return fBound;
    };
    }

    Thank you!
    Snow.

  2. #2
    Join Date
    Oct 2012
    Location
    Croatia
    Posts
    255
    In short it checks if JavaScript implementation has the bind method. The bind method is introduced in ECMAScript 5 and its purpose is to bind a function to an object and return a new function. It is also capable of so called partial application.

    So, the above code checks if the bind method exists and if not it adds the new method to the Function.prototype that mimics the original version of the bind method. Somewhat simpler version (without any checking involved etc...) would look something like this:

    Code:
     function myBind(f,o) {
             return function() {
                return f.apply(o,arguments);
             }
          }
          
          var o = {
             x: 10,
             y: function() {
                return this.x + 20;
             }
          }
          
          var z = myBind(function() {return this.x + 15},o);
          
          console.log(o.y());
          console.log(z())

  3. #3
    Join Date
    Oct 2012
    Location
    Croatia
    Posts
    255
    This is another example, with some comments added for better understanding which supports partial application thus closely imitating the behavior of the real bind method.

    Code:
    function myBind(f,o) { //expect at least two arguments: function and an object to bind to
            var arg = arguments; //save arguments object of this function call
            
            return function() {
               //slice passed function and object from the array and leave passed value/s for partial applicaton
               arg = Array.prototype.slice.call(arg,2) 
               
               //If any argument/s were passed for this function call, add them to the arg array
               if (arguments.length)
                  for (var i = 0; i < arguments.length; i++)
                     arg.push(arguments[i]);
               
                // return new function which binds passed function to the passed object an apply appropriate arguments       
                return f.apply(o,arg); 
            }
         }
         
         var o = {
            x: 10,
            y: function() {return this.x + 10}
         },
                 
         z = myBind(function(a,b,c) {return a + b + c + this.x},o); //bind specified function to the o object without partial applicaton
         console.log(z(10,10,10));
         z = myBind(function(a,b,c) {return a + b + c + this.x},o,50,50); //do the same as above but with partial applicaton
         console.log(z(10));
    Hope it helps!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles