Javascript-原型函数数组 [英] Javascript - Array of prototype functions

问题描述

我是一名JavaScript新手，由于缺乏经验以及与过去使用的语言有何不同，到目前为止，我有时仍在编写丑陋的代码，因此我将在下面发布的代码有效，但是我想知道我是在做正确的方法还是可行，但这是一种可怕的做法，或者有更好的方法.

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.

基本上，我有一个小家伙在网格内移动，他从服务器收到一个动作，他可以​​在8个方向(int)上移动:0:向上，1:右上，2:右... 7:左上角.

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.

服务器将向他发送此0 <= action <= 7值，并且他必须立即采取正确的措施...，而不是使用切换用例结构.我创建了一个函数goUp()，goLeft()等，并将它们加载到一个数组中，所以我有一个像这样的方法:

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)创建一个构造函数:

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
}

现在，如果您注意的话，最后一行将不起作用..因为:当我使用索引访问数组时，它返回一个LittleDude.prototype.goUp例如...因此，"this"关键字是未定义.

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有一条语句"this.element" ...但未定义"this"，因此我必须这样写:

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

actionFunction.call(this);

所以我的doAction看起来像这样:

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.

推荐答案

您尝试做的是可能的方法之一，但可以使其变得更简单.由于对象属性名称不是必需的字符串，因此可以直接在原型上使用操作索引.您甚至不需要doAction函数.

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

这篇关于Javascript-原型函数数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！