An Interest In:
Web News this Week
- April 19, 2024
- April 18, 2024
- April 17, 2024
- April 16, 2024
- April 15, 2024
- April 14, 2024
- April 13, 2024
Enough JavaScript to get you Started : 13 OOP in JS Practical Guide
Classes and Objects
To summarize previous article , classes are nothing but a template or blue print which decides how object will look and behave with different props/methods.
We're Using OOP concepts because it provides us Encapsulation and Abstraction.
Enough ! Time to open VS code
Start a new project , and go to app.js
Let's make a Speedometer class
Speedometer have properties like speed and type
Speedometer will be having methods like increase and decrease speed
in app.js
class Speedometer { speed = 0; type = "km/h"; constructor(speed, type) { this.speed = speed; this.type = type; } increaseSpeed() { this.speed += 10; } decreaseSpeed() { this.speed -= 10; } getInfo() { console.log(this.speed); console.log(this.type); }}
If we decode our class there are two methods for increasing and decreasing speed of speedometer , and one method for showing information to user.
Constructor is special function called automatically while creating object. we've used it to initialize initial speed and type of object.
As of now class don't consume any resources but when we make objects they will surely occupy resources.
Notice that by convention class names are always written in Pascal case
Notice we haven't typed var
or let
and even function
to specify in class. we don't need to specify that in class
Currently(and even by default) we haven't specified and member access specifiers so our methods and props are accessible inside as well as outside the class.
Making Object
Making Object of respective class simply means creating variable of that class.
we'll use new
keyword to allot resources to new object which we're creating.
The parentheses takes arguments specified in constructor parameters to initialize starter object
in app.js
var speedoMeter = new Speedmeter(0,"km/h");
now speedoMeter
is object of class Speedometer with initial value of speed:0
and type : "km/h"
speedoMeter
can now access props and methods like increase and decrease speed
Go ahead and try calling different methods
object1.getInfo();object1.increaseSpeed();object1.increaseSpeed();object1.getInfo();object1.decreaseSpeed();object1.getInfo();
this will output in console
0km/h20km/h10km/h
What is this
?
this keyword in JavaScript refers to current running object
it's like we're addressing speedoMeter object with this
, so this
refers to the instance which is in execution now.
in speedoMeter object we can say like this
object have intial speed of 0 and type of "km/h"
Notice if in class we want to refer the current running object (which is not there at the moment of creation of class) we'll use this
to access props of current running object.
so if we write like this.speed
it will refer to speedoMeter object which we have created afterwards.
Using member access specifiers
'#' is used to make any property or method of the class private.
Private methods or props are only accessed inside class
Accessing private members outside class will result in error
class Speedometer { #speed = 0; #type = "km/h"; increaseSpeed() { this.#speed += 10; } #decreaseSpeed() { this.#speed -= 10; } getInfo() { console.log(this.#speed); console.log(this.#type); }}
Notice that now if we create object of Speedometer the object can now only access increaseSpeed() and getInfo() because other members are private
console.log(object1.speed) console.log(object1.type) object1.getInfo(); object1.increaseSpeed(); object1.increaseSpeed(); object1.getInfo(); object1.decreaseSpeed(); object1.getInfo();
Inheritance
Inheritance refers to deriving methods and props of parent class or super class to it's child class or sub class.
Inheritance increases code reusability in our code
now , think in terms of animals all animals have name
and color
, so what we can do is rather specifying this properties each and every time in new animal we can make a parent class with all these properties and a greet method which serves purpose of greeting.
Syntax : class SubClass extends ParentClass
that's it now we can use parent class's props and methods in child class
Example
class Animal { color; name; greet() { console.log("hey i'm " + this.name); console.log("my color is " + this.color); }}class Dog extends Animal { constructor(name, color) { super(); this.name = name; this.color = color; }}var dog = new Dog("tommy", "brown");dog.greet();
Output:
hey i'm tommymy color is brown
Notice if we call constructor of sub class it's compulsory to call parent class's constructor regardless of constructor is having params or not.
Using a reserved keyword known as super we can call parent class's constructor like => super(); or super(name,color) [if constructor is having params]
Something looks strange? we are using color
,name
and greet()
inside as well as outside Dog class even though these props and methods wasn't declared in Dog class.
That's how inheritance works, it simple words it will copy all the public and protected methods and props in child class which result in code reusability
Let me know in comment section if you have any doubt or feedback. it's always worth to give time to thriving developer community :)
Keep Coding
Hey , Let' Connect
Original Link: https://dev.to/whoadarshpandya/enough-javascript-to-get-you-started-13-oop-in-js-practical-guide-2ffg
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To