Javascript - 原型函數數組

我是一個javascript新手，所以我現在寫的是難看的代碼，有時候是因爲我缺乏經驗，和我習慣的語言有多不同，我會在下面的作品中發帖，但是我想知道我是以正確的方式來做還是可能有用，但這是一種可怕的做法，或者有更好的辦法。基本上，我有一個小傢伙在網格中移動，他從服務器接收一個動作，他可以在8個方向移動（int）：0：向上，1：向右，2：向右。 7：左上。Javascript - 原型函數數組

服務器將發送給他這個值，他必須採取正確的行動......現在，而不是使用開關結構。我創建了一個功能黨團（），goLeft（）等，並在一個數組裝載他們，所以我有這樣的方法：

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

然而，如何處理這件事了是這樣的：

1）創建一個構造函數：

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例如...所以「這個」關鍵字是不確定的..

GOUP具有聲明「this.element」 ......但「這」沒有定義，所以我必須把它寫這樣的：

actionFunction.call(this);

所以我doAction看起來就像這樣：

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

我需要知道這是否是駭人聽聞或者我違反了某種「不要做這個」規則。或者也許它可以用更好的方式書寫。因爲在我看來，把它添加到原型中似乎有點奇怪，但將它視爲一種獨立的功能。

來源

2013-04-04 arg20

我認爲這個問題更適合於http://codereview.stackexchange.com/（標記爲移動） – Bergi

'......。原型......「應該是小寫的。我猜這只是一個錯字，不是嗎？ – Bergi

我不知道代碼審查，很好。這是一個錯字，是的，對不起 – arg20

你所要做的是可能的方式之一，但可以使其更簡單。由於對象屬性名稱不是必需的字符串，因此可以直接在原型上使用操作索引。你甚至不需要doAction函數。

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

來源

2013-04-04 13:25:29 Vadim

真棒貢獻，我會盡快嘗試這 – arg20

我該如何調整這個，讓我有'littleDude [0]（）'和'littleDude.goUp（）' – arg20

@ arg20我更新了這個例子，現在你可以同時使用語法 – Vadim

actionFunction.call(this); //NOW IT WORKS 
我需要知道，如果這是hackish的，或者如果我違反了某種形式的「DO NOT DO THIS」的規則。或者也許它可以用更好的方式書寫。

不，使用.call()對於綁定this keyword是完美的 - 這就是它的目的所在。

因爲在我看來，把它添加到原型中似乎有點不可思議，但隨後將它視爲一種獨立的函數。

你不必定義它們的原型，如果你不:-)但是直接使用它們，如果你這樣做，你可能沒有自己的存儲功能的陣列中，但該方法名然後調用他們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 
}

來源

2013-04-04 13:20:25 Bergi

存儲方法名稱不錯！ – arg20

Javascript - 原型函數數組

回答

相關問題