Obiekty JavaScript

Wprowadzenie do obiektów w JavaScript

Obiekty w JavaScript to podstawowa konstrukcja języka, która pozwala na przechowywanie i manipulowanie danymi. Obiekty w JavaScript są podobne do klasycznych obiektów programistycznych, takich jak obiekty w innych językach obiektowych (np. Java), ale mają kilka unikalnych cech.

W JavaScript obiekty są traktowane jako zbiory par klucz-wartość, zwane właściwościami obiektu. Obiekty mogą zawierać też metody, czyli funkcje, które są związane z obiektem i umożliwiają wykonywanie różnych operacji na tym konkretnym obiekcie.

Tworzenie obiektów

W języku JavaScript istnieją różne sposoby tworzenia obiektów. Jednym z nich jest użycie konstruktora (dla obiektów takich jak Object lub Array), który ma za zadanie utworzyć nowy obiekt, innym sposobem jest użycie literału obiektu, czyli notacji klamerki, dzięki temu możesz utworzyć nowy obiekt za pomocą jednej linii kodu.

Aby stworzyć nowy obiekt w języku JavaScript możesz również użyć metody Object.create() i utworzyć nowy obiekt z prototypem innego obiektu.

Konstruktory – szablon nowego obiektu

Konstruktory w JavaScript to funkcje, które służą do tworzenia nowych egzemplarzy obiektów. Są one nazywane „konstruktorami”, ponieważ są swego rodzaju szablonem konstrukcyjnym do „budowania” nowych obiektów przy pomocy operatora new.

Aby utworzyć konstruktor, wystarczy napisać funkcję o dowolnej nazwie, np. MyConstructor, i użyć słowa kluczowego this wewnątrz tej funkcji do odwołania się do nowego obiektu, który zostanie utworzony za pomocą tego konstruktora. Możesz również przekazać argumenty do konstruktora, aby móc ustalić początkowe wartości właściwości nowego obiektu.

Obiekty JavaScript – przykład konstruktora dla obiektu Person

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

Operator new – budowa obiektów z konstruktora

Operator new w języku JavaScript służy do tworzenia nowych egzemplarzy obiektów (instancji), które są tworzone na podstawie konstruktora.

Kiedy wywołasz operator new przed nazwą konstruktora obiektu, zostanie utworzony nowy obiekt i przypisane do niego this. Następnie konstruktor zostanie wywołany z argumentami podanymi w nawiasach po nazwie konstruktora. Wewnątrz konstruktora możesz użyć słowa kluczowego this do odwołania się do tego nowego obiektu i ustawić jego właściwości lub wywołać jego metody.

Przykład użycia operatora new:

const person = new Person('Piotr', 27);
console.log(person.name); // 'Piotr'
console.log(person.age); // 27

Literały – dosłowne tworzenie obiektu w JavaScript

Jak wspominałem wcześniej w JavaScript istnieją różne sposoby tworzenia obiektów. Jeśli chcesz utworzyć nowy obiekt to możesz użyć konstruktora, lub możesz też użyć literału obiektu, czyli notacji klamerki, aby utworzyć obiekt za pomocą jednej linii kodu.

Literały obiektów w JavaScript to zapisy obiektów z użyciem notacji {}. Można je używać, aby szybko stworzyć nowy obiekt z określonymi właściwościami i wartościami.

Pamiętaj, że pisząc kod w JavaScript możesz użyć literału obiektu, aby szybko stworzyć prosty obiekt bez potrzeby tworzenia konstruktora.

Oto przykład użycia literału obiektu w JavaScript:

const person = {
  name: 'Piotr',
  age: 27
};

console.log(person.name); // wyświetli "Piotr"
console.log(person.age); // wyświetli 27

Właściwości obiektów

W JavaScript właściwości obiektu to zmienne przypisane do obiektu, które służą do przechowywania danych lub funkcji specjalnych zwanych metodami. Właściwości obiektu są podobne do zmiennych, ale są przypisane do konkretnego obiektu, a nie do całego skryptu lub funkcji.

Jeśli chcesz utworzyć nową lub zmienić istniejącą właściwość obiektu, możesz to zrobić odwołując się do obiektu (przez zmienną) oraz przy pomocy operatora . (kropka) odwołać się do istniejącej lub nie istniejącej (nowej) właściwości, a następnie przypisać do niej wartość za pomocą operatora przypisania (=).

Oto przykład dodania nowej właściwości do istniejącego obiektu:

const person = {
  name: 'Piotr', // właściwość name
  age: 27 // właściwość age
};

person.canProgram = true; // nowa właściwość

console.log(person.canProgram); // true

Metody obiektów w JavaScript

Metody obiektów to funkcje, które są integralną częścią obiektów w języku JavaScript. Można je używać do wykonywania różnych operacji na obiektach, takich jak odczytywanie i zmiana ich właściwości, wywoływanie innych metod itp.

Aby dodać metodę do obiektu, należy przypisać ją jako właściwość obiektu i określić jej ciało jako funkcję. Na przykład:

const obj = {
  name: 'Piotr',
  greet: function() {
    console.log(`Jak się masz ${this.name}?`);
  }
};

obj.greet(); // wyświetli "Jak się masz Piotr"

Tworzenie metod przy pomocy skróconej składni

Tworząc nowe metody w obiekcie można również użyć składni „skróconej nazwy”, która pozwala zdefiniować metodę bez użycia słowa kluczowego function.

const obj = {
  name: 'Piotr',
  greet() {
    console.log(`Jak się masz ${this.name}?`);
  }
};

obj.greet(); // wyświetli "Jak się masz Piotr"

Słowo kluczowe this

this w JavaScript jest słowem kluczowym, które odwołuje się do obiektu, w kontekście którego zostało wywołane. Może to być obiekt globalny, obiekt funkcji lub nowo utworzony obiekt.

W zależności od tego, w jakim kontekście jest używane, this może mieć różne wartości. Oto kilka przykładów:

// Kontekst globalny
console.log(this); // odwołuje się do obiektu window lub global

const person = {
  name: 'Piotr',
  age: 27,
  greet: function() {
    console.log(`Witaj ${this.name}`);
  }
};

// Kontekst obiektu
person.greet(); // wyświetli "Witaj Piotr"

const greet = person.greet;

// Kontekst funkcji globalnej
greet(); // wyświetli "Witaj undefined"

Prototypy obiektów – dziedziczenie prototypowe w JavaScript

Dziedziczenie prototypowe to mechanizm w JavaScript, który umożliwia obiektom dziedziczenie właściwości i metod innych obiektów. Każdy obiekt w JavaScript ma swój prototyp, który jest innym obiektem, z którego może dziedziczyć właściwości i metody.

Jeśli obiekt nie ma wymaganej właściwości lub metody, to sprawdza swój prototyp, a następnie prototyp swojego prototypu itd., aż znajdzie odpowiednią właściwość lub metodę lub dojdzie do końca łańcucha prototypów.

Przykład dziedziczenia prototypowego:

const animal = {
  hasFur: true,
  makeSound() {
    console.log('Some generic animal sound');
  }
};

const dog = {
  isDomestic: true,
  makeSound() {
    console.log('Woof!');
  }
};

// Ustaw prototyp obiektu dog jako obiekt animal
Object.setPrototypeOf(dog, animal);

console.log(dog.hasFur); // true
console.log(dog.isDomestic); // true
dog.makeSound(); // 'Woof!'

W powyższym przykładzie obiekt dog dziedziczy właściwość hasFur z obiektu animal, a także ma swoją własną właściwość isDomestic. Ponadto, obiekt dog nadpisuje metodę makeSound() z obiektu animal, ale wciąż może uzyskać dostęp do oryginalnej metody poprzez swój prototyp.

Obiekty wbudowane w JavaScript

JavaScript posiada kilka specjalnych obiektów, które są szczególnie przydatne w różnych sytuacjach.

Obiekty wbudowane (ang. built-in objects) to obiekty predefiniowane w języku JavaScript, które są dostępne od razu po załadowaniu skryptu. Są to obiekty, które służą do różnych celów, takich jak praca z tablicami, ciągami tekstowymi, datami, funkcjami itp.

Niektóre przykłady obiektów wbudowanych w JavaScript to:

• Obiekt „Math” – służy do wykonywania różnych matematycznych obliczeń, takich jak obliczanie wartości pi, pierwiastka kwadratowego, sinusa itp.
• Obiekt „Date” – służy do pracy z datami i godzinami. Pozwala na tworzenie nowych obiektów daty, odczytywanie i zmienianie ich wartości, porównywanie dat itp.
• Obiekt „Array” – służy do tworzenia i manipulowania tablicami. Pozwala na dodawanie i usuwanie elementów z tablicy, sortowanie elementów itp.
• Obiekt „String” – służy do pracy z ciągami tekstowymi. Pozwala na tworzenie nowych obiektów ciągu tekstowego, odczytywanie i zmienianie ich wartości, porównywanie ciągów tekstowych itp.

Przykład użycia obiektu Date w JavaScript

const date = new Date();
console.log(date); // wyświetli aktualną datę i godzinę
console.log(date.getFullYear()); Wyświetli aktualny rok

Obiekty JavaScript – podsumowanie

Jak wspomniano na początku obiekty w języku JavaScript to podstawowa konstrukcja języka, która pozwala na przechowywanie i manipulowanie danymi. Możesz tworzyć obiekty za pomocą konstruktorów, literałów obiektów lub metody Object.create(), a także przypisywać im właściwości i metody. Prototypy pozwalają na dziedziczenie właściwości i metod między obiektami, natomiast specjalne obiekty, takie jak null, undefined, Math i Date, są przydatne w różnych sytuacjach.