Javasctipt 从数组调用对象的函数

Javasctipt call object's function from array

本文关键字：函数 对象 调用 数组 Javasctipt      更新时间：2023-09-26

index.html 

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

测试.js

var canvas = document.getElementById("mainCanvas")
var context = canvas.getContext("2d")
var array = [
    context.fillRect
]
array[0](10,10,10,10)

它说：

未捕获类型错误：非法调用

通常这个context.fillRect(10,10,10,10)工作...

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

这里的问题实际上是上下文。当你输入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)
相关文章：