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
Class Intro
JavaScript Class Syntax
The keyword class allows you to create a class.
You can add a method named constructor():
Syntax
class ClassName {
constructor() { … }
}
Example
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
}
The example above creates a class named “Car”.
The class has two initial properties: “name” and “year”.
A JavaScript class is not an object.
It is a template for JavaScript objects.
Using a Class
When you have a class, you can use the class 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 must have the exact name “constructor”
- When a new object is created, it automatically executes.
- It initializes the object properties
- If you do not define a constructor method is not defined, JavaScript will add an empty constructor method.
Class Methods
Class methods are created with the same syntax as object methods.
Add any number of methods.
Syntax
class ClassName {
constructor() { … }
method_1() { … }
method_2() { … }
method_3() { … }
}
Create 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.
Send 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.
“use strict”
The syntax in classes are written in “strict mode”.
An error will occur, if you do not follow the “strict mode” rules.
Example
In “strict mode” you will get an error if you use a variable without declaring it.
<html>
<body>
<h2>JavaScript Classes are written in “strict mode”</h2>
<p>In a JavaScript Class you cannot use variable without declaring it.</p>
<p id=”demo”></p>
<script>
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
age() {
// date = new Date(); // This will not work
let date = new Date(); // This will work
return date.getFullYear() – this.year;
}
}
myCar = new Car(“Ford”, 2014);
document.getElementById(“demo”).innerHTML =
“My car is ” + myCar.age() + ” years old.”;
</script>
</body>
</html>
Output
JavaScript Classes are written in "strict mode"
In a JavaScript Class you cannot use variable without declaring it.
My car is 8 years old.