箭头 function 避免绑定

Question

var world = {
  animals: {},
  add_animal: function(options) {
    this.animals[options.name] = {
      name: options.name,
      sound: options.sound,
      actions: {},
      add_action: function(action_name, action_function) {
        this.actions[action_name] = action_function.bind(this);
      }
    }
  }
};

world.add_animal({name: "dog", sound: "bark"});
world.animals.dog.add_action("speak", function() {
  alert("I am a " + this.name + ". I " + this.sound + ".");
});

world.animals.dog.actions.speak();

This is a simplified version of a script I wrote a few years ago, which I'd like to update. It creates a world object, with a collection of animals and an add_animal method. Each animal has an add_action method. I'd appreciate some advice on two things.

1. add_action uses bind so "this" refers to the animal within the action function - is there a way to do this with an arrow function => so there's no need for bind?

2. I figured there'll only ever be one "world" so that's why I started with an object literal for world, rather than making world a class. Is there another "best practice" way this could be done, perhaps using classes? If so, is there any real advantage in doing it another way?

Answer 1

1. add_action uses bind so "this" refers to the animal within the action function - is there a way to do this with an arrow function => so there's no need for bind?

Not if you want to use this within the action function to refer to the animal, no.

2. I figured there'll only ever be one "world" so that's why I started with an object literal for world, rather than making world a class. Is there another "best practice" way this could be done, perhaps using classes? If so, is there any real advantage in doing it another way?

If world is a singleton, there's usually no need to do anything other than what you've done.