Lesson Plan
ES6 Classes
Topics
Class Synta
Class constructor and initialization
Hoisting in clas
Getters and setter
Class inheritanc
Method overriding
Static properties and metho
Syntactic sugar over constructor function
Classical inheritance vs prototypical inheritance
JavaScript, though not a purely object-oriented language by design, offers powerful features for building
object-oriented applications. In this module, we will explore some key concepts in JavaScript OOP
Class Syntax
ES6 introduced classes as a more syntactic sugar-like way to define object blueprints. A class encapsulates
data (properties) and behavior (methods) associated with objects.
First, look at the class in javascript
Full Stack Web Development
Class constructor and initialization
The constructor method is a special function called when creating a new object from a class. It's used to
initialize the object's properties.
Example of class constructor -
From the above code examples, In the Meal class, the constructor takes name and type arguments, assigns
them to [Link] and [Link] (properties of the new object), effectively initializing them.
Hoisting in class
Unlike functions, class declarations are not hoisted. You cannot use a class before it's declared.
For example
Getters and setters
Getters and setters are special methods that allow you to control access to and modification of an object's
properties.
For example, let's modify the above Meal class with the help of Getters and Setters
Full Stack Web Development
Class inheritance
Classes can inherit properties and methods from parent classes using the extends keyword. This promotes
code reusability and creates a hierarchy of related objects.
Let’s take a simple example illustration of class inheritance
Full Stack Web Development
Method overriding
In inheritance, a child class can redefine (override) a method inherited from the parent class. This allows for
specialized behavior in child objects.
From the above example, the Animal serves as the parent class, and the Dog is the child class inheriting from
the Animal. We've changed the method name from sayHello to speak to better fit the animal context.
Additionally, the override method in the Dog class now represents a dog's way of speaking.
Static properties and method
Static properties and methods belong to the class itself, not to individual objects. They are accessed using the
class name, not through object instances.
Full Stack Web Development
Syntactic sugar over constructor functions
In inheritance, a child class can redefine (override) a method inherited from the parent class. This allows for
specialized behavior in child objects.
Classes offer a cleaner and more readable syntax compared to traditional constructor functions for defining
object blueprints.
Traditional Constructor Function Approach
Full Stack Web Development
ES6 Class Syntax Approach
Classical inheritance vs prototypical inheritance
Object-oriented programming (OOP) is a powerful paradigm for structuring code. Inheritance, a core concept
in OOP, allows you to create new objects (child objects) based on existing objects (parent objects). However
how inheritance works can differ between programming languages. In JavaScript, we have two main
approaches: classical inheritance and prototypal inheritance.
Let's dive into their key differences:
Full Stack Web Development
