Nematrian
/

HTML / CSS / JavaScript Tutorial

JavaScript Statement: class

[this page | pdf | back links]

In JavaScript, the class statement defines a class. This is technically a special type of JavaScript function that adds additional object-orientated characteristics to JavaScript. It was introduced in ECMAScript 2015. Once a class has been defined, other variables can be created that are instances of this class, with methods and properties as defined by the class.

 

The class keyword is used to create a class. A specific method, the constructor method, is automatically called each time an object (i.e. an instance of the class) is initialised. The properties of the object instance can then be initialised using the this statement. If you do not include a constructor method then JavaScript will add an invisible and empty constructor method. (Other) methods can then be added (without needing a function statement). Static methods, defined using the static statement, are defined on the class itself and not on any instance of the class.

 

Classes can inherit properties and methods from other classes using the extends keyword. The super method can be used in the constructor method to access the properties and methods of the parent.

 

In object-orientated computer languages classes also have ‘get’ and ‘set’ methods that allow properties within an object of a given class to be accessed or set by statements manipulating the object (and, sometimes, when doing so for other intra-class manipulations to take place). In JavaScript this functionality is achieved using the get and set statements. The names of getter/setter methods cannot be the same as the name of the property manipulated by the method (programmers often use an underscore character _ before the property name to differentiate the getter/setter from the actual property). To use the getter/setter methods you use the same syntax as when you set a property value, without parentheses.

 

EXAMPLE:


HTML USED IN THIS EXAMPLE:
<!DOCTYPE html>
<html> <!-- Copyright (c) Nematrian Limited 2018 -->
<head>
<style>
table,th,tr,td {border: 1px solid black; border-collapse: collapse;}
</style>
</head>
<body>
<table>
<tr>
<th>Example</th>
<th>Resulting values</th>
</tr>
<tr>
<td><code id="Example"></code></td>
<td><code id="Result"></code></td>
</tr>
</table>

<script>
class ComplexNumber {
  constructor(real, imag) { this._real = real; this._imag = imag;}
  display() { return this._real + " + " + this._imag + "i";}
  static multiply(a, b) {
    var c = new ComplexNumber(0, 0);
    c.real = a.real * b.real - a.imag * b.imag;
    c.imag = a.real * b.imag + a.imag * b.real;
    return c;
  }
  get real() { return this._real; }
  set real(x) { this._real = x;}
  get imag() { return this._imag; }
  set imag(x) { this._imag = x;}
}

class ComplexNumberExtra extends ComplexNumber {
  constructor(real, imag, extra) { super(real, imag); this._extra = extra; }
  display() {
    return this._real + " + " + this._imag + "i " + this._extra;
  }
}

var z1 = new ComplexNumber(1, 0); // i.e. z1 is 1
var z2 = new ComplexNumber(3, 4);
var ans1 = ComplexNumber.multiply(z1, z2).display();
z1.real = 0; z1.imag = 1 // so now z1 = 0 + 1i
var ans2 = ComplexNumber.multiply(z1, z2).display();
var q = new ComplexNumberExtra(1, 2, "extra");
var ans3 = q.display();

document.getElementById("Example").innerHTML =
  'class ComplexNumber {<br>' +
  '&nbsp;&nbsp;  constructor(real, imag) { this._real = real; this._imag = imag;}<br>' +
  '&nbsp;&nbsp;  display() { return this._real + " + " + this._imag + "i";}<br>' +
  '&nbsp;&nbsp;  static multiply(a, b) {<br>' +
  '&nbsp;&nbsp;&nbsp;&nbsp;    var c = new ComplexNumber(0, 0);<br>' +
  '&nbsp;&nbsp;&nbsp;&nbsp;    c.real = a.real * b.real - a.imag * b.imag;<br>' +
  '&nbsp;&nbsp;&nbsp;&nbsp;    c.imag = a.real * b.imag + a.imag * b.real;<br>' +
  '&nbsp;&nbsp;&nbsp;&nbsp;    return c;<br>' +
  '&nbsp;&nbsp;  }<br>' +
  '&nbsp;&nbsp;  get real() { return this._real; }<br>' +
  '&nbsp;&nbsp;  set real(x) { this._real = x;}<br>' +
  '&nbsp;&nbsp;  get imag() { return this._imag; }<br>' +
  '&nbsp;&nbsp;  set imag(x) { this._imag = x;}<br>' +
  '}<br><br>' +
  'class ComplexNumberExtra extends ComplexNumber {<br>' +
  '&nbsp;&nbsp;  constructor(real, imag, extra) { super(real, imag); this._extra = extra; }<br>' +
  '&nbsp;&nbsp;  display() {<br>' +
  '&nbsp;&nbsp;&nbsp;&nbsp;    return this._real + " + " + this._imag + "i " + this._extra;<br>' +
  '&nbsp;&nbsp;  }<br>' +
  '}<br><br>' +
  'var z1 = new ComplexNumber(1, 0); // i.e. z1 is 1<br>' +
  'var z2 = new ComplexNumber(3, 4);<br>' +
  'var ans1 = ComplexNumber.multiply(z1, z2).display();<br>' +
  'z1.real = 0; z1.imag = 1 // so now z1 = 0 + 1i<br>' +
  'var ans2 = ComplexNumber.multiply(z1, z2).display();<br>' +
  'var q = new ComplexNumberExtra(1, 2, "extra");<br>' +
  'var ans3 = q.display();<br>'

document.getElementById("Result").innerHTML =
   "ans1 = " + ans1 + "<br>ans2 = " + ans2 + "<br>ans3 = " + ans3;
</script>

</body>
</html>

NAVIGATION LINKS
Contents | Prev | Next | JavaScript Reserved Words

Desktop view | Switch to Mobile