Static Methods

Contact Us or call 1-877-932-8228
Static Methods

Static Methods

So far we have looked at instance methods for our classes/prototypes: functions which act upon the specific data associated with an object of the class. We create a method, like toString(), which acts upon or gets information from the property values of each object. If we had two Person objects jdoe and afung, then invoking the toString() method on object jdoe might return "Jane Doe", while invoking toString() on afung might return "Adam Fung".

But sometimes we want a method which belongs to the class as a whole, rather than to an instance of the class. In JavaScript, like in many other programming languages, we call this a static method, using the static keyword when defining the method. We'll look now at an example where we model an ordered pair - a point on a graph with (x,y) coordinates - as a way of demonstrating.

Code Sample:

AdvancedObjects/Demos/point.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Class</title>
	<script>
		class Point {
			constructor(x, y) {
				this.x = x;
				this.y = y;
			}
			toString() {
				return '(' + this.x + ',' + this.y + ')';
			}
			static distance(p1, p2) {
				var xDif = p1.x - p2.x;
				var yDif = p1.y - p2.y;
				return Math.sqrt(xDif*xDif + yDif*yDif);
			}
		}
	</script>
</head>
<body>
	<h1>Class</h1>
	<script>
		var point1 = new Point(3, 4);
		var point2 = new Point(-1, 6);
		document.write('Distance between ' + point1 + ' and ' + point2 + ' is ' + Point.distance(point1, point2));
	</script>
</body>
</html>

Code Explanation

Our Point class models a point on a graph, with data members x and y to represent a point like (3,4), a point with x-coordinate 3 and y-coordinate 4, or (-1,6).

The toString() method returns a string representation of the Point, with opening parenthesis, x coordinate, comma, y coordinate, and closing parenthesis.

We also define a static method distance. This method belongs to the class as a whole: it wouldn't make sense to ask "what is the distance" for any one Point object, since distance by its very nature is the distance between two points. Thus this method is defined with the static keyword. We call the method, on line 28, using not an object of the class but rather with the class name: that is, we use Point.distance(point1, point2) rather than something like point1.distance(point1, point2).

Keep in mind that, because static methods are associated with the class rather than an instance (object) of the class, we can't access data members in the definition of the static method. It wouldn't make sense, in the body of a static method definition, to refer to this.x or this.fname, since a static method isn't acting on (doesn't know anything about) a specific object.

Let's look at another example - adding a static method to our Person class:

Code Sample:

AdvancedObjects/Demos/staticMethodPerson.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Class</title>
	<script>
		class Person {
			constructor(fname, lname, age) {
				this.fname = fname;
				this.lname = lname;
				this.age = age;
			}
			toString() {
				return this.fname + ' ' + this.lname;
			}
			static possibleParentChild(p1, p2) {
				if (p1.lname !== p2.lname) {
					return false;
				}
				if (Math.abs(p1.age - p2.age) < 18) {
					return false;
				}
				return true;
			}
		}
	</script>
</head>
<body>
	<h1>Class</h1>
	<script>
		var jdoe = new Person('Jane', 'Doe', 32);
		var afung = new Person('Adam', 'Fung', 11);
		var mdoe = new Person('Maria', 'Doe', 13);
		
		if (Person.possibleParentChild(jdoe, mdoe)) {
			document.write(jdoe + ' and ' + mdoe + ' might be parent/child');
		} else {
			document.write(jdoe + ' and ' + mdoe + ' are likely not parent/child');
		}
	</script>
</body>
</html>

Code Explanation

Consider the case of gauging the probability that two Person objects represent a parent and child. While certainly not definitive, we might say it is true that two such objects are likely to be a parent and child is they have the same last name and if their ages are at least some threshold value apart.

We define static method possibleParentChild for class Person which expects two Person objects as parameters and returns true if their lname fields are equal and if their ages differ by at least 18.

We call the static method on line 35 with the code Person.possibleParentChild(jdoe, mdoe) - again, using the name of the class (Person) to invoke a static method rather than using an object of the class.

We'll ask you to try out using ES2015 classes and static methods in the next exercise:

Next