javascript custom scope binding function

问题

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.

回答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

回答2:

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.

回答3:

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.

来源：https://stackoverflow.com/questions/14394255/javascript-custom-scope-binding-function

标签

javascript

scope

bind