/    Sign up×
Community /Pin to ProfileBookmark

Can someone help me to understand this code?

Copy linkTweet thisAlerts:
Mar 08.2014

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.

to post a comment
JavaScript

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@tech_soul8Mar 08.2014 — In short it checks if JavaScript implementation has the [I]bind[/I] method. The bind method is introduced in [I]ECMAScript 5[/I] and its purpose is to bind a function to an object and return a new function. It is also capable of so called [I]partial application[/I].

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

<i>
</i> function myBind(f,o) {
return function() {
return f.apply(o,arguments);
}
}

<i> </i> var o = {
<i> </i> x: 10,
<i> </i> y: function() {
<i> </i> return this.x + 20;
<i> </i> }
<i> </i> }

<i> </i> var z = myBind(function() {return this.x + 15},o);

<i> </i> console.log(o.y());
<i> </i> console.log(z())
Copy linkTweet thisAlerts:
@tech_soul8Mar 08.2014 — 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.

<i>
</i>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

<i> </i> return function() {
<i> </i> //slice passed function and object from the array and leave passed value/s for partial applicaton
<i> </i> arg = Array.prototype.slice.call(arg,2)

<i> </i> //If any argument/s were passed for this function call, add them to the arg array
<i> </i> if (arguments.length)
<i> </i> for (var i = 0; i &lt; arguments.length; i++)
<i> </i> arg.push(arguments[i]);

<i> </i> // return new function which binds passed function to the passed object an apply appropriate arguments
<i> </i> return f.apply(o,arg);
<i> </i> }
<i> </i> }

<i> </i> var o = {
<i> </i> x: 10,
<i> </i> y: function() {return this.x + 10}
<i> </i> },

<i> </i> z = myBind(function(a,b,c) {return a + b + c + this.x},o); //bind specified function to the o object without partial applicaton
<i> </i> console.log(z(10,10,10));
<i> </i> z = myBind(function(a,b,c) {return a + b + c + this.x},o,50,50); //do the same as above but with partial applicaton
<i> </i> console.log(z(10));


Hope it helps!
×

Success!

Help @snowleopard spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...