Obiekt - Object

Obiekt - Object

JavaScript bazuje na paradygmacie obiektów i prototypów. Obiekt to zbiór właściwości i metod, do których dostęp uzyskuje się przez ich nazwę. Obiekty możemy tworzyć na kilka sposobów. Jednym z nich jest wykorzystanie literału {właściwość, właściwość, ...} .

Przykład 1

const book = {
  name: 'Alice in Wonderland',
  author: 'Lewis Carroll',
  year: 1910
};

Aby uzyskać dostęp do właściwości, możemy wykorzystać zapis obiekt.właściwość .

Przykład 2

const book = {
  name: 'Alice in Wonderland',
  author: 'Lewis Carroll',
  year: 1910
};
console.log(book.name);

Dostęp do właściwości można uzyskać także przez zapis z nawiasami kwadratowymi, w których przekazujemy żądaną właściwość.

Przykład 3

const book = {
  name: 'Alice in Wonderland',
  author: 'Lewis Carroll',
  year: 1910
};
console.log(book['name']);

W podobny sposób możemy przypisywać nowe właściwości.

Przykład 4

const book = {
  name: 'Alice in Wonderland',
  author: 'Lewis Carroll',
  year: 1910
};
book.name = 'The Hunting of the Snark';
book.year = '1876';
console.log(book['name'], book.year);

Dostęp do wszystkich kluczy w obiekcie możesz uzyskać dzięki metodzie wbudowanej w obiekt Object.keys.

Przykład 5

const book = {
  name: 'Alice in Wonderland',
  author: 'Lewis Carroll',
  year: 1910
};
Object.keys(book);

Metody w obiektach osadzamy analogicznie do właściwości. Przy czym jako wartość przekazujemy funkcję.

Przykład 6

const book = {
  name: 'Alice in Wonderland',
  author: 'Lewis Carroll',
  year: 1910,
  getAuthor: function() {
      return this.author;
  }
};

Metody wywołujemy podobnie jak funkcje.

Przykład 7

const book = {
  name: 'Alice in Wonderland',
  author: 'Lewis Carroll',
  year: 1910,
  getAuthor: function() {
      return this.author;
  }
};
console.log(book.getAuthor()); // Lewis Carroll

Słowo kluczowe this w powyższym przykładzie odwołuje się do kontekstu wywołania. Kontekstem dla użycia this w metodzie getAuthor jest obiekt. Zatem z poziomu this mamy dostęp przez referencje do właściwości obiektu.

Obiekty mogą posiadać gettery i settery. Są to specjalne metody, które wywołujemy jak właściwości. Służą do ukrycia dostępu i sposobu implementacji właściwości zgodnie z zasadą hermetyzacji obiektu. Przyjmuje się, że ukryta właściwość, która przechowuje wartość zaczyna się od znaku podkreślenia (underscore) _ co jest informacją dla innych programistów, że nie powinni jej modyfikować bezpośrednio.

W momencie pisania kursu trwają prace nad ustandaryzowanym dodaniem pełnoprawnych pól prywatnych, dzięki któremu odpowiednio oznaczone właściwości nie będą jawnie dostępne.

Przykład 8

const book = {
  name: 'Alice in Wonderland',
  _author: 'Lewis Carroll',
  year: 1910,
  get author() {
      return this._author;
  },
  set author(val) {
      this._author = val;
  }
};
book.author = 'Henry Holiday';
console.log(book.author); // Henry Holiday

Gettery i settery bywają bardzo przydatne gdy chcemy się upewnić, że przy ustawianiu lub wyciąganiu wartości zachodzą pewne dodatkowe warunki. Możemy np. sprawdzać czy cena produktu jest dodatnia i wyświetlić błąd gdy przy ustawianiu

Właściwości mogą być usunięte przy pomocy słowa kluczowego delete, po którym przekazujemy pole do usunięcia.

Przykład 9

const book = {
  name: 'Alice in Wonderland',
  author: 'Lewis Carroll',
  year: 1910,
};
console.log(book.year); // 1910
delete book.year;
console.log(book.year); // undefined

Obiekty są typami referencyjnymi. To znaczy, że zmienne lub stałe, do których są przypisane wskazują na lokalizację w pamięci urządzenia, a nie bezpośrednio wartość. Zatem nawet dwa obiekty, które mają właściwości o tych samych nazwach i tych samych wartościach, nie będą sobie równe.

Przykład 10

const book1 = {
  name: 'Alice in Wonderland',
  author: 'Lewis Carroll',
  year: 1910,
};
const book2 = {
  name: 'Alice in Wonderland',
  author: 'Lewis Carroll',
  year: 1910,
};
console.log(book1 == book2); // false
console.log(book1 === book2); // false

Obiekty mogą być "mrożone" przy pomocy metody Object.freeze aby uniemożliwić dokonywania w nich zmian.

Przykład 11

const book = {
  name: 'Alice in Wonderland',
  author: 'Lewis Carroll',
  year: 1910,
};
Object.freeze(book)
book.name = 'New title';
console.log(book.name); // Alice in Wonderland

Możemy też zablokować dodawania i usuwania właściwości, jednak pozostawić możliwość edycji dotychczasowych. Służy do tego metoda Object.seal.

Przykład 12

const book = {
  name: 'Alice in Wonderland',
  author: 'Lewis Carroll',
  year: 1910,
};
Object.seal(book)
book.name = 'New title';
console.log(book.name); // New title

book.page = 200;
console.log(book.page); // undefined

Obiekty można łączyć ze sobą przy pomocy Object.assign lub spread operatora. Możemy w ten spobób utworzyć nowy obiekt, który będzie zawierał właściwości z innych obiektów.

Przykład 13

const book = {
  name: 'Alice in Wonderland',
  author: 'Lewis Carroll',
  year: 1910,
};
const bestsellerBook = Object.assign({}, book, {
  page: 200,
  location: 'London',
});
console.log(bestsellerBook);

Ćwiczenia

Ćwiczenie 1 - Przygotuj funkcję, która utworzy i zwróci obiekt zawierający trzy właściwości:

  • dzisiejszą datę w postaci DD-MM-YYYY,
  • ilość dni od początku roku,
  • ilość dni do końca roku,

Ćwiczenie 2 - Przygotuj funkcję, która porówna w sposób płytki (shallow equal) dwa obiekty. Dwa obiekty uznajemy za "równe płytko", jeżeli wszystkie ich właściwości posiadają równe wartości. Może być tutaj przydatna pętla for in.

Ćwiczenie 3 - Przygotuj obiekt zamówienia - "order" z getterami i setterami dla następujących właściwości:

  • quantity - zadbaj by przypisywana wartość mogła być wyłącznie równa lub większa od 0,
  • currency - waluta powinna być w jednej z trzech wartości ["USD", "EUR", "PLN"],
  • price - cena powinna być >= 0.01,

W przypadku nie spełnienia warunku, powinien być wyświetlany błąd. Dodaj metodę "calculateTotal", która obliczy i zwróci wartość zamówienia: price * quantity.

school Mentoring

Masz pytania lub wątpliwości? Coś jest niejasne? Napisz na: codehubpl@gmail.com


© 2020 CodeHub.pl