HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
ECMAScript 2015, also known as ES6, introduced JavaScript Classes
Use the keyword class to create a class.
Always add a method named constructor():
class ClassName {
constructor() { ... }
}
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.
When you have a class, you can use the class to create objects:
The example above uses the Car class to create two Car objects.
The constructor method is called automatically when a new object is created.
The constructor method is a special method:
If you do not define a constructor method, JavaScript will add an empty constructor method.
Class methods are created with the same syntax as object methods.
Use the keyword class to create a class.
Always add a constructor() method.
Then add any number of methods.
class ClassName {
constructor() { ... }
method_1() { ... }
method_2() { ... }
method_3() { ... }
}
Create a Class method named "age", that returns the Car age:
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.";
You can send parameters to Class methods:
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.";
table.browserref { border-collapse:collapse;width:100%; } table.browserref th:first-child,table.browserref td:first-child{padding-left:16px} table.browserref th{ height:32px;background-repeat:no-repeat;background-position:center center;font-weight:normal;padding:11px 5px 11px 5px;vertical-align:middle; } table.browserref .bsChrome {background-image:url('/images/compatible_chrome.png');} table.browserref .bsEdge {background-image:url('/images/compatible_edge.png');} table.browserref .bsFirefox {background-image:url('/images/compatible_firefox.png')} table.browserref .bsSafari {background-image:url('/images/compatible_safari.png');} table.browserref .bsOpera {background-image:url('/images/compatible_opera.png')} table.browserref td{ text-align:center;padding:8px;vertical-align:top; }
The following table defines the first browser version with full support for Classes in JavaScript:
| Chrome 49 | Edge 12 | Firefox 45 | Safari 9 | Opera 36 |
| Mar, 2016 | Jul, 2015 | Mar, 2016 | Oct, 2015 | Mar, 2016 |
The syntax in classes must be written in "strict mode".
You will get an error if you do not follow the "strict mode" rules.
In "strict mode" you will get an error if you use a variable without declaring it:
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;
}
}
Learn more about "strict mode" in: JS Strict Mode.