Constructor functions and ES6 class syntax
In JavaScript programming, there are two popular methods to create a class object with class properties and class methods. The class constructor function was introduced before ES6 script and first launched in ECMAScript 6 in ES6 class syntax.
Both of the above methods provide JavaScript programmers with the class object creation and class instantiate element creation features, while here JavaScript programmers use ES6 class syntax which is a modern and advanced method, it also has features like class inheritance features and subclass method definition from parent class. Which applies object-oriented programming (OOP) fundamental concepts in JavaScript language.
So let’s analyse both the methods in JavaScript.
Constructor Function Before ES6 JavaScript Class.
Before ES6 script in JavaScript, constructor functions were the popular methods to create re-usable class objects in the program. In JavaScript, the class constructor function is treated as a general function. It is used to create class objects and initialize them in the program.
Syntax of JavaScript Class.
function employee(emp_name, emp_age) {
this.emp_name = emp_name;
this.emp_age = emp_age;
// let create a Method inside the constructor function
this.display = function() {
console.log(`welcome, employee ${this.emp_name} and employee age ${this.emp_age} year old.`);
};
}
Class object creation example using constructor function.
// let Create a new instance of employee class use with the ‘new’ keyword
let employee1 = new employee(“Harry”, 40);
employee1.display(); // Result – welcome, employee Harry and employee age 40 year old.
Explanation of created class.
In the above class, the Employee constructor function initializes the EmployeeName and EmployeeAge class properties for the object. Whereas the display class method is created inside the constructor function, and these are accessed in the class instance.
ES6 Class Syntax in JavaScript Programming.
The class syntax in JavaScript ES6 script was first introduced in 2015 as a better and advanced method of class and class object creation for JavaScript beginner programmers. It simplifies and improves the class inheritance, class method definition, and class object creation process for programmers.
Syntax of ES6 Class.
class employee {
constructor(emp_name, emp_age) {
this.emp_name = emp_name;
this.emp_age = emp_age;
}
// let create a class Method defined inside the class
display() {
console.log(`welcome, employee name is ${this.emp_name} and employee age is ${this.emp_age} year old.`);
}
}
Example of object creation using ES6 class syntax.
// let Create a new instance of employee use with the ‘new’ keyword
let employees = new employee(“Bhavishi”, 20);
employees.display(); // Result – welcome, employee name is Bhavishi and employee age is 20 year old.
Explanation of ES6 Class syntax.
Here ES6 script is a constructor method to initialize employee name and employee age class properties in Employee class. Here display() method is defined inside the class, and is available in class instance created from existing class.
Main differences between constructor functions and ES6 classes in JavaScript programming.
Declaration syntax of a class.
Constructor functions in a class program apply the function keyword to the class declaration, and rely on the this keyword to define class properties and methods.
Newer ES6 scripts in JavaScript use the class keyword to declare classes, which provides a clearer and more detailed structured syntax for creating modern and advanced classes and methods.
Class methods and definitions.
Constructor functions in a class explicitly define class methods and rely on the this object inside the function, which can sometimes be inefficient for classes, as each class instance has its own methods.
While in modern ES6 script classes methods are defined directly in the class body, and are automatically processed in the class prototype in an order that means all class instances share the same methods.
Class prototype and inheritance.
Old class constructor functions relied completely on the prototype chain for class inheritance. Where as in order to add methods or properties to all class instances in a constructor function, they must be added to the class prototype in an explicit order.
Whereas in ES6 script classes, class methods are automatically added to the class prototype, making it easier to process and manage class inheritance in an explicit order.
The new keyword in a class.
Both constructor functions and ES6 script classes require the new keyword when creating a class instance. A regular function without the new keyword will not perform well, and will not return an object to the current program, and declaring a class constructor will generate errors in the program.
Example of class constructor function and ES6 class comparison in JavaScript.
Javascript class constructor function before an ES6 script.
function course(course_name, course_price) {
this.course_name = course_name;
this.course_price = course_price;
}
course.prototype.price = function() {
console.log(`${this.course_name} you select.`);
};
let c_detail = new course(“Javascript”, “thousand”);
c_detail.price(); // Result – Javascript you select.
ES6 Script Class Methods in JavaScript.
class course {
constructor(course_name, course_price) {
this.course_name = course_name;
this.course_price = course_price;
}
price() {
console.log(`${this.course_name} you select.`);
}
}
let c_detail = new course(“javascript”, “thousand”);
c_detail.price(); // Result – javascript you select.
Explanation of class constructor function and ES6 class.
Both the above program examples work like the same class function, whereas here ES6 script class function syntax is a clearer and more declarative structured class syntax method. Which automatically manages the class prototype inheritance properties in order in the existing program, due to which the program source code becomes completely detailed and structured.
Inheritance Example with Constructor Function vs ES6 Classes in JavaScript.
Inheritance with Constructor Function in JavaScript Program Before ES6 Script.
function employee(emp_name) {
this.emp_name = emp_name;
}
employee.prototype.info = function() {
console.log(`${this.emp_name} is a female employee.`);
};
function detail(name, id) {
employee.call(this, name); // it used to Call the parent constructor
this.id = id;
}
detail.prototype = Object.create(employee.prototype); // let create some Inherit attributes from employee class
detail.prototype.constructor = detail;
detail.prototype.info1 = function() {
console.log(`${this.emp_name} is a web developer.`);
};
let emp_Info = new detail(“siddhi”, “designer”);
emp_Info.info(); // Result – siddhi is a female employee.
emp_Info.info1(); // Result – siddhi is a web developer.
Inheritance with classes from JavaScript ES6 script.
class Employee {
constructor(emp_name) {
this.emp_name = emp_name;
}
info() {
console.log(`${this.emp_name} is a female employee.`);
}
}
class emp_info extends Employee { // let it used to Inherit from employee class
constructor(name, id) {
super(name); // let it used to Call the parent class constructor
this.id = id;
}
info1() {
console.log(`${this.emp_name} is a web developer.`);
}
}
let disp_info = new emp_info(“Bhavishi”, “designer”);
disp_info.info(); // Result – Bhavishi is a female employee.
disp_info.info1(); // Result – Bhavishi is a web developer.
Explanation of Inheritance with Constructor Function vs ES6 Classes.
- Constructor Function Inheritance – In this program, the detail constructor uses the employee.call(this, emp_name) function to call the parent constructor. Also, Object.create(employee.prototype) is used to add the class prototype chain between the detail and employee classes.
- ES6 Script Class Inheritance – Here we use extends keyword to make emp_info class inherit from employee class and call super(name) as parent constructor.
Summary Differences between class constructor function and ES6 class
| Feature of both | Javascript Constructor Functions (before-ES6) | Javascript ES6 Classes method |
| Syntax | Used to declare traditional function Constructor() {…} method | Declare with modern class ClassName {…} syntax |
| Class Method Definitions | You can Defined inside constructor or prototype | You can Defined inside the class body |
| Class Inheritance | You can Use Object.create() and call() method | You can Use extends and super keyword |
| Class Prototypes | Here you need to explicitly manipulate the class prototype | Here it Automatically handled another class prototype |
| Ease of class Use | It is treated as More verbose and less readable | It treats as Cleaner and more concise syntax for class |
| Class Methods on Prototype | It uses Explicitly added to prototype in class | It Automatically added to the class’s prototype attributes |
Class Constructor and ES6 Class Inheritance in JavaScript.
Class constructor functions are still usable and valid in current JavaScript and they are accessed and used globally, especially in old JavaScript program source code. Whereas, class constructor functions are explained in more detailed order and prototypes for class inheritance and class method definition in these class constructor functions have to be accessed and managed in manual order.
In modern JavaScript programming, ES6 Script JavaScript classes provide an advanced, clear and more structured method to create objects and manage and control class inheritance attributes. Which makes it the first choice for new programmers and developers for new modern JavaScript development projects.
