如何在JavaScript中调用类函数？
[英]How to call class function in JavaScript?
问题描述
JavaScript的新手，可能很简单。
出现错误：
ball.html：46未捕获的SyntaxError：意外的标识符
为什么会这样呢？ 我是JavaScript新手。 但是我尽力修复了所有问题。 尝试删除该function但随后出现错误：
在repeatMe（）函数中未定义draw（）函数。
HTML和JavaScript：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Canvas</title>
<style type="text/css">
body {
background-color: white;
}
canvas {
border: 3px solid black;
}
</style>
</head>
<body>
<canvas id="canvas-for-ball" height="800px" width="800px"></canvas>
<script type="text/javascript">
// Gets a handle to the element with id canvasOne.
var canvas = document.getElementById("canvas-for-ball");
// Get a 2D context for the canvas.
var ctx = canvas.getContext("2d");
// The vertical location of the ball.
var y = 10;
var x = 10;
var ballRadius = 3;
var ySpeed = 1;
class Ball {
constructor(x, y, ballRadius, ySpeed) {
this.x = x;
this.y = y
this.ballRadius = BallRadius;
this.ySpeed = ySpeed;
}//endConstructor
function drawball() {
ctx.beginPath();
ctx.arc(x, y, ballRadius, 0, 2 * Math.PI);
ctx.stroke();
}//endDrawball
function draw() {
ctx.clearRect(1, 1, 800, 800);
drawball();
}//endDraw
function move() {
// Update the y location.
y += ySpeed;
console.log(y);
}
} //endBall
// A function to repeat every time the animation loops.
function repeatme() {
// Draw the ball (stroked, not filled).
draw();
move();
//catch ball at bottom
if (y == 800)
{
ySpeed = 0;
}
window.requestAnimationFrame(repeatme);
}
// Get the animation going.
repeatme();
</script>
</body>
</html>
4 个解决方案
解决方案1
1 2018-10-19 21:38:22
您需要先了解这一点，然后再开始使用JavaScript。 JavaScript中的类以及OOPS中的一些编程基础知识。
您面临的问题是调用一个不存在的函数。 另外，您错误地创建了类，这不是在JavaScript中的类中创建函数的方式。 另外，您不能直接访问类函数，这就是它们在类中的原因。 需要创建该类的对象，并且该对象将用于调用类函数。
更改为此：
class Ball {
constructor(x, y, ballRadius, ySpeed) {
this.x = x;
this.y = y
this.ballRadius = BallRadius;
this.ySpeed = ySpeed;
}//endConstructor
drawball() {
ctx.beginPath();
ctx.arc(x, y, ballRadius, 0, 2 * Math.PI);
ctx.stroke();
}//endDrawball
draw() {
ctx.clearRect(1, 1, 800, 800);
drawball();
}//endDraw
move() {
// Update the y location.
y += ySpeed;
console.log(y);
}
} //endBall
let Ball = new Ball(x, y, ballRadius, ySpeed);
// Note this is constructor calling so pass value for these arguments here
// A function to repeat every time the animation loops.
function repeatme() {
// Draw the ball (stroked, not filled).
Ball.draw();
Ball.move();
//catch ball at bottom
if (Ball.y == 800)
{
Ball.ySpeed = 0;
}
window.requestAnimationFrame(repeatme);
}
强烈推荐跳进的JavaScript之前先阅读一些文档，因为这是获得与混乱callsbacks ， 承诺 ， 关闭 ， 悬挂等等。
解决方案2
0 2018-10-19 21:31:05
这里存在一个问题，您正在尝试调用一些不存在的函数：
function repeatme() {
// Draw the ball (stroked, not filled).
draw(); //<-- Where is this function?
move(); //<-- Where is this function?
//catch ball at bottom
if (y == 800)
{
ySpeed = 0;
}
window.requestAnimationFrame(repeatme);
}
我想您想使用属于球类的功能。 如果是这样，您需要衍生一个Ball的新实例，并从那里访问函数...：
function repeatme() {
// Draw the ball (stroked, not filled).
let ball = new Ball(x, y, ballRadius, ySpeed); //<--- create a new ball instance
ball.draw(); //<-- invoke the function which resides on a ball
ball.move(); //<-- invoke the function which resides on a ball
//catch ball at bottom
if (y == 800)
{
ySpeed = 0;
}
window.requestAnimationFrame(repeatme);
}
这种“可能”会修复您的代码，但是这里还需要研究许多其他概念。 例如，您有一些变量的作用域超出Ball的范围，但是在Ball类内部，您正在引用它们。 因此，您实际上是在这里创建了一个闭合……可能是偶然的。
您应该只让Ball来完成它，而不需要所有这些范围变量...就像这样：
// Gets a handle to the element with id canvasOne.
var canvas = document.getElementById("canvas-for-ball");
// Get a 2D context for the canvas.
var ctx = canvas.getContext("2d");
//< -- Notice I removes these vars here, since we really just want to feed those into the constructor of a Ball...
class Ball {
constructor(x, y, ballRadius, ySpeed) {
this.x = x;
this.y = y
this.ballRadius = ballRadius;
this.ySpeed = ySpeed;
}//endConstructor
drawball() {
ctx.beginPath();
ctx.arc(this.x, this.y, this.ballRadius, 0, 2 * Math.PI);
ctx.stroke();
}//endDrawball
draw() {
ctx.clearRect(1, 1, 800, 800);
this.drawball();
}//endDraw
move() {
// Update the y location.
this.y += this.ySpeed;
console.log(this.y);
}
} //endBall
// A function to repeat every time the animation loops.
function repeatme() {
// Draw the ball (stroked, not filled).
// The vertical location of the ball. Remember the variables above? Now the values are fed into here instead...
let ball = new Ball(10, 10, 3, 1)
ball.draw();
ball.move();
//catch ball at bottom
if (ball.y == 800)
{
ball.ySpeed = 0;
}
window.requestAnimationFrame(repeatme);
}
// Get the animation going.
repeatme();
解决方案3
0 2018-10-19 21:35:49
我只是在class()定义了以下函数
function drawball() {
ctx.beginPath();
ctx.arc(x, y, ballRadius, 0, 2 * Math.PI);
ctx.stroke();
}//endDrawball
function draw() {
ctx.clearRect(1, 1, 800, 800);
drawball();
}//endDraw
function move() {
// Update the y location.
y += ySpeed;
console.log(y);
}
更新的工作代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Canvas</title>
<style type="text/css">
body {
background-color: white;
}
canvas {
border: 3px solid black;
}
</style>
</head>
<body>
<canvas id="canvas-for-ball" height="800px" width="800px"></canvas>
<script type="text/javascript">
// Gets a handle to the element with id canvasOne.
var canvas = document.getElementById("canvas-for-ball");
// Get a 2D context for the canvas.
var ctx = canvas.getContext("2d");
// The vertical location of the ball.
var y = 10;
var x = 10;
var ballRadius = 3;
var ySpeed = 1;
class Ball {
constructor(x, y, ballRadius, ySpeed) {
this.x = x;
this.y = y
this.ballRadius = BallRadius;
this.ySpeed = ySpeed;
}//endConstructor
} //endBall
function drawball() {
ctx.beginPath();
ctx.arc(x, y, ballRadius, 0, 2 * Math.PI);
ctx.stroke();
}//endDrawball
function draw() {
ctx.clearRect(1, 1, 800, 800);
drawball();
}//endDraw
function move() {
// Update the y location.
y += ySpeed;
console.log(y);
}
// A function to repeat every time the animation loops.
function repeatme() {
// Draw the ball (stroked, not filled).
draw();
move();
//catch ball at bottom
if (y == 800)
{
ySpeed = 0;
}
window.requestAnimationFrame(repeatme);
}
// Get the animation going.
repeatme();
</script>
</body>
</html>
解决方案4
0 2018-10-19 21:52:21
问题的根源在于您正在创建一个类，但从未创建该类的实例来调用您的函数。 这是一个清理后的功能示例，带有注释，解释了事情的不同之处。
// Gets a handle to the element with id canvasOne. var canvas = document.getElementById("canvas-for-ball"); // Get a 2D context for the canvas. var ctx = canvas.getContext("2d"); // The vertical location of the ball. var y = 10; var x = 10; var ballRadius = 3; var ySpeed = 1; class Ball { constructor(x, y, ballRadius, ySpeed) { // changed these to set the private members this._x = x; this._y = y // updated the assignment here, it had the wrong case this._ballRadius = ballRadius; this._ySpeed = ySpeed; } //endConstructor // added a setter for ySpeed so you can acess it outside of the class set VerticleSpeed(val){ this._ySpeed = val; } // added a getter/setter for y so you can access it outside of the class get VerticlePosition(){ return this._y; } // remove the function keyword, it's not needed drawball() { ctx.beginPath(); // updated this to reference the properties on the class ctx.arc(this._x, this._y, this._ballRadius, 0, 2 * Math.PI); ctx.stroke(); } //endDrawball // remove the function keyword, it's not needed draw() { ctx.clearRect(1, 1, 800, 800); this.drawball(); } //endDraw // remove the function keyword, it's not needed move() { // Update the y location. // updated this to reference the properties on the class this._y += this._ySpeed; console.log("Ball position", this._y); } } //endBall // A function to repeat every time the animation loops. function repeatme() { // Draw the ball (stroked, not filled). // upated to call the functions on the instance of the class myBall.draw(); myBall.move(); //catch ball at bottom // changed to check the property on the instance of the class // changed this bit to make it bounce and if its outside the bounds, this is just me showing off and having fun with this example if (myBall.VerticlePosition >= canvas.height) { // changed to assign the property on the instance of the class myBall.VerticleSpeed = -ySpeed; } else if (myBall.VerticlePosition <= 0){ myBall.VerticleSpeed = ySpeed; } window.requestAnimationFrame(repeatme); } // create an instance of your class let myBall = new Ball(x, y, ballRadius, ySpeed) // Get the animation going. repeatme();
body { background-color: white; } canvas { border: 3px solid black; } .as-console-wrapper { max-height: 25px !important; }
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Canvas</title> </head> <body> <canvas id="canvas-for-ball" height="150px" width="400px"></canvas> </body> </html>
Javascript：如何在派生类中重写之前调用基类函数？
[英]Javascript: How to call base class function before overriding in derived class?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.