Javascript - 原型函数数组

Question

I'm a javascript newbie so I'm writing ugly code so far sometimes due to my lack of experience and how different it is to the languages I'm used to, so the code I'll post below works, but I'm wondering if I'm doing it the right way or perhaps it works but it's a horrible practice or there is a better way.

Basically, I have a little dude that moves within a grid, he receives from the server an action, he can move in 8 directions (int): 0:up, 1: up-right, 2: right... 7: up-left.

the server will send him this 0 <= action <= 7 value, and he has to take the correct action... now, instead of using a switch-case structure. I created a function goUp(), goLeft(), etc, and loaded them in an array, so I have a method like this:

var getActionFunction = actions[action];
actionFunction();

However, what to set all this up is this:

1) create a constructor function:

function LittleDude(container) {
    this.element = container; //I will move a div around, i just save it in field here.
}

LittleDude.prototype.goUp() {
    //do go up
    this.element.animate(etc...);
}

LittleDude.prototype.actions = [LittleDude.prototype.goUp, LittleDude.prototype.goUpLeft, ...];
//In this array I can't use "this.goUp", because this points to the window object, as expected

LittleDude.prototype.doAction = function(action) {
    var actionFunction = this.actions[action];
    actionFunction(); //LOOK AT THIS LINE
}

Now if you pay attention, the last line won't work.. because: when i use the index to access the array, it returns a LittleDude.prototype.goUp for instance... so the "this" keyword is undefined..

goUp has a statement "this.element"... but "this" is not defined, so I have to write it like this:

actionFunction.call(this);

so my doAction will look like this:

LittleDude.prototype.doAction = function(action) {
    var actionFunction = this.actions[action];
    actionFunction.call(this); //NOW IT WORKS
}

I need to know if this is hackish or if I'm violating some sort of "DO NOT DO THIS" rule. or perhaps it can be written in a better way. Since it seems to me kind of weird to add it to the prototype but then treating it like a function that stands on its own.

Answer 1

What you are trying to do is one of the possible ways, but it is possible to make it more simple. Since object property names are not necessary strings, you can use action index directly on prototype. You even don't need doAction function.

LittleDude = function LittleDude(container) {
  this.container = container;
}

LittleDude.prototype[0] = LittleDude.prototype.goUp = function goUp() {
  console.log('goUp', this.container);
}

LittleDude.prototype[1] = LittleDude.prototype.goUpRight = function goUpRight() {
  console.log('goUpRight', this.container);
}

var littleDude = new LittleDude(123),
    action = 1;
littleDude[action](); // --> goUpRight 123
littleDude.goUp(); // --> goUp 123

Answer 2

 actionFunction.call(this); //NOW IT WORKS 

I need to know if this is hackish or if I'm violating some sort of "DO NOT DO THIS" rule. or perhaps it can be written in a better way.

No, using .call() is perfectly fine for binding the this keyword - that's what it's made for.

Since it seems to me kind of weird to add it to the prototype but then treating it like a function that stands on its own.

You don't have to define them on the prototype if you don't use them directly :-) Yet, if you do you might not store the functions themselves in the array, but the method names and then call them with bracket notation :

// or make that a local variable somewhere?
LittleDude.prototype.actions = ["goUp", "goUpLeft", …];

LittleDude.prototype.doAction = function(action) {
    var methodName = this.actions[action];
    this[methodName](); // calls the function in expected context as well
}