ES2015 Classes

Contact Us or call 1-877-932-8228
ES2015 Classes

ES2015 Classes

The ECMAScript 6 (often referred to as "ES2015") release of JavaScript introduced a new syntax for OOP in JavaScript. (Technically, the release is called "ECMAScript 2015" and this is the 6th edition; we will use the common term "ES2015" throughout this course.) While the underlying code remains the same - we are still using prototyping of the sort we looked at previously in this lesson - the introduction of the class keyword and some other features allow us to work with object-oriented code in a fashion similar to that used in other programming languages.

Please be aware that, because ES2015 is a relatively-new standard, ES2015 features (like class) may not work in older browsers.

At the core of the new syntax is the class and a constructor for that class; the constructor is the method invoked when we instantiate an object of the class with the new keyword - just like the function we defined to serve as the prototype for objects previously. Here's an example with the new syntax to match our earlier example:

Code Sample:

AdvancedObjects/Demos/class.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;
			}
			fullName() {
				return this.fname + ' ' + this.lname;
			}
		}
	</script>
</head>
<body>
	<h1>Class</h1>
	<script>
		var jdoe = new Person('Jane', 'Doe', 32);
		document.write('First name: ');
		document.write(jdoe.fname);
		document.write('<hr>');
		document.write('Full name: ');
		document.write(jdoe.fullName());

		document.write('<hr>');
		document.write('<hr>');

		var afung = new Person('Adam', 'Fung', 11);
		document.write('First name: ');
		document.write(afung.fname);
		document.write('<hr>');
		document.write('Full name: ');
		document.write(afung.fullName());
	</script>
</body>
</html>

Code Explanation

Where before we created a function to serve as our prototype, we now do the same thing using the new ES2015 class syntax. The class defines the prototype for objects created with the new keyword (as we do on line 22), with the constructor - a special kind of method - specifying how the data members of the class get assigned. We also create, as we did before, a method fullName() - a function which returns the first and last names concatenated together with a space.

The new class syntax is, we would argue, cleaner and simpler and, for many of us, more familiar from OOP syntax we find in other language. Anything we could do with the prototyping syntax we looked at earlier in this lesson we can do with the new ES2015 syntax. Here's another example:

Code Sample:

AdvancedObjects/Demos/multipleObjectsClasses.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Multiple Classes</title>
	<script>
		class Person {
			constructor(fname, lname, age) {
				this.fname = fname;
				this.lname = lname;
				this.age = age;
			}
			toString() {
				return this.fname + ' ' + this.lname;
			}
		}

		class Team {
			constructor(teamName, sport) {
				this.teamName = teamName;
				this.sport = sport;
				this.players = [];
			}
			addPlayer(person) {
				if (person.age >= 18) {
					this.players.push(person);
					return true;
				}
				return false;
			}
			toString() {
				var str = '<strong>' + this.teamName + '</strong>';
				str += '<ul>';
				for (let p in this.players) {
					let person = this.players[p];
					str += '<li>' + person + '</li>';
				}
				str += '</ul>';
				return str;
			}
		}
	</script>
</head>
<body>
	<h1>Multiple Classes</h1>
	<script>
		var jdoe = new Person('Jane', 'Doe', 32);
		var afung = new Person('Adam', 'Fung', 11);
		
		var tigers = new Team('The Tigers', 'soccer');
		if (!tigers.addPlayer(jdoe)) {
			alert('player not added - too young');
		}
		if (!tigers.addPlayer(afung)) {
			alert('player ' + afung + ' not added - too young');
		}

		document.write('Here is my team:<br><br>');
		document.write(tigers);
	</script>
</body>
</html>

Code Explanation

We create classes for Person (replacing the fullName() method with toString()) and Team. We modify the Team class slightly from our earlier example so that only people who are 18 years old or older can be added to this team. Method addPlayer checks the age of its person argument, adding the person to the players array and returning true if the person is old enough; the method returns false (and does not add the person) if too young. We check (on lines 51 and 54) to see if the person was added when calling Tigers.addPlayer, alerting a message to the user if not.

Next