CodesJava

Easy learning with example program codes

JavaScript Class

According to Wikipedia : In object-oriented programming, a class is an extensible program-code-template for creating objects, providing initial values for state (member variables) and implementations of behavior (member functions or methods).

A class in Javascript is a special type of function that contains various class members including methods or constructor.

A class in JavaScript can be define by following ways:

  • Class declarations
  • Class expressions

JavaScript Class Declarations

Declaring a class means defining a class using the name of the class. The name of the class always starts with an uppercase letter.

Syntax:

class className
class TestClass {
  constructor() { ... }
  method1() { ... }
  method2() { ... }
  method3() { ... }
  ...
}

JavaScript Class Declarations Example:

<!DOCTYPE html>
<html>
<body>
 
<script>  
class Student  
  {  
	constructor(id,name)  
	{  
  	this.id=id;  
  	this.name=name;  
	}  
	detail()  
	{  
  document.writeln(this.id+" "+this.name+"<br>")  
	}  
  }   
var s1=new Student(1,"Diana Rey");  
var s2=new Student(2,"Tagore William");  
s1.detail();   
s2.detail();  
</script>
 
</body>
</html>

Output:

1 Diana Rey
2 Tagore William

Note: A class can not be re defined by declaring approach. i.e. We can not re declare a class. Following code will give throw error.

<!DOCTYPE html>
<html>
<body>
 
<script>  
class Student  
  {  
	constructor(id,name)  
	{  
  	this.id=id;  
  	this.name=name;  
	}  
	detail()  
	{  
  document.writeln(this.id+" "+this.name+"<br>")  
	}  
  }   
class Student  
  { 
  }
var s1=new Student(1,"Diana Rey");  
var s2=new Student(2,"Tagore William");  
s1.detail();   
s2.detail();  
</script>
 
</body>
</html>

JavaScript Class expressions

Class expressions means defining a class using a class expression. The name of the class is not mandatory in this case.

Syntax:

var variableName = class

JavaScript Unnamed Class Expression Example:

<!DOCTYPE html>
<html>
<body>
 
<script>  
var student = class {  
	constructor(id,name)  
	{  
  	this.id=id;  
  	this.name=name;  
	}  
  }   
document.writeln(student.name); 
</script>
 
</body>
</html>

JavaScript Class Expression Example:

<!DOCTYPE html>
<html>
<body>
 
<script>
var student=class 
  {
    constructor(id,name)
    {
      this.id=id;
      this.name=name;
    }
 
showDetail()
    {
  document.writeln(this.id+" "+this.name+"<br>")
    }
  }
 
var stu1=new student(1,"Pooja Dagar");
var stu2=new student(2,"Rupali Sharma");
stu1.showDetail(); 
stu2.showDetail();
</script>
 
</body>
</html>

Output

1 Pooja Dagar
2 Rupali Sharma

Note: We can re define a class by expression approach. i.e. We can re declare a class. Following code will execute successfully.

<!DOCTYPE html>
<html>
<body>
 
<script>
var student=class 
  {
    constructor(id,name)
    {
      this.id=id;
      this.name=name;
    }
 
showDetail()
    {
  document.writeln(this.id+" "+this.name+"<br>")
    }
  }
 
var stu1=new student(1,"Pooja Dagar");
var stu2=new student(2,"Rupali Sharma");
stu1.showDetail(); 
stu2.showDetail();
 
//Re define the student class
var student=class 
  {
    constructor(id,name)
    {
      this.id=id;
      this.name=name;
    }
 
showDetail()
    {
  document.writeln(this.id+" "+this.name+"<br>")
    }
  }
 
var stu1=new student(1,"Shivanshu");
var stu2=new student(2,"Navdeep");
stu1.showDetail(); 
stu2.showDetail();
</script>
 
</body>
</html>

Output

1 Pooja Dagar
2 Rupali Sharma
1 Shivanshu
2 Navdeep
Please follow and like us:
error








Copyright © 2019 CodesJava DMCA.com Protection Status