Question

的index.html

<body>
    <canvas id ="mainCanvas" width = "400" height = "400"></canvas>
    <script src ="script.js"></script>
    <script src ="test.js"></script>

</body>

test.js

var canvas = document.getElementById("mainCanvas")
var context = canvas.getContext("2d")

var array = [
    context.fillRect
]

array[0](10,10,10,10)

它说：

未捕获的TypeError：非法调用

通常这context.fillRect(10,10,10,10)有效......

那么为什么我不能从数组中调用该引用？

Answer 1

这里的问题实际上是背景。当您键入array [0]时，您处于该函数对象的上下文中（函数是javascript中的对象）。但是你想要在上下文变量的上下文中。所以有两种解决方案

var canvas = document.getElementById("mainCanvas")
var context = canvas.getContext("2d")

var array = [
function(params) {
context.fillRect(params)
}
]

array[0](10,10,10,10)

或使用call

的第二种方法

var canvas = document.getElementById("mainCanvas")
var context = canvas.getContext("2d")

var array = [
context.fillRect
]

array[0].call(context,10,10,10,10)

Javasctipt从数组中调用对象的函数

1 个答案: