# 📚 JavaScript Tutorial - Part 7/10: Object-Oriented JavaScript & Prototypes
#JavaScript #OOP #Prototypes #Classes #DesignPatterns

Welcome to Part 7 of our JavaScript series! This comprehensive lesson will take you deep into JavaScript's object-oriented programming (OOP) system, prototypes, classes, and design patterns.

---

## 🔹 JavaScript OOP Fundamentals
### 1. Objects in JavaScript
JavaScript objects are dynamic collections of properties with a hidden [[Prototype]] property.

// Object literal (most common)
const person = {
  name: 'Ali',
  age: 25,
  greet() {
    console.log(`Hello, I'm ${this.name}`);
  }
};

// Properties can be added dynamically
person.country = 'UAE';
delete person.age;

### 2. Factory Functions
Functions that create and return objects.

function createPerson(name, age) {
  return {
    name,
    age,
    greet() {
      console.log(`Hi, I'm ${this.name}`);
    }
  };
}

const ali = createPerson('Ali', 25);

### 3. Constructor Functions
The traditional way to create object blueprints.

function Person(name, age) {
  // Instance properties
  this.name = name;
  this.age = age;
  
  // Method (created for each instance)
  this.greet = function() {
    console.log(`Hello, I'm ${this.name}`);
  };
}

const ali = new Person('Ali', 25);

The `new` keyword does:
1. Creates a new empty object
2. Sets this to point to the new object
3. Links the object's prototype to constructor's prototype
4. Returns the object (unless constructor returns something else)

---

## 🔹 Prototypes & Inheritance
### 1. Prototype Chain
Every JavaScript object has a [[Prototype]] link to another object.

// Adding to prototype (shared across instances)
Person.prototype.introduce = function() {
  console.log(`My name is ${this.name}, age ${this.age}`);
};

// Prototype chain lookup
ali.introduce(); // Checks ali → Person.prototype → Object.prototype → null

### 2. Manual Prototype Inheritance

function Student(name, age, grade) {
  Person.call(this, name, age); // "Super" constructor
  this.grade = grade;
}

// Set up prototype chain
Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;

// Add methods
Student.prototype.study = function() {
  console.log(`${this.name} is studying hard!`);
};

### 3. Object.create()
Pure prototypal inheritance.

const personProto = {
  greet() {
    console.log(`Hello from ${this.name}`);
  }
};

const ali = Object.create(personProto);
ali.name = 'Ali';

---

## 🔹 ES6 Classes
Syntactic sugar over prototypes.

### 1. Class Syntax

class Person {
  // Constructor (called with 'new')
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  
  // Instance method
  greet() {
    console.log(`Hello, I'm ${this.name}`);
  }
  
  // Static method
  static compareAges(a, b) {
    return a.age - b.age;
  }
}

### 2. Inheritance with `extends`

class Student extends Person {
  constructor(name, age, grade) {
    super(name, age); // Must call super first
    this.grade = grade;
  }
  
  study() {
    console.log(`${this.name} is studying`);
  }
  
  // Override method
  greet() {
    super.greet(); // Call parent method
    console.log(`I'm in grade ${this.grade}`);
  }
}

### 3. Class Features (ES2022+)

class ModernClass {
  // Public field (instance property)
  publicField = 1;
  
  // Private field (starts with #)
  #privateField = 2;
  
  // Static public field
  static staticField = 3;
  
  // Static private field
  static #staticPrivateField = 4;
  
  // Private method
  #privateMethod() {
    return this.#privateField;
  }
}

---

## 🔹 Property Descriptors
Advanced control over object properties.

### 1. Property Attributes

const obj = {};

Object.defineProperty(obj, 'readOnlyProp', {
  value: 42,
  writable: false,       // Can't be changed
  enumerable: true,      // Shows up in for...in
  configurable: false    // Can't be deleted/reconfigured
});