JavaScript's object-oriented behavior is built on the **prototype chain**. When an object is created via a constructor function, all instances inherit shared methods and properties from the constructor’s **.prototype**.

```js
function Animal(name) {
  this.name = name;
}

Animal.prototype.speak = function () {
  console.log(`${this.name} makes a noise.`);
};

const dog = new Animal("Rex");
dog.speak(); // Rex makes a noise.

```

Behind the scenes:
- dog. __ proto __ points to Animal.prototype
- That’s how dog can access speak() even though it’s not directly on the dog object

When you use the new keyword, JavaScript performs these steps:

1. Creates a new empty object
2. Sets its internal [[Prototype]] (i.e., __proto__) to the constructor's .prototype
3. Calls the constructor function with this bound to the new object
4. Returns the new object

```js
const rex = new Animal("Rex");

//equivalent to:

const rex = {};
rex.__proto__ = Animal.prototype;
Animal.call(rex, "Rex");
```

The class syntax introduced in ES6 provides a cleaner, more familiar structure for OOP, but it's just syntactic sugar—the underlying prototype-based inheritance model remains unchanged.

```js
class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}
```

This modern syntax feels more like traditional OOP, but under the hood:

- It still creates a constructor function
- Methods are still placed on the prototype
- Inheritance still uses the prototype chain


OOP in Javascript: Classes, prototypes and constructors

JavaScript’s object-oriented model. How class syntax simplifies, but doesn't replace, prototype-based inheritance. What happens under the hood with prototype, __proto__, and new.

Javascript

OOP in JavaScript

**Object-Oriented Programming** (OOP) is a programming paradigm centered around objects that contain both state (properties) and behavior (methods). The four pillars of OOP are:

- **Encapsulation** (hiding internal state)
- **Abstraction** (simplifying complexity)
- **Inheritance** (reusing code)
- **Polymorphism** (interchangeable behaviors)

In ES6, JavaScript introduced the class keyword, which provides a cleaner syntax for creating constructor functions and working with prototypes. Behind the scenes, class is just syntactic sugar over JavaScript’s prototype system.

```js
class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

const dog = new Animal("Rex");
dog.speak(); // Rex makes a noise.

```

**Encapsulation** means keeping internal state hidden from outside interference. JavaScript supports this via **public and private fields**:

```js
class Car {
  constructor(brand) {
    this.brand = brand; // public by default
  }
}

// Create an instance
const myCar = new Car("Mercedes");

// Access the public property
console.log(myCar.brand); // Mercedes

```

```js
class Car {
  #mileage = 0;

  drive(km) {
    this.#mileage += km;
    console.log(`Drove ${km}km, total: ${this.#mileage}`);
  }
}

const car = new Car();
car.drive(50);           // Drove 50km, total: 50
console.log(car.#mileage); // SyntaxError: Private field

```

**Inheritance** allows a class to extend another class, inheriting its properties and methods.

```js
class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a sound.`);
  }
}

class Dog extends Animal {
  bark() {
    console.log(`${this.name} barks.`);
  }
}

const dog = new Dog("Rex");
dog.speak(); // Rex makes a sound. (inherited from Animal)
dog.bark();  // Rex barks.        (defined in Dog)

```

**Polymorphism** means different classes can be used interchangeably if they share the same interface (i.e., method names).

```js
class Bird {
  speak() {
    console.log("Chirp!");
  }
}

class Cat {
  speak() {
    console.log("Meow!");
  }
}

function animalTalk(animal) {
  animal.speak(); // Works for both Bird and Cat
}

animalTalk(new Bird()); // Chirp!
animalTalk(new Cat());  // Meow!

```

**Abstraction** isn’t directly enforced in JS, but you can use private fields/methods and well-designed APIs to expose only what matters.

```js
class BankAccount {
  #balance = 0;

  deposit(amount) {
    if (amount > 0) this.#balance += amount;
  }

  getBalance() {
    return this.#balance;
  }
}

```



Object-Oriented Programming in JavaScript

The four pillars of OOP: Encapsulation,  Abstraction,  Inheritance,  Polymorphism 

Oop in javascript

OOP in Javascript: Classes, prototypes and constructors

Object-Oriented Programming in JavaScript