A template for creating objects of a particular type.
Classes can make it easier to program with objects. For example, a Frog
class could create objects that behave like frogs. Each object created using a class is called an instance of that class. All instances of a class are the same type. Here's an example of creating an instance of a Frog
class:
let fifi = new Frog(50, 50, 20);
The variable fifi
refers to an instance of the Frog
class. The keyword new
is used to call the Frog
class' constructor in the statement new Frog()
. Altogether, a new Frog
object was created and assigned to the variable fifi
. Classes are templates, so they can be used to create more than one instance:
// First Frog instance.
let frog1 = new Frog(25, 50, 10);
// Second Frog instance.
let frog2 = new Frog(75, 50, 10);
A simple Frog
class could be declared as follows:
class Frog {
constructor(x, y, size) {
// This code runs once when an instance is created.
this.x = x;
this.y = y;
this.size = size;
}
show() {
// This code runs once when myFrog.show() is called.
textAlign(CENTER, CENTER);
textSize(this.size);
text('🐸', this.x, this.y);
}
hop() {
// This code runs once when myFrog.hop() is called.
this.x += random(-10, 10);
this.y += random(-10, 10);
}
}
Class declarations begin with the keyword class
followed by the class name, such as Frog
, and curly braces {}
. Class names should use PascalCase
and can't have spaces in their names. For example, naming a class Kermit The Frog
with spaces between each word would throw a SyntaxError
. The code between the curly braces {}
defines the class.
Functions that belong to a class are called methods. constructor()
, show()
, and hop()
are methods in the Frog
class. Methods define an object's behavior. Methods can accept parameters and return values, just like functions. Note that methods don't use the function
keyword.
constructor()
is a special method that's called once when an instance of the class is created. The statement new Frog()
calls the Frog
class' constructor()
method.
A class definition is a template for instances. The keyword this
refers to an instance's data and methods. For example, each Frog
instance has unique coordinates stored in this.x
and this.y
. The show()
method uses those coordinates to draw the frog. The hop()
method updates those coordinates when called. Once a Frog
instance is created, its data and methods can be accessed using the dot operator .
as follows:
// Draw a lily pad.
fill('green');
stroke('green');
circle(fifi.x, fifi.y, 2 * fifi.size);
// Show the Frog.
fifi.show();
// Hop.
fifi.hop();
Examples
Related References
stringify
From the MDN entry: The JSON.stringify() method converts a JavaScript object or value to a JSON string.
log
Prints a message to your browser's web console.
===
The strict equality operator === checks to see if two values are equal and of the same type.
Array
A list that keeps several pieces of data in order.