Javascript - 循环类并添加函数

Question

我目前正在尝试创建一个 HTML5 Canvas 游戏，我希望能够将功能附加到单击时激活的按钮。我可以对独特的函数执行此操作，但在使用预定义函数循环访问许多按钮时，我正在努力寻找一种方法来执行此操作。

我创建了一个示例来展示我到目前为止所尝试的内容:

jsFiddle:http://jsfiddle.net/ra1rb74w/1/

// The class that we want to create an array of
myClass = function() {
    this.aFunction;
};

myClass.prototype = {
    // Add a new function to this class
    addFunction: function (newFunction) {
        this.aFunction = newFunction;
    },

    // Use the current function
    useFunction: function () {
        if (this.aFunction != null) {
            this.aFunction;
        }
    }
};

// The base function we will use in the classes
var baseFunction = function(x) { console.log(x); }

// Create the array of classes
var myClasses = [];

// Add 10 classes to the array and add a function to each of them
for (var x = 0; x < 10; x++) {
    myClasses.push(new myClass());
    myClasses[x].addFunction(baseFunction(x));
}

// Use the function in the first class
myClasses[0].useFunction();

您可以看到所有我不想要的函数都被触发，并且 useFunction() 函数不起作用。有办法做到这一点吗？

Answer 1

因此，您通过调用baseFunction(x)来触发baseFunction。您需要获取baseFunction来返回可以执行的函数:

// The class that we want to create an array of
myClass = function() {
    this.aFunction;
};

myClass.prototype = {
    // Add a new function to this class
    addFunction: function (newFunction) {
        this.aFunction = newFunction;
    },

    // Use the current function
    useFunction: function () {
        if (typeof this.aFunction === "function") {
            this.aFunction.call(this);
        }
    }
};

// The base function we will use in the classes
var baseFunction = function(x) { 
    return function() {
      console.log(x);  
    };
}

// Create the array of classes
var myClasses = [];

// Add 10 classes to the array and add a function to each of them
for (var x = 0; x < 10; x++) {
    myClasses.push(new myClass());
    myClasses[x].addFunction(baseFunction);
}

// Use the function in the first class
myClasses[3].useFunction();

JsFiddle

或者向 addFunction 添加另一个参数，可以像 addFunction(baseFunction, x) 一样调用:

// The class that we want to create an array of
myClass = function() {
    this.aFunction;
};

myClass.prototype = {
    // Add a new function to this class
    addFunction: function (newFunction, value) {
        this.aFunction = newFunction;
        this.x = value;
    },

    // Use the current function
    useFunction: function () {
        if (typeof this.aFunction === "function") {
            this.aFunction.call(this, this.x);
        }
    }
};

// The base function we will use in the classes
var baseFunction = function(x) { console.log(x); }

// Create the array of classes
var myClasses = [];

// Add 10 classes to the array and add a function to each of them
for (var x = 0; x < 10; x++) {
    myClasses.push(new myClass());
    myClasses[x].addFunction(baseFunction, x);
}

// Use the function in the first class
myClasses[3].useFunction();

JsFiddle

注意，我还更改了对 aFunction == null 的检查，因为传入的函数可能为 null、字符串或其他任何内容。您想检查它是否可执行。