javascript custom scope binding function

Question

I am reading this article - ~~http://www.robertsosinski.com/2009/04/28/binding-scope-in-javascript/~~ - where a custom bind function is made.

Function.prototype.bind = function(scope) {
  var _function = this;

  return function() {
    return _function.apply(scope, arguments);
  }
}

alice = {
  name: "alice"
}

eve = {
  talk: function(greeting) {
    console.log(greeting + ", my name is " + this.name);
  }.bind(alice) // <- bound to "alice"
}

eve.talk("hello");
// hello, my name is alice

My question is this line in particlar

 return function() {
    return _function.apply(scope, arguments);
  }

Why is the return in _function.apply(scope, arguments); there? And what is it doing and what is being returned? I removed that return and it still works.

gurvinder372 · Accepted Answer · 2013-01-18 07:40:57Z

1

Why is the return in _function.apply(scope, arguments); there? And what is it doing and what is being returned? I removed that return and it still works.

This is there in case you want to return a value. Currently your talk function is not returning any value so you don't need it. if you change your talk function to

eve = {
  talk: function(greeting) {
    return ( greeting + ", my name is " + this.name) ;
  }.bind(alice) // <- bound to "alice"
}

console.log(eve.talk("hello"));

Now you will realize why return is required

answered Jan 18, 2013 at 7:40

gurvinder372

68.6k11 gold badges78 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

phant0m · Accepted Answer · 2013-01-18 07:59:44Z

1

It returns the result of applying the original function (the one being bound). When you make _function.apply, the _function will be called with scope as the context, so inside the function this will always refer to the scope.

The second parameter arguments is there to pass all the arguments to the original function. And the return statement is there to make sure that the value returned from the original function call will also be returned from the bound function call.

edited Jan 18, 2013 at 7:59

phant0m

17k6 gold badges52 silver badges84 bronze badges

answered Jan 18, 2013 at 7:42

user1936059

Comments

Minko Gechev · Accepted Answer · 2013-01-18 07:52:09Z

In the return you simply return new function. You close the scope and _function in the scope of the returned anonymous function. It's called closure - all variables visible in the parent function (the one which return the anonymous one) are visible in the returned function.

Here is your example:

Function.prototype.bind = function(scope) {
  var _function = this;

  return function() {
    return _function.apply(scope, arguments);
  }
};

function foo() {
    console.log(this.foobar);
}

var bar = {
   foobar: 'baz'
};

foo = foo.bind(bar);

So now step by step: foo.bind(bar); returns the function:

  function() {
    return _function.apply(scope, arguments);
  }

_function is foo, scope is the bind argument - bar. arguments is something like an array (not exactly) which contains all arguments of a function, so by: foo(), your this will be the scope provided as first argument of apply. If you use foo(1,2,3) arguments will contain 1,2,3.

The logged result will be baz.

Collectives™ on Stack Overflow

javascript custom scope binding function

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related