Object-Oriented Programming (OOP) in JavaScript
Object-Oriented Programming (OOP) is a programming paradigm based on the concept of "objects," which can hold data and methods. In JavaScript, OOP can be implemented using both prototypes and the ES6 `class` syntax.
---
#### **Basics of OOP**
1. **Core OOP Principles:**
- **Encapsulation**: Bundling data and methods that operate on the data into a single unit, such as a class or object.
- **Inheritance**: Enabling a class or object to inherit properties and methods from another class or object.
- **Polymorphism**: The ability to redefine methods in derived classes.
2. **OOP in JavaScript:**
- JavaScript is a prototype-based language. Objects inherit from other objects through the prototype chain.
- ES6 introduced `class` syntax, making OOP concepts more intuitive.
---
#### **Core Concepts**
1. **Creating Objects:**
- Using object literals:
```javascript
const car = {
make: "Toyota",
model: "Corolla",
start() {
console.log("Car started");
}
};
car.start();
```
- Using constructors:
```javascript
function Car(make, model) {
this.make = make;
this.model = model;
this.start = function() {
console.log("Car started");
};
}
const myCar = new Car("Honda", "Civic");
myCar.start();
```
2. **Using ES6 Classes:**
- Syntax and structure:
```javascript
class Car {
constructor(make, model) {
this.make = make;
this.model = model;
}
start() {
console.log(`${this.make} ${this.model} started`);
}
}
const myCar = new Car("Ford", "Focus");
myCar.start();
```
3. **Prototype Chain:**
- Sharing methods through the prototype chain:
```javascript
function Animal(name) {
this.name = name;
}
Animal.prototype.speak = function() {
console.log(`${this.name} makes a sound.`);
};
const dog = new Animal("Dog");
dog.speak();
```
4. **Understanding `this`:**
- `this` refers to the object that is calling the method.
- In regular functions, `this` is dynamic and depends on the context.
- In arrow functions, `this` is lexically bound.
---
#### **Advanced Topics**
1. **Inheritance with Prototypes:**
```javascript
function Animal(name) {
this.name = name;
}
Animal.prototype.speak = function() {
console.log(`${this.name} makes a sound.`);
};
function Dog(name, breed) {
Animal.call(this, name);
this.breed = breed;
}
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;
const myDog = new Dog("Rex", "Labrador");
myDog.speak();
```
2. **Encapsulation Using Closures:**
```javascript
function Counter() {
let count = 0;
return {
increment() {
count++;
},
getCount() {
return count;
}
};
}
const myCounter = Counter();
myCounter.increment();
console.log(myCounter.getCount());
```
3. **Static Methods and Properties:**
```javascript
class MathUtils {
static add(a, b) {
return a + b;
}
}
console.log(MathUtils.add(3, 4));
```
---
#### **Practical Projects**
1. **School System Representation:**
- Create classes for `Student`, `Teacher`, and `Course`.
- Use inheritance to share common properties and methods.
```javascript
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
}
class Student extends Person {
constructor(name, age, grade) {
super(name, age);
this.grade = grade;
}
}
class Teacher extends Person {
constructor(name, age, subject) {
super(name, age);
this.subject = subject;
}
}
```
2. **Bank Account Simulation:**
- Implement a `BankAccount` class with deposit and withdrawal methods.
```javascript
class BankAccount {
constructor(owner, balance = 0) {
this.owner = owner;
this.balance = balance;
}
deposit(amount) {
this.balance += amount;
console.log(`Deposited ${amount}. New balance: ${this.balance}`);
}
withdraw(amount) {
if (amount > this.balance) {
console.log("Insufficient funds");
} else {
this.balance -= amount;
console.log(`Withdrew ${amount}. New balance: ${this.balance}`);
}
}
}
const myAccount = new BankAccount("Alice", 1000);
myAccount.deposit(500);
myAccount.withdraw(200);
```
---
This comprehensive overview of OOP in JavaScript demonstrates its capabilities and prepares you for real-world applications. Experiment with the provided examples and projects to reinforce your understanding.
Posted by Mihigo ER Anaja
Posts
Comments
0 Comments