如何从数组存储中访问 JS 函数？答案

【问题标题】：How do I access JS functions from an array storage?如何从数组存储中访问 JS 函数？
【发布时间】：2015-12-01 02:54:36
【问题描述】：

我正在使用 html5 画布中的自定义“按钮”。因为我有这么多按钮，所以我认为存储在数组中更有意义。我的困境是，我不太确定如何实现“附加”到特定按钮的自定义功能。我见过this posting，不确定是否适用于此。

很明显btn[i].function+"()"; 没有删减它。

Here's a JSFiddle.

如何在按钮数组中存储自定义函数，并在鼠标单击时成功调用它？

代码如下：

<!doctype html>
<html>
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <style>
        body {background-color: black; margin: 8px; }
        #canvas {border: 1px solid gray;}
    </style>
    <script>
        $(function() {
            var canvas = document.getElementById("canvas");
            var ctx = canvas.getContext("2d");
            var $canvas = $("#canvas");
            var canvasOffset = $canvas.offset();
            var offsetX = canvasOffset.left;
            var offsetY = canvasOffset.top;
            var scrollX = $canvas.scrollLeft();
            var scrollY = $canvas.scrollTop();
            var cw = canvas.width;
            var ch = canvas.height;

            var btn = [{
                x: 50,
                y: 100,
                width: 80,
                height: 50,
                display: "Hello There",
                function: "functionA" // Is this right?
            }, {
                x: 150,
                y: 100,
                width: 80,
                height: 50,
                display: "Why Not?",
                function: "functionB" // Is this right?
            }, {
                x: 250,
                y: 100,
                width: 80,
                height: 50,
                display: "Let's Go!",
                function: "functionC" // Is this right?
            }];

            function drawAll() {
                ctx.clearRect(0, 0, cw, ch);
                for (var i = 0; i < btn.length; i++) {
                    drawButton(ctx, btn[i].x, btn[i].y, btn[i].width, btn[i].height, btn[i].display);
                }
            }

            drawAll();

            // listen for mouse events
            $("#canvas").mousedown(function(e) {
                handleMouseDown(e);
            });

            function handleMouseDown(e) {
                // tell the browser we'll handle this event
                e.preventDefault();
                e.stopPropagation();

                // save the mouse position
                lastX = parseInt(e.clientX - offsetX);
                lastY = parseInt(e.clientY - offsetY);

                // hit all existing buttons
                for (var i = 0; i < btn.length; i++) {
                    if ((lastX < (btn[i].x + btn[i].width)) &&
                        (lastX > btn[i].x) &&
                        (lastY < (btn[i].y + btn[i].height)) &&
                        (lastY > btn[i].y)) {
                        // execute button function
                        btn[i].function+"()"; // obviously this is just wrong.
                        console.log("Button #" + (i + 1) + " has been clicked!!" );
                    }
                }
            }

            function drawButton(context, x, y, width, height, text) {
                var myGradient = context.createLinearGradient(0, y, 0, y + height);
                myGradient.addColorStop(0, '#999999');
                myGradient.addColorStop(1, '#222222');
                context.fillStyle = myGradient;
                context.fillRect(x, y, width, height);
                context.fillStyle = 'white';
                // textAlign aligns text horizontally relative to placement
                context.textAlign = 'center';
                // textBaseline aligns text vertically relative to font style
                context.textBaseline = 'middle';
                context.font = 'bold 15px sans-serif';
                context.fillText(text, x + width / 2, y + height / 2);
            }

            function functionA() {
                alert("Yipee Function A!");
            }

            function functionB() {
                alert("Yowza, it's Function B!");
            }

            function functionC() {
                alert("Now showing Function C!");
            }
        })
    </script>
</head>

<body>
    <canvas id="canvas" width=400 height=300></canvas>
</body>   
</html>

【问题讨论】：

@Barmar，@sigmus，@doldt 你们摇滚。当然，现在我无法远程确定谁会获胜。 Sigmus 踢我（当之无愧）因为我使用了 function 这个词很糟糕。 Barmar 表示速度快（首先正确回答），doldt 表示真棒网名。我倾向于选择西格姆斯。除非... Tiebreaker = 找到 Mozilla 开发者网络质量的链接或更好地描述此问题的正确程序？有人愿意吗？我没想到... :^)

标签： javascript arrays function html5-canvas

【解决方案1】：

尝试将您的按钮更改为：

{
    display: "Hello There",
    action: functionA 
 }

然后调用：

btn[i].action();

我将名称function 更改为action，因为function 是保留字，不能用作对象属性名称。

【讨论】：

可以作为属性名，但是必须要引用。但我同意您为方便使用而重命名它的决定。我在回答中展示了替代方案。
保留字（例如function）可以作为对象属性键，参见MDN on Reserved Word Usage - 也不需要引号。当然，这可能仍然是不好的做法。
跟进我上面的评论：使用保留字作为属性名称will not work on older browsers，尽管 ES5 规范允许这样做。

【解决方案2】：

您可以在数组中存储对函数的引用，只需在它们的名称周围去掉" 符号（目前使它们成为字符串而不是函数引用），创建这样的数组：

var btn = [{
                x: 50,
                y: 100,
                width: 80,
                height: 50,
                display: "Hello There",
                function: functionA
            }, {
                x: 150,
                y: 100,
                width: 80,
                height: 50,
                display: "Why Not?",
                function: functionB
            }]

然后你可以写btn[i].function()来打电话。

【讨论】：

请注意，使用保留字作为属性名称，例如function，是一种不好的做法，应尽可能避免使用。

【解决方案3】：

不要把函数名放在数组里，把对函数本身的引用：

        var btn = [{
            x: 50,
            y: 100,
            width: 80,
            height: 50,
            display: "Hello There",
            'function': functionA
        }, {
            x: 150,
            y: 100,
            width: 80,
            height: 50,
            display: "Why Not?",
            'function': functionB
        }, {
            x: 250,
            y: 100,
            width: 80,
            height: 50,
            display: "Let's Go!",
            'function': functionC
        }];

要调用该函数，您可以：

btn[i]['function']();

我将function 放在文字的引号中，并使用数组表示法来访问它，因为它是保留关键字。

【讨论】：