Как вызвать функцию класса в JavaScript? - PullRequest
Новая
       1

Как вызвать функцию класса в JavaScript?

0 голосов
/ 20 октября 2018

Новое в JavaScript, поэтому может быть что-то простое.

Получение ошибки:

ball.html: 46 Uncaught SyntaxError: Неожиданный идентификатор

Почему это происходит?Я новичок в JavaScript.Но я попробовал все, что знал, чтобы это исправить.Попытался удалить function, но затем выдает ошибку:

Функция draw () не определена в функции repeatMe ().

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 ]

0 голосов
/ 20 октября 2018

Корень проблемы в том, что вы создаете класс, но никогда не создаете экземпляр этого класса для вызова ваших функций.Вот исправленный пример работы с комментариями, объясняющими, что происходит по-другому. 

// 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>
0 голосов
/ 20 октября 2018

Я только что определил ниже функции из 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>
0 голосов
/ 20 октября 2018

Вы должны увидеть это, прежде чем приступить к использованию 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, так какэто путает с обратными вызовами , обещаниями , замыканиями , подъемом и многими другими.

0 голосов
/ 20 октября 2018

Проблема здесь в том, что вы пытаетесь вызвать некоторые функции, которые не существуют: 

  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 и получить доступ к функциям оттуда ...: 

  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();
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...