Binding functions in Javascript that operate in the global context

Question

I've been driving myself a bit mad trying to figure out how to make this code work. My goal is to produce the output larry eats pie, larry eats candy, larry eats cake by binding the function eats within the alice object to the larry object. My hope with the code below was that binding the alice.eats function to the larry object would use larry as this.name, and subsequently applying that function using an array of larryFoods, I would hope that it would produce larry eats + [food] for each argument.

//-----------------Does not work--------------//
var alice = {
      name: "alice",
      speak: function(){
      console.log("Hi, I'm " + this.name);
      },
      eats : function(){
        var theArgs = Array.prototype.slice.call(arguments);
        theArgs.forEach(function(arg){
          console.log(this.name + " eats " + arg);
        });
      }
};
var larry = {
    name: "larry"
};
var larrySpeak = alice.speak.bind(larry);
larrySpeak();
var larryFoods = [" pie", " candy", " and cake"];
var larryEats = alice.eats.bind(larry);
larryEats.apply(larryFoods);

I am assuming that the forEach function will operate in the global context, which is why I was hoping bind would solve the problem. Any insight would be most welcome.

Note that the forEach callback has a new this, so you lost the context there. — elclanrs
– elclanrs, Commented Jul 2, 2016 at 19:34

KevBot · Accepted Answer · 2016-07-02 19:42:26Z

this is not scoped to the "person" inside of your forEach in the eats function. Or visually:

theArgs.forEach(function(arg){
    // "this".name is trying to resolve name according to the scope of the forEach
    console.log(this.name + " eats " + arg);
});

You can fix this like this inside of the eats function:

var scope = this;
theArgs.forEach(function(arg){
    console.log(scope.name + " eats " + arg);
});

Finally, you will need to fix your use of apply at the very last line. apply needs a context to bind to. Since you already bound the function to larry, you can just pass null as the first argument:

This:

larryEats.apply(larryFoods);

should be:

larryEats.apply(null, larryFoods);

After fixing those things, here is a working example:

var alice = {
  name: "alice",
  speak: function() {
    console.log("Hi, I'm " + this.name);
  },
  eats: function() {
    var theArgs = Array.prototype.slice.call(arguments);
    var scope = this;
    theArgs.forEach(function(arg) {
      console.log(scope.name + " eats " + arg);
    });
  }
};
var larry = {
  name: "larry"
};
var larrySpeak = alice.speak.bind(larry);
larrySpeak();
var larryFoods = ["pie", "candy", "and cake"];
var larryEats = alice.eats.bind(larry);
larryEats.apply(null, larryFoods);

M. Timtow · Accepted Answer · 2016-07-02 19:44:38Z

0

This works for me :

var alice = {
      name: "alice",
      speak: function(){
      console.log("Hi, I'm " + this.name);
      },
      eats : function(){
        var theArgs = Array.prototype.slice.call(arguments);
        let that = this;
        theArgs.forEach(function(arg){
          console.log(that.name + " eats " + arg);
        });
      }
};
var larry = {
    name: "larry"
};
var larrySpeak = alice.speak.bind(larry);
larrySpeak();
var larryFoods = [" pie", " candy", " and cake"];
var larryEats = alice.eats;
larryEats.apply(larry, larryFoods);

answered Jul 2, 2016 at 19:44

M. Timtow

3431 gold badge3 silver badges11 bronze badges

Collectives™ on Stack Overflow

Binding functions in Javascript that operate in the global context

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related