Obiekty

Obiekty w JavaScript to po prostu zbiory danych i funkcji, które są ze sobą powiązane w jedną całość. Możesz myśleć o obiekcie jak o pudełku, które przechowuje różne rzeczy – niektóre z tych rzeczy mogą być proste wartości (takie jak liczby, ciągi tekstowe), a inne mogą być funkcjami, które coś robią (np. obliczają coś, pokazują dane).

Elementy przechowywane w obiekcie nazywamy właściwościami (dla wartości) lub metodami (dla funkcji). Dostęp do nich uzyskujemy poprzez nazwę obiektu, a następnie – poprzez kropkę lub nawiasy kwadratowe – nazwę właściwości lub metody, którą chcemy wykorzystać.

Ważną cechą obiektów w JavaScript jest ich mutowalność, co oznacza możliwość modyfikacji ich właściwości i metod po ich utworzeniu.

Tworzenie obiektów

Literał obiektu

Najprostszy i najczęściej używany sposób na tworzenie obiektów. Polega na zapisaniu obiektu wprost w kodzie, używając nawiasów klamrowych {} i definiując w nich właściwości oraz metody.

const person = {
  firstName: "John",
  lastName: "Doe",
  sayHello: function() {
    console.log("Hello, " + this.firstName + " " + this.lastName);
  }
};

Konstruktory

Możesz zdefiniować własną funkcję konstruktora, a następnie użyć słowa kluczowego new, aby stworzyć instancje obiektu. Konstruktory są przydatne, gdy planujesz tworzyć wiele podobnych obiektów.

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
  this.sayHello = function() {
    console.log("Hello, " + this.firstName + " " + this.lastName);
  };
}

const person1 = new Person("John", "Doe");

Object.create()

Metoda Object.create() pozwala tworzyć obiekty z określonym prototypem. Jest to zaawansowana technika, która umożliwia bardziej skomplikowane hierarchie dziedziczenia.

const personPrototype = {
  sayHello: function() {
    console.log("Hello, " + this.firstName + " " + this.lastName);
  }
};

const person = Object.create(personPrototype);
person.firstName = "John";
person.lastName = "Doe";

Klasy

ES6 wprowadziło klasy jako elegancką składnię ułatwiającą pracę z prototypowym modelem dziedziczenia w JavaScript. Klasy oferują bardziej klarowny i zorganizowany sposób na definicję konstruktorów obiektów oraz ich metod.

class Person {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }

  sayHello() {
    console.log(`Hello, ${this.firstName} ${this.lastName}`);
  }
}

const person = new Person("John", "Doe");

Prototyp

Każdy obiekt w JavaScript posiada prototyp, czyli inny obiekt, z którego „dziedziczy” właściwości i metody. Można to porównać do dziedziczenia cech w rodzinie, gdzie prototypy to „rodzice”, a obiekty to „dzieci”.

Jak to działa?

Tworzenie obiektu

Kiedy tworzysz obiekt za pomocą literału obiektowego {}, jego prototypem jest Object.prototype. Oznacza to, że odziedziczył on wszystkie metody zdefiniowane w Object.prototype, takie jak hasOwnProperty, toString itp.

const myObj = {name: "Alice"};
console.log(myObj.hasOwnProperty('name')); // true
console.log(myObj.hasOwnProperty('toString')); // false
console.log(myObj.toString()); //'[object Object]'

Prototypy wbudowane:

Nie tylko zwykłe obiekty mają prototypy. Wbudowane typy, takie jak Array czy String, również mają swoje prototypy, dzięki czemu wszystkie tablice mogą korzystać z metod takich jak push, pop dla Array lub toUpperCase, toLowerCase dla String.

const myArray = [1, 2, 3];
myArray.push(4); // Działa dzięki Array.prototype.push

const myString = "hello";
console.log(myString.toUpperCase()); // "HELLO", dzięki String.prototype.toUpperCase

Tworzenie własnych prototypów:

Możesz również tworzyć własne „rodziny” obiektów, definiując funkcje konstruktora i dodając metody do jego prototypu. To sprawia, że wszystkie obiekty stworzone za pomocą tego konstruktora będą miały dostęp do tych metod.

function Person(name) {
  this.name = name;
}

Person.prototype.sayName = function() {
  console.log(`My name is ${this.name}`);
};

const alice = new Person("Alice");
alice.sayName(); // My name is Alice