Javascript 谁能解释一下我为什么'；我得到一个typeError，上面写着；此.draw不是ballFunction.move的函数_Javascript_Html_Html5 Canvas

Javascript 谁能解释一下我为什么'；我得到一个typeError，上面写着；此.draw不是ballFunction.move的函数

javascript html html5-canvas

Javascript 谁能解释一下我为什么'；我得到一个typeError，上面写着；此.draw不是ballFunction.move的函数,javascript,html,html5-canvas,Javascript,Html,Html5 Canvas,我想做的是给从画布边界反弹的圆圈设置动画。我只需要一个球就可以达到那个美好的愿望。但是我的家庭作业要求我每两秒钟添加一个新球。最初，我尝试通过使用for循环在数组中列出新对象来实现这一点，但很难找到一种方法在一段时间内从每个新创建的对象中调用“move”方法。最后，我决定创建变量j，将其设置为0，并使其递增10，因为间隔将每10毫秒执行一次函数“startAnim”。然后每两秒钟创建一个新对象，然后调用该对象的“移动”方法一些文件 var canvas=document.getElement

我想做的是给从画布边界反弹的圆圈设置动画。我只需要一个球就可以达到那个美好的愿望。但是我的家庭作业要求我每两秒钟添加一个新球。最初，我尝试通过使用for循环在数组中列出新对象来实现这一点，但很难找到一种方法在一段时间内从每个新创建的对象中调用“move”方法。最后，我决定创建变量j，将其设置为0，并使其递增10，因为间隔将每10毫秒执行一次函数“startAnim”。然后每两秒钟创建一个新对象，然后调用该对象的“移动”方法


一些文件
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
变量arrayOfCollor=[“绿色”、“红色”、“蓝色”、“金色”、“黑色”、“紫色”]；
var ballFunction=函数（）{
这个.x=200；
这个y=200；
这个.xSpeed=2；
这个.ySpeed=-3；
这个半径=10；
ctx.fillStyle=arrayOfCollor[Math.floor（Math.random（）*
arrayOfCollor.length）]；
}
ballFunction.prototype.draw=函数（）{
ctx.beginPath（）；
ctx.arc（this.x，this.y，this.radius，0，Math.PI*2，false）；
ctx.fill（）；
}
ballFunction.prototype.move=函数（）{
ctx.clearRect（0,0400）；
ctx.strokeRect（0,0400）；
this.x+=this.xSpeed；
this.y+=this.y速度；
这个.draw（）；
如果（this.x>400 this.radius | | this.x<0+this.radius）{
this.xSpeed=-1*this.xSpeed；
}
如果（this.y>400-this.radius | | this.y<0+this.radius）{
this.ySpeed=-1*this.ySpeed；
}
}
var j=0；
函数startAnim（）{
j+=10；
如果（j==2000）{
var ballOne=新的Ball函数
var ballOneInterval=setInterval（气球移动，10）
}
如果（j==4000）{
var ballTwo=新的ballFunction
var ballTwoInterval=setInterval（ballTwo.move，10）
}
如果（j==6000）{
var ballThree=新的ballFunction
var ballThreeInterval=setInterval（ballThree.move，10）
}
如果（j==8000）{
var ballFour=新的ballFunction
var ballFourInterval=setInterval（ballFour.move，10）
}
如果（j==10000）{
var ballFive=新的ballFunction
var ballFiveInterval=设置间隔（ballFive.move，10）
}
如果（j==12000）{
var ballSix=新的ballFunction
var ballSixinterval=setInterval（ballSix.move，10）
}
}
var startAnimInt=setInterval（startAnim，10）；

我一直收到这样的消息：绘图函数不是ballFunction.move中的函数，即使我已将其插入。

在

move

函数中的

此

函数不是引用

ballFunction

对象，而是引用

窗口
使用类似于：
var ballOne = new ballFunction
var ballOneInterval = setInterval(ballOne.move.bind(ballOne),10)

而不是：
var ballOne = new ballFunction
var ballOneInterval = setInterval(ballOne.move,10)

对于所有的球。
这是人们在JS中使用这个
引用时遇到的几个常见问题之一。此

实际引用的内容在运行时确定，并取决于函数的调用方式，而不是函数的定义方式/位置。这里的问题是您正在使用

setInterval

：

setInterval(ballOne.move,10)

这当然会导致JS引擎调用ballOne.move，每10毫秒调用一次。但不幸的是，引擎调用它的方式与传递它的任何旧“普通函数”的方式相同——它无法知道它调用的函数应该“属于”

ballOne

对象，因此它的

此引用不会引用ballOne
，而是引用全局函数（窗口
）对象
您可以通过使用JS函数的方法来修复此问题，以创建一个新版本，该版本将始终具有指定的this
引用。也就是说，您可以将上面的行替换为：
setInterval(ballOne.move.bind(ballOne),10)

同样，对于其他setInterval
调用，这当然会很快重复，因此最好在构造函数中通过添加以下行来修复此问题：
this.move = this.move.bind(this);

注意，尽管您的问题与反应无关，但这是ReactJS在组件类中所建议的，原因完全相同，以确保<代码> < < /Cord>引用始终是所要的对象。
 < P>问题是，将<<代码> BARORATION/<代码>方法传递到<代码> SET间隔作为第一个PAR。ameter及其上下文将丢失，函数中的this将是窗口
对象。您可以传递一个函数调用您的移动
：
<!DOCTYPE html>
<html>
<head>
        <title>Some document</title>

<body>
            <h1></h1>
<canvas id="canvas" width = "400" height = "400"></canvas>          
<script src= "https://code.jquery.com/jquery-2.1.0.js"></script>

<script> 
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var arrayOfCollor = ["green", "red", "blue","gold","black","purple"];

var ballFunction = function(){
    this.x = 200;
    this.y = 200;
    this.xSpeed = 2;
    this.ySpeed = -3;
    this.radius = 10;
    ctx.fillStyle = arrayOfCollor[Math.floor(Math.random() * 
arrayOfCollor.length)];
}

ballFunction.prototype.draw = function(){
    ctx.beginPath();
    ctx.arc(this.x,this.y, this.radius, 0, Math.PI * 2, false);
    ctx.fill();
}

ballFunction.prototype.move = function(){

ctx.clearRect(0,0,400,400);
ctx.strokeRect(0,0,400,400);
this.x += this.xSpeed;
this.y += this.ySpeed;
this.draw();
if(this.x > 400-this.radius|| this.x < 0 + this.radius){
this.xSpeed = -1* this.xSpeed;
}
if(this.y > 400 - this.radius || this.y < 0 + this.radius){
this.ySpeed = -1* this.ySpeed;
}
}

var j = 0;

function startAnim(){
j+= 10; 
 if( j === 2000){
     var ballOne = new ballFunction
     var ballOneInterval = setInterval(function() {ballOne.move();},10)
     }
 if( j === 4000){
     var ballTwo = new ballFunction
     var ballTwoInterval = setInterval(function() {ballTwo.move();},10)
    }
 if( j === 6000){
     var ballThree = new ballFunction
     var ballThreeInterval = setInterval(function() {ballThree.move();},10)
    }
 if( j === 8000){
     var ballFour = new ballFunction
     var ballFourInterval = setInterval(function() {ballFour.move();},10)
   }
if( j === 10000){
    var ballFive = new ballFunction
    var ballFiveInterval = setInterval(function() {ballFive.move();},10)
   }
if( j === 12000){
    var ballSix = new ballFunction
    var ballSixinterval = setInterval(function() {ballSix.move();},10)
    }
}
var startAnimInt = setInterval(startAnim,10);


</script>
</body>
</html>


一些文件
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
变量arrayOfCollor=[“绿色”、“红色”、“蓝色”、“金色”、“黑色”、“紫色”]；
var ballFunction=函数（）{
这个.x=200；
这个y=200；
这个.xSpeed=2；
这个.ySpeed=-3；
这个半径=10；
ctx.fillStyle=arrayOfCollor[Math.floor（Math.random（）*
arrayOfCollor.length）]；
}
ballFunction.prototype.draw=函数（）{
ctx.beginPath（）；
ctx.arc（this.x，this.y，this.radius，0，Math.PI*2，false）；
ctx.fill（）；
}
ballFunction.prototype.move=函数（）{
ctx.clearRect（0,0400）；
ctx.strokeRect（0,0400）；
this.x+=this.xSpeed；
this.y+=this.y速度；
这个.draw（）；
如果（this.x>400 this.radius | | this.x<0+this.radius）{
this.xSpeed=-1*this.xSpeed；
}
如果（this.y>400-this.radius | | this.y<0+this.radius）{
this.ySpeed=-1*this.ySpeed；
}
}
var j=0；
函数startAnim（）{
j+=10；
如果（j==2000）{
var ballOne=新的Ball函数
var ballOneInterval=setInterval（函数（）{ballOne.move（）；}，10）
}
如果（j==4000）{
var ballTwo=新的ballFunction
var balltowinterval=setInterval（函数（）{balltower.move（）；}，10）
}
如果（j==6000）{
var ballThree=新的ballFunction
var ballThreeInterval=setInterval（函数（）{ballThree.move（）；}，10）
}
如果（j==8000）{
var ballFour=新的ballFunction
鲍尔福
<!DOCTYPE html>
<html>
<head>
        <title>Some document</title>

<body>
            <h1></h1>
<canvas id="canvas" width = "400" height = "400"></canvas>          
<script src= "https://code.jquery.com/jquery-2.1.0.js"></script>

<script> 
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var arrayOfCollor = ["green", "red", "blue","gold","black","purple"];

var ballFunction = function(){
    this.x = 200;
    this.y = 200;
    this.xSpeed = 2;
    this.ySpeed = -3;
    this.radius = 10;
    ctx.fillStyle = arrayOfCollor[Math.floor(Math.random() * 
arrayOfCollor.length)];
}

ballFunction.prototype.draw = function(){
    ctx.beginPath();
    ctx.arc(this.x,this.y, this.radius, 0, Math.PI * 2, false);
    ctx.fill();
}

ballFunction.prototype.move = function(){

ctx.clearRect(0,0,400,400);
ctx.strokeRect(0,0,400,400);
this.x += this.xSpeed;
this.y += this.ySpeed;
this.draw();
if(this.x > 400-this.radius|| this.x < 0 + this.radius){
this.xSpeed = -1* this.xSpeed;
}
if(this.y > 400 - this.radius || this.y < 0 + this.radius){
this.ySpeed = -1* this.ySpeed;
}
}

var j = 0;

function startAnim(){
j+= 10; 
 if( j === 2000){
     var ballOne = new ballFunction
     var ballOneInterval = setInterval(function() {ballOne.move();},10)
     }
 if( j === 4000){
     var ballTwo = new ballFunction
     var ballTwoInterval = setInterval(function() {ballTwo.move();},10)
    }
 if( j === 6000){
     var ballThree = new ballFunction
     var ballThreeInterval = setInterval(function() {ballThree.move();},10)
    }
 if( j === 8000){
     var ballFour = new ballFunction
     var ballFourInterval = setInterval(function() {ballFour.move();},10)
   }
if( j === 10000){
    var ballFive = new ballFunction
    var ballFiveInterval = setInterval(function() {ballFive.move();},10)
   }
if( j === 12000){
    var ballSix = new ballFunction
    var ballSixinterval = setInterval(function() {ballSix.move();},10)
    }
}
var startAnimInt = setInterval(startAnim,10);


</script>
</body>
</html>