JS Classes | Cheat Sheet

byCoding Key -

1. Class

The

class
is a special type of function used for creating multiple objects.

1.1. Constructor Method

The constructor method is a special method of a class for creating and initializing an object of that class.

Syntax:

class MyClass { constructor(property1, property2) { this.property1 = property1; this.property2 = property2; } method1() { ... } method2() { ... } }

1.1.1 Creating a Single Object

Syntax :

class MyClass { constructor(property1, property2) { this.property1 = property1; this.property2 = property2; } method1() { ... } method2() { ... } } let myObject = new MyClass(property1, property2);

Example :

class Person {
constructor(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
displayFullName() {
return this.firstName + " " + this.lastName;
}
}
let person1 = new Person("Virat", "Kohli");
console.log(person1); // Person {...}
JAVASCRIPT
Collapse

1.1.2 Creating Multiple Objects

class Person {
constructor(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
}
let person1 = new Person("Virat", "Kohli");
let person2 = new Person("Sachin", "Tendulkar");
console.log(person1); // Person {...}
console.log(person2); // Person {...}
JAVASCRIPT
Collapse

1.2 Prototype property of a Class

class Person {
constructor(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
displayFullName() {
return this.firstName + " " + this.lastName;
}
}
let person1 = new Person("Virat", "Kohli");
console.log(Person.prototype); // Person {...}
JAVASCRIPT
Collapse

1.3 Prototype of an Instance

The Instance Prototype refers to the prototype object of the constructor function.

class Person {
constructor(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
displayFullName() {
return this.firstName + " " + this.lastName;
}
}
let person1 = new Person("Virat", "Kohli");
console.log(Object.getPrototypeOf(person1)); // Person {...}
JAVASCRIPT
Collapse
Note
The Type of a class is a function

2.Inheritance in JS Classes

The Inheritance is a mechanism by which a class inherits methods and properties from another class.

2.1 Extends

The

extends
keyword is used to inherit the methods and properties of the superclass.

2.2 Super

Calling

super()
makes sure that SuperClass constructor() gets called and initializes the instance.

Syntax :

class SuperClass { } class SubClass extends SuperClass{ constructor(property1, property2){ super(property1); this.property2 = property2; } method1() { } } let myObject = new SubClass(property1, property2);

Here,

SubClass
inherits methods and properties from a
SuperClass
.

2.3 Method Overriding

Here the constructor method is overridden. If we write the

SuperClass
methods in
SubClass
, it is called method overriding.

Syntax :

class SuperClass { } class SubClass extends SuperClass{ constructor(property1, property2){ super(property1); this.property2 = property2; } } let myObject = new SubClass(property1, property2);

Example :

class Animal {
constructor(name) {
this.name = name;
}
eat() {
return `${this.name} is eating`;
}
makeSound() {
return `${this.name} is shouting`;
}
}
class Dog extends Animal {
constructor(name, breed) {
super(name);
this.breed = breed;
}
sniff() {
return `${this.name} is sniffing`;
}
}
class Cat extends Animal {
constructor(name, breed) {
super(name);
this.breed = breed;
}
knead() {
return `${this.name} is kneading`;
}
}
let animal1 = new Animal("gorilla");
let someDog = new Dog("someDog", "German Shepherd");
let persianCat = new Cat("someCat", "Persian Cat");
console.log(animal1); // Animal {...}
console.log(animal1.eat()); // gorilla is eating
console.log(someDog); // Dog {...}
console.log(someDog.eat()); // someDog is eating
console.log(someDog.sniff()); // someDog is sniffing
console.log(persianCat); // Cat {...}
console.log(persianCat.knead()); // someCat is kneading
console.log(persianCat.eat()); // someCat is eating
console.log(persianCat.makeSound()); // someCat is shouting
JAVASCRIPT
Collapse

Try out creating superclass and subclass with multiple objects in the JavaScript Code Playground.


3.
this
 in classes

3.1 Super Class

In class,

this
refers to the instance object.

class Animal {
constructor(name) {
this.name = name;
}
eat() {
return this;
}
makeSound() {
return `${this.name} is shouting!`;
}
}
let animal1 = new Animal("dog");
console.log(animal1.eat()); // Animal {...}
JAVASCRIPT
Collapse

Here

this
refers to the
animal1
.

3.2 Sub Class

class Animal {
constructor(name) {
this.name = name;
}
}
class Dog extends Animal {
constructor(name, breed) {
super(name);
this.breed = breed;
}
sniff() {
return this;
}
}
let dog = new Dog("dog", "german Shepherd");
console.log(dog.sniff()); // Dog {...}
JAVASCRIPT
Collapse

HERE IS THE EXAPMES HOW WE CAN USE CLASES

Submarine

Given two numbers totalTorpedos , torpedosFired as inputs, write a super class Submarine with property and methods as below, Property Description isSubmerged 
It should contain a boolean value to indicate whether the submarine is submerged or not. Method Description dive 
When this method is called, it should set the value of isSubmerged to true and log "Submarine Submerged" text in the console. 
surface When this method is called, it should set the value of isSubmerged to false and log "Submarine Surfaced" text in the console. 

Add a sub class WeaponUnit which extends to Submarine with the below properties and methods,

 Property Description 

torpedos It should contain the totalTorpedos loaded. 
torpedosLaunched It should contain the torpedosFired . 

Method Description 

fireTorpedos When this method is called, it should decrease the totalTorpedos by torpedosFired and log the number of torpedos fired and left, as shown in the sample outputs.


Mobile (Practice Classes with Multiple Prototypes)

You are given an incomplete Mobile class. A Mobile object created using the Mobile class should have the properties like brand , ram , batteryStatus , isCallInProgress , and song . Implement the Mobile class to initialize the mentioned properties and add the following methods,

  • playMusic When this method is executed, it should log a text with the song , as shown in the sample output 
  • stopMusic When this method is executed, it should log "Music Stopped" 
  • fullCharge When this method is executed, If the batteryStatus is 100, it should set the value of batteryStatus to 100 and log "Mobile Fully Charged" If the batteryStatus is already 100, it should log "Mobile Already Fully Charged" 
  • makeCall When this method is executed, It should set the value of isCallInProgress to true It should log "Calling..."
  •  endCall When this method is executed, If isCallInProgress is false, it should log "No Ongoing Call to End" If isCallInProgress is true, it should set the value of isCallInProgress to false and log "Call Ended






....
Tags:

Post a Comment

Please Select Embedded Mode To Show The Comment System.*

Previous Post Next Post
Share to other apps
Copy Post Link

Contact Form