HTML, CSS, JavaScript Tutorial

JavaScript Statement: this

In JavaScript, the this element allows you to access the properties and methods of the object that defines whatever is being considered at the time. A common use is to access the properties of an instance of a class. The this element then refers to these properties, which can then be manipulated in the constructor, get and set and other methods of the class.

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