Posted By
Bajarangi soft ,
Posted On 09-10-2020
Class Definition
Use the keyword class to create a class, and always add the constructor() method.
The constructor method is called each time the class object is initialized.
Example A simple class definition for a class named "Car":
class Car {
constructor(brand) {
this.carname = brand;
}
}
Now you can create objects using the Car class:
<script>
class Car {
constructor(brand) {
this.carname = brand;
}
}
mycar = new Car("Ford");
document.getElementById("demo").innerHTML = mycar.carname;
</script>
Getters and Setters
Classes also allows you to use getters and setters.
It can be smart to use getters and setters for your properties, especially if you want to do something special with the value before returning them, or before you set them.
To add getters and setters in the class, use the get and set keywords.
Example(1)
<script>
class Car {
constructor(brand) {
this.carname = brand;
}
get cnam() {
return this.carname;
}
set cnam(x) {
this.carname = x;
}
}
mycar = new Car("Ford");
document.getElementById("demo").innerHTML = mycar.cnam;
</script>
In above example creating a getter and a setter for the "carname" property
Note: even if the getter is a method, you do not use parentheses when you want to get the property value.
The name of the getter/setter method cannot be the same as the name of the property, in this case carname.
Many programmers use an underscore character _ before the property name to separate the getter/setter from the actual property:
<script>
class Car {
constructor(brand) {
this._carname = brand;
}
get carname() {
return this._carname;
}
set carname(x) {
this._carname = x;
}
}
mycar = new Car("Ford");
document.getElementById("demo").innerHTML = mycar.carname;
</script>
In above exaample underscore character to separate the getter/setter from the actual property
Example(3)
<script>
class Car {
constructor(brand) {
this._carname = brand;
}
set carname(x) {
this._carname = x;
}
get carname() {
return this._carname;
}
}
mycar = new Car("Ford");
mycar.carname = "Volvo";
document.getElementById("demo").innerHTML = mycar.carname;
</script>
In above example use a setter to change the carname to "Volvo"
Complete Code For Adding Getters And Setters In class using JavaScript
<!DOCTYPE html>
<html>
<head>
<title>How To Add Getters And Setters In class using JavaScript</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<br>
<div class="text-center">
<h1 id="color" style="color: tomato">How To Add Getters And Setters In class using JavaScript</h1>
</div>
<div class="well">
<h2 id="demo1"></h2>
<h2 id="demo2"></h2>
<h2 id="demo3"></h2>
<script>
class Car {
constructor(brand) {
this.carname = brand;
}
get cnam() {
return this.carname;
}
set cnam(x) {
this.carname = x;
}
}
mycar = new Car("Ford");
document.getElementById("demo1").innerHTML = mycar.cnam;
document.getElementById("demo2").innerHTML = mycar.carname;
mycar.carname = "Volvo";
document.getElementById("demo3").innerHTML = mycar.carname;
</script>
</div>
</div>
</body>
</html>