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

更改为

...
myClass.prototype = {
    // Add a new function to this class
    addFunction: function (newFunction, x) {
        this.aFunction = newFunction;
        this.aFunctionX = x;
    },
    useFunction: function () {
        if (this.aFunction != null) {
            this.aFunction(this.aFunctionX);
        }
    }
};
...

...
for (var x = 0; x < 10; x++) {
    myClasses.push(new myClass());
    myClasses[x].addFunction(baseFunction, x);
}
...

这是一个小提琴http://jsfiddle.net/ra1rb74w/6/

Answer 2

所以你通过调用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，或者是字符串或其他任何内容。您想检查它是否可执行。

Javascript - 通过类循环和添加函数

2 个答案: