Skip to content

Commit 62a4505

Browse files
feat: add classes & inheritance
1 parent a58834a commit 62a4505

File tree

2 files changed

+124
-6
lines changed

2 files changed

+124
-6
lines changed

part6 (Object-Oriented Programming)/05_classes.js

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
/*
2-
🔹 1. What Are Classes in JavaScript?
3-
JavaScript classes are syntactic sugar over the existing prototype-based inheritance. Classes make it easier to structure code using constructors, methods, and inheritance, following familiar OOP patterns like in Java, C++, etc.
2+
INFO: What Are Classes in JavaScript ?
3+
A class in Javascript is a way to create reusable blueprints for creating objects that share the same structure (properties) and behaviour (methods). It makes it easier to create & manage multiple similar objects.
44
*/
5+
56
class Person {
67
constructor(name) {
78
this.age = name;
@@ -20,8 +21,8 @@ class className {
2021
// setup
2122
}
2223

23-
method1() {}
24-
method2() {}
24+
method1() { }
25+
method2() { }
2526
}
2627

2728
class Animal {
@@ -210,8 +211,8 @@ console.log(person);
210211
what is instace: When you create an object using new, like new User(), that object is an instance of the class.
211212
Used to check if an object is an instance of a class or constructor.
212213
*/
213-
class A {}
214-
class B extends A {}
214+
class A { }
215+
class B extends A { }
215216

216217
let b = new B();
217218
console.log(b instanceof B); // true — b is instance of B
Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
/*
2+
INFO: What are classes in JavaScript ?
3+
A class in JavaScript is a way to create reusable blueprints for creating objects that share the same strcture (properties) and behavior (methods). It makes it easier to create and manage multiple similar objects.
4+
*/
5+
6+
// This is blueprint (class) for making "Person" objects
7+
class Person {
8+
constructor(name, age) {
9+
this.name = name;
10+
this.age = age;
11+
}
12+
13+
greet() {
14+
console.log(`Hello, my name is ${this.name}`);
15+
}
16+
};
17+
18+
// creating actual people (objects) from the blueprint
19+
const person1 = new Person("Alice", 25);
20+
const person2 = new Person("Bob", 30);
21+
22+
person1.greet(); // Hello, my name is Alice
23+
24+
/*
25+
1. constructor() is a special method that runs when an object is created.
26+
2. this refers to the new object being created.
27+
3. greet() is method that belongs to the class.
28+
*/
29+
30+
/*
31+
INFO: Inheritance (Extending a Class)
32+
Inheritance allows one class to inherit from another class.
33+
*/
34+
35+
// Example
36+
class User {
37+
constructor(name) {
38+
this.name = name;
39+
}
40+
41+
speak() {
42+
console.log(`${this.name} says hello.`);
43+
}
44+
}
45+
46+
class Developer extends User {
47+
constructor(name, language) {
48+
super(name); // calls the constructor of Person
49+
this.language = language;
50+
}
51+
52+
code() {
53+
console.log(`${this.name} writes code in ${this.language}`);
54+
}
55+
}
56+
57+
const dev = new Developer("Rafay", "JavaScript");
58+
dev.speak(); // Rafay says hello.
59+
dev.code(); // Rafay writes code in JavaScript
60+
61+
/*
62+
INFO: What is static in classes ?
63+
A static method or property belongs to the class itself, not to any object created from it.
64+
*/
65+
66+
// Example
67+
class Car {
68+
constructor(model) {
69+
this.model = model;
70+
}
71+
72+
static company() {
73+
return "Toyota";
74+
}
75+
}
76+
77+
const myCar = new Car("BMW");
78+
79+
console.log(Car.company()); // Toyota
80+
console.log(myCar.company()); // Error: myCar.company is not a function
81+
82+
83+
// INFO: get and set (Getters & Setters)
84+
85+
/*
86+
INFO: What is getter ?
87+
A getter allows you to access a property like a variable, but it actually runs a fucntion behind the scenes.
88+
*/
89+
90+
/*
91+
INFO: What is setter ?
92+
A setter allows you to control how a property is set (add validation, logs, etc.)
93+
*/
94+
95+
class Employee {
96+
constructor(name) {
97+
this.name = name;
98+
}
99+
100+
get name() {
101+
return this._name.toUpperCase();
102+
}
103+
104+
set name(value) {
105+
if (value.length < 3) {
106+
console.log("Name is too short!");
107+
return;
108+
}
109+
this._name = value;
110+
}
111+
}
112+
113+
const emp = new Employee("rafay");
114+
console.log(emp.name); // RAFAY
115+
116+
117+

0 commit comments

Comments
 (0)