首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何在JavaScript中调用类函数?

如何在JavaScript中调用类函数?
EN

Stack Overflow用户
提问于 2018-10-20 05:17:38
回答 4查看 6.5K关注 0票数 0

对于JavaScript来说,这可能是一件简单的事情。

获取错误:

ball.html:46未捕获SyntaxError:意外的标识符

为什么会发生这种情况?我是JavaScript的新手。但我尽我所能来修复它。已尝试删除function,但随后出现错误:

repeatMe()函数中未定义

draw()函数。

超文本标记语言和JavaScript:

代码语言: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>
EN

回答 4

Stack Overflow用户

发布于 2018-10-20 05:38:23

在开始使用JavaScript、Classes in JavaScript和一些面向对象编程的基础知识之前,您需要了解这些内容。

您面临的问题是调用一个不存在的函数。你也错误地创建了类,这不是在JavaScript的类中创建函数的方式。此外,你不能直接访问类函数,这就是它们在类中的原因。需要创建该类的对象,该对象将用于调用类函数。

更改为以下内容:

代码语言: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之前先阅读一些文档,因为它会与callsbackspromisesclosureshoisting等混淆。

票数 2
EN

Stack Overflow用户

发布于 2018-10-20 05:31:06

这里有一个问题,因为您正在尝试调用一些不存在的函数:

代码语言:javascript
复制
  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类的函数。如果是这样,您需要派生一个新的Ball实例,并从那里访问函数...:

代码语言:javascript
复制
  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类中,您正在引用它们。因此,您实际上在这里创建了一个闭包...很可能是偶然的。

你应该让球做它自己的事情,没有所有这些作用域变量...排序如下:

代码语言: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");

//< -- 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();
票数 0
EN

Stack Overflow用户

发布于 2018-10-20 05:35:50

我刚刚在class()中定义了下面的函数

代码语言:javascript
复制
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);
    }

更新的工作代码:

代码语言: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

      } //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>
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/52900036

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档