Skip to content

Instantly share code, notes, and snippets.

@apal21
Last active November 15, 2022 04:14
Embed
What would you like to do?
Example for blog to show the difference between ES5 and ES6 javascript classes using inheritance and prototypes use cases.

Javascript Class: Difference between ES5 and ES6 Classes

Example for blog to show the difference between ES5 and ES6 javascript classes using inheritance and prototypes use cases.

Example contains a base class Person and two sub classes Teacher and Student which extend the base class.

Blog url: https://gosink.in/javascript-class-difference-between-es5-and-es6-classes/

'use strict';
/**
* Person class.
*
* @constructor
* @param {String} name - name of a person.
* @param {Number} age - age of a person.
* @param {String} gender - gender of a person.
*/
function Person(name, age, gender) {
this.name = name;
this.age = age;
this.gender = gender;
}
Person.prototype.getName = function() {
return this.name;
};
Person.prototype.getAge = function() {
return this.age;
};
Person.prototype.getGender = function() {
return this.gender;
};
/**
* Teacher class.
*
* @constructor
* @param {String} name - name of a teacher.
* @param {Number} age - age of a teacher.
* @param {String} gender - gender of a teacher.
* @param {String} subject - subject of a teacher.
*/
function Teacher(name, age, gender, subject) {
Person.call(this, name, age, gender);
this.subject = subject;
}
Teacher.prototype = Object.create(Person.prototype);
Teacher.prototype.constructor = Teacher;
Teacher.prototype.getSubject = function() {
return this.subject;
};
/**
* Student class.
*
* @constructor
* @param {String} name - name of a student.
* @param {Number} age - age of a student.
* @param {String} gender - gender of a student.
* @param {Number} marks - marks of a student.
*/
function Student(name, age, gender, marks) {
Person.call(this, name, age, gender);
this.marks = marks;
}
Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;
Student.prototype.getMarks = function() {
return this.marks;
};
const teacher = new Teacher('John Doe', 30, 'male', 'Maths');
const student = new Student('Jane Miles', 12, 'female', 88);
console.log(
'Teacher:',
teacher.getName(),
teacher.getAge(),
teacher.getGender(),
teacher.getSubject(),
);
console.log(
'Student:',
student.getName(),
student.getAge(),
student.getGender(),
student.getMarks(),
);
'use strict';
/**
* Person class.
*
* @constructor
* @param {String} name - name of a person.
* @param {Number} age - age of a person.
* @param {String} gender - gender of a person.
*/
class Person {
constructor(name, age, gender) {
this.name = name;
this.age = age;
this.gender = gender;
}
getName() {
return this.name;
}
getAge() {
return this.age;
}
getGender() {
return this.gender;
}
}
/**
* Teacher class.
*
* @constructor
* @param {String} name - name of a teacher.
* @param {Number} age - age of a teacher.
* @param {String} gender - gender of a teacher.
* @param {String} subject - subject of a teacher.
*/
class Teacher extends Person {
constructor(name, age, gender, subject) {
super(name, age, gender);
this.subject = subject;
}
getSubject() {
return this.subject;
}
}
/**
* Student class.
*
* @constructor
* @param {String} name - name of a student.
* @param {Number} age - age of a student.
* @param {String} gender - gender of a student.
* @param {Number} marks - marks of a student.
*/
class Student extends Person {
constructor(name, age, gender, marks) {
super(name, age, gender);
this.marks = marks;
}
getMarks() {
return this.marks;
}
}
const teacher = new Teacher('John Doe', 30, 'male', 'Maths');
const student = new Student('Jane Miles', 12, 'female', 88);
console.log(
'Teacher:',
teacher.getName(),
teacher.getAge(),
teacher.getGender(),
teacher.getSubject(),
);
console.log(
'Student:',
student.getName(),
student.getAge(),
student.getGender(),
student.getMarks(),
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment