Javascript：通过遍历数组创建对象方法/属性

Question

What I'm really looking for is code like the following:

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.

the painter.defineMethod() is the key.

I have to define several (upwards of 40) methods to an object and they are all basically the same, with minor but predictable changes that really all call another method. For example:

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

Is something like this possible, or am I stuck defining all these properties explicitly? Is there any performance benefit to one way or the other?

What would be easy in a language that has variable variables or magic methods is proving difficult (or impossible) in Javascript. Though I admit that javascript is not my forte.

Thanks!

Answer 1

Your instinct is correct, you can indeed automate this:

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

There are two things at work here:

1. In JavaScript, you can access (get or set) a property either using dot notation and a property name literal ( obj.foo ), or by using brackets notation and a property name string ( obj["foo"] ). In the latter case, the string can be the result of any expression, including a variable lookup. So painter[color] = ... assigns to a property whose name comes from the color argument.

2. Then we're using the fact that the function we're creating is a closure over the call to the iteration function we give forEach , and so we can use the color argument in that function. Even though the call to the iteration function returns, because we created a function within the call and kept a reference to it, that function keeps a reference to the context (it's a closure over the context), and so we can rely on the color argument being there. More about closures (on my blog): Closures are not complicated

But since painter.draw takes the color as its first argument and the tool as its second, there's a second way you could do it if you like, though: You can " curry " the color argument into the method using Function#bind (an ES5 feature that can be shimmed on the increasingly-small number of old engines that don't have it) on painter.draw :

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

Function#bind returns a function that, when called, calls the original function with the given this value ( painter in the example above) and any further arguments you supply to bind , followed by any arguments given to the original. A simple example may make that clearer:

 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>