Programarea orientată pe obiect în JavaScript- Curs Javascript

Programarea Orientată pe Obiect în JavaScript

Literalii de obiect și limitările lor

În JavaScript, poți crea obiecte rapid folosind sintaxa literală:

const persoana = {
  nume: "Ioan",
  salut() {
    return `Salut, ${this.nume}!`;
  }
};
console.log(persoana.salut()); // Salut, Ioan!

Limitări: - Nu poți crea mai multe instanțe ușor - Nu ai moștenire între obiecte - Nu e scalabil pentru aplicații mari

Exemplu Live: Obiect literal

  const persoana = {
    nume: "Ioan",
    salut() {
      return `Salut, ${this.nume}!`;
    }
  };

  function salutLiteral() {
    document.getElementById("output1").textContent = persoana.salut();
  }

Funcții constructor

O funcție constructor este o funcție specială folosită pentru a crea mai multe obiecte de același tip.

function Persoana(nume) {
  this.nume = nume;
  this.salut = function () {
    return `Salut, ${this.nume}!`;
  };
}
const ioan = new Persoana("Ioan");
console.log(ioan.salut()); // Salut, Ioan!

Exemplu Live: Funcție constructor

  function Persoana(nume) {
    this.nume = nume;
    this.salut = function () {
      return `Salut, ${this.nume}!`;
    };
  }

  function creeazaPersoana() {
    const nume = document.getElementById("numeInput").value;
    const p = new Persoana(nume);
    document.getElementById("output2").textContent = p.salut();
  }

Prototipuri și moștenire

JavaScript folosește moștenirea bazată pe prototipuri. Poți adăuga metode pe prototipul constructorului:

Persoana.prototype.laRevedere = function () {
  return `La revedere, ${this.nume}!`;
};
console.log(ioan.laRevedere()); // La revedere, Ioan!

Exemplu Live: Metodă din prototip

  Persoana.prototype.laRevedere = function () {
    return `La revedere, ${this.nume}!`;
  };

  const ioan = new Persoana("Ioan");

  function laRevedere() {
    document.getElementById("output3").textContent = ioan.laRevedere();
  }

Metoda Object.create

Object.create() permite crearea unui obiect care moștenește de la altul.

const animal = {
  vorbeste() {
    return "Sunet generic";
  }
};
const caine = Object.create(animal);
caine.vorbeste = function () {
  return "Ham ham!";
};
console.log(caine.vorbeste()); // Ham ham!

Exemplu Live: Object.create

  const animal = {
    vorbeste() {
      return "Sunet generic";
    }
  };

  const caine = Object.create(animal);
  caine.vorbeste = function () {
    return "Ham ham!";
  };

  function vorbesteCaine() {
    document.getElementById("output4").textContent = caine.vorbeste();
  }

Clase ES6

ES6 introduce sintaxa class, care face codul mai clar și mai apropiat de alte limbaje OOP.

class Persoana {
  constructor(nume) {
    this.nume = nume;
  }
  salut() {
    return `Salut, ${this.nume}!`;
  }
}
const ioan = new Persoana("Ioan");
console.log(ioan.salut()); // Salut, Ioan!

Exemplu Live: Clasă ES6

  class PersoanaClasa {
    constructor(nume) {
      this.nume = nume;
    }
    salut() {
      return `Salut, ${this.nume}!`;
    }
  }

  function salutClasa() {
    const p = new PersoanaClasa("Ioan");
    document.getElementById("output5").textContent = p.salut();
  }

Metode statice și Getters/Setters

Metodele statice aparțin clasei, nu instanței. Getters și setters controlează accesul la proprietăți.

class Calculator {
  static aduna(a, b) {
    return a + b;
  }
}
console.log(Calculator.aduna(2, 3)); // 5

class Cont {
  constructor(sold) {
    this._sold = sold;
  }
  get sold() {
    return this._sold;
  }
  set sold(val) {
    if (val >= 0) this._sold = val;
  }
}
const cont = new Cont(100);
cont.sold = 150;
console.log(cont.sold); // 150

Exemplu Live: Calculator și Cont

Actualizează soldul

Încapsulare și câmpuri private

ES2022 introduce câmpuri private cu #, accesibile doar din interiorul clasei.

class ContSecret {
  #parola = "1234";
  verificaParola(input) {
    return input === this.#parola;
  }
}
const cont = new ContSecret();
console.log(cont.verificaParola("1234")); // true
console.log(cont.#parola); // ❌ eroare: proprietate privată

Exemplu Live: Verificare parolă

  class ContSecret {
    #parola = "1234";
    verificaParola(input) {
      return input === this.#parola;
    }
  }

  const contSecret = new ContSecret();

  function verifica() {
    const input = document.getElementById("parolaInput").value;
    const rezultat = contSecret.verificaParola(input);
    document.getElementById("output8").textContent = rezultat ? "✅ Parolă corectă" : "❌ Parolă greșită";
  }