Javascript：通過遍歷數組創建對象方法/屬性

Question

我真正在尋找的是如下代碼：

var painter = {}; // An object to hold methods
var colors = ['blue', 'red', 'green', 'yellow']; // The names of methods to be defined
colors.forEach( function(color) {
    painter.defineMethod(color, function(){ console.log(color); });
});

painter.blue() // writes blue
painter.red() // writes red
etc.

painter.defineMethod（）是關鍵。

我必須為一個對象定義幾個（最多40個）方法，它們基本上是相同的，但有微小但可預測的更改，實際上所有這些都稱為另一個方法。 例如：

painter.blue = function(tool) {
   painter.draw('blue', tool); // Would paint blue with a brush or pencil or whatever.
}

是否可能發生這種情況，還是我堅持明確定義所有這些屬性？ 一種或另一種方式對性能有好處嗎？

在具有可變變量或魔術方法的語言中，用Java證明是困難的（或不可能的）。 盡管我承認javascript不是我的強項。

謝謝！

Answer 1

您的直覺是正確的，您確實可以自動化：

colors.forEach( function(color) {
    painter[color] = function(tool) {
        painter.draw(color, tool);
    };
});

這里有兩件事在起作用：

1. 在JavaScript中，可以使用點表示法和屬性名稱文字 （ obj.foo ），也可以使用方括號表示法和屬性名稱字符串 （ obj["foo"] ）訪問（獲取或設置）屬性。 在后一種情況下，字符串可以是任何表達式的結果，包括變量查找。 因此painter[color] = ...分配給名稱來自color參數的屬性。

2. 然后，我們利用這樣一個事實，即我們正在創建的函數是對給forEach的迭代函數的調用的封閉，因此我們可以在該函數中使用color參數。 即使返回迭代函數的調用返回了，因為我們在調用中創建了一個函數並保留了對它的引用，所以該函數仍保留了對上下文的引用（這是對上下文的封閉 ），因此我們可以依靠color爭論在那里。 有關閉包的更多信息（在我的博客上）： 閉包並不復雜

但由於painter.draw需要的顏色作為第一個參數和工具作為其第二個，還有如果你喜歡，你可以做第二道，但：你可以在“ 咖喱使用”色彩的說法入法Function#bind （一ES5功能可以在painter.draw上越來越少的沒有它的舊引擎上進行painter.draw ：

colors.forEach( function(color) {
    painter[color] = painter.draw.bind(painter, color);
});

Function#bind返回一個函數，該函數在調用時將使用給定的this值（在上面的示例中為painter ）以及您提供給bind所有其他參數，然后是給定原始參數的任何原始函數調用原始函數。 一個簡單的例子可以使這一點更加清楚：

 function func(a, b) { snippet.log("this.name = " + this.name); snippet.log("a = " + a); snippet.log("b = " + b); } var o1 = { name: "o1" }; var o2 = { name: "o2" }; var o1boundfoo = func.bind(o1, "foo"); var o2boundbar = func.bind(o2, "bar"); o1boundfoo("nifty"); // Shows: // this.name = o1 // a = foo // b = nifty o2boundbar("nifty"); // Shows: // this.name = o2 // a = bar // b = nifty 

 <!-- Temporary snippet object, see http://meta.stackexchange.com/a/242144/134069 --> <script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>