JS Tutorial
JS Version
JS Objects
JS Function
JS Classes
JS Async
JS HTML DOM
JS Browser BOM
JS Web API
JS AJAX
JS JSON
JS vs JQUERY
JS Graphics
JavaScript Classes
JavaScript Class Syntax
Using the keyword class to create a class.
Add a method named constructor():
Syntax
class ClassName {
constructor() { … }
}
Example
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
}
The above example creates a class named “Car”.
The class consists of two initial properties: “name” and “year”.
A JavaScript class is not an object.
It is a template for JavaScript objects.
Using a Class
The class can be used to create objects:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Class</h2>
<p>How to use a JavaScript Class.</p>
<p id=”demo”></p>
<script>
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
}
const myCar = new Car(“Ford”, 2014);
document.getElementById(“demo”).innerHTML =
myCar.name + ” ” + myCar.year;
</script>
</body>
</html>
Output
JavaScript Class
How to use a JavaScript Class.
The Constructor Method
The constructor method is a special method:
- It has to have the exact name “constructor”
- It is executed automatically when a new object is created
- It is used to initialize object properties
When a constructor method is not defined, JavaScript adds an empty constructor method.
Class Methods
Class methods are created with the same syntax as object methods.
Using the keyword class creates a class.
Always add a constructor() method.
Adding any number of methods.
Syntax
class ClassName {
constructor() { … }
method_1() { … }
method_2() { … }
method_3() { … }
}
Creating a Class method named “age”, that returns the Car age:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Class Method</h2>
<p>How to define and use a Class method.</p>
<p id=”demo”></p>
<script>
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
age() {
let date = new Date();
return date.getFullYear() – this.year;
}
}
let myCar = new Car(“Ford”, 2014);
document.getElementById(“demo”).innerHTML =
“My car is ” + myCar.age() + ” years old.”;
</script>
</body>
</html>
Output
JavaScript Class Method
How to define and use a Class method.
My car is 8 years old.
Sending parameters to Class methods:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Class Method</h2>
<p>Pass a parameter into the “age()” method.</p>
<p id=”demo”></p>
<script>
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
age(x) {
return x – this.year;
}
}
let date = new Date();
let year = date.getFullYear();
let myCar = new Car(“Ford”, 2014);
document.getElementById(“demo”).innerHTML=
“My car is ” + myCar.age(year) + ” years old.”;
</script>
</body>
</html>
Output
JavaScript Class Method
Pass a parameter into the "age()" method.
My car is 8 years old.