JavaScript OOP (prototyp) #2

Cześć przyjaciele, nazywam się Bennison. Na tym blogu zamierzam wyjaśnić, jak OOP działa w JavaScript i czym różni się od klasycznego OOP. Zanim przeczytasz ten artykuł, przeczytaj mój poprzedni blog, który dotyczy podstaw OOP .

Co to jest prototyp?

• W JavaScript mamy coś, co nazywa się prototypem. W JavaScript każdy obiekt będzie połączony z pewnym prototypem. Tak więc każdy obiekt ma prototypy. prototyp zawiera również właściwości i metody.
• Tutaj ważną rzeczą jest to, że obiekt ma dostęp do metod prototypowych i właściwości.

• W klasycznym OOP obiekt jest tworzony na podstawie klasy, co nazywa się tworzeniem instancji. Tutaj klasa jest tylko planem tworzenia obiektów.
• Ale w JavaScript ta terminologia jest po prostu inna. Tutaj każdy obiekt jest połączony z innymi obiektami , a obiekty te nazywane są prototypami .

• Dziedziczenie prototypowe oznacza prototyp, który zawiera metody i prototypy, które są dostępne dla wszystkich obiektów powiązanych z tym prototypem.
• Tak więc obiekt dziedziczy metody i właściwości z prototypu, tak to się nazywa dziedziczenie prototypowe. to dziedziczenie różni się od dziedziczenia klasowego, które polega na tym, że jedna klasa jest dziedziczona z drugiej klasy. Ale w tym przypadku instancja dziedzicząca po klasie bazowej.
• Na powyższym obrazku strzałka OOP w javascript jest skierowana w górę, co oznacza, że ​​obiekt deleguje swoje zachowania do prototypów.
• W klasycznym OOP metody są kopiowane z klasy do instancji (obiektów).

const numbers = [1, 2, 3, 4,5];
numbers.map((num) => num * 2)

• Jeśli przeglądamy Google w celu zrozumienia metody mapy javascript, w dokumencie MDN możemy zobaczyć, że jak Array.prototype.map()

• Tutaj „ Array.prototype()” jest prototypem dla wszystkich obiektów tablicy, które tworzymy w JavaScript. Dlatego wszystkie tablice mają dostęp do metody map.
• Teraz ten prototypowy obiekt zawiera wszystkie metody tablicowe, w tym mapę.

• Tak więc w powyższym przykładzie „ Array.Prototype” jest prototypem tablicy liczb, ta zmienna tablicy liczb jest powiązana z prototypami. Dzięki temu ma dostęp do wszystkich metod zdefiniowanych w obiekcie „ array.prototype ”. Tak więc w powyższym przykładzie tablica „number” dziedziczy mapę metody.
• W JavaScript prototypowe dziedziczenie możemy zaimplementować trójdrożnie, jedna to funkcja konstruktora, druga to klasy ES6, a ostatnia to metoda Object.Create().

• Funkcja konstruktora służy do tworzenia obiektów z funkcji. w ten sposób implementowane są wbudowane obiekty, takie jak Array i metody map.

• Jest to nowoczesna alternatywa dla funkcji konstruktora. Klasy ES6 działają tak samo jak funkcja konstruktora. Klasa ES6 nie zachowuje się jak klasyczny OOP. Za kulisami klasy ES6 są implementowane za pomocą funkcji Konstruktora.

class User {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }
  getFullName() {
    console.log(this.firstName + ' ' + this.lastName);
  }
}

const user = new User('Bennison', 'J');

console.log(user); // { firstName: 'Bennison', lastName: 'J' }

console.log(user.hasOwnProperty('firstName')); // true
console.log(user.hasOwnProperty('getFullName')); // false

• W powyższym przykładzie możemy zobaczyć metodę „hasOwnProperty”, która pomaga nam sprawdzić właściwość, a metoda jest własnością własną obiektu, która nazywa się metodą hasOwnProperty.

• Metoda „object.create()” jest najprostszym sposobem łączenia obiektu z obiektem prototypowym.

const objOne = {
  firstName: 'Bennison',
  lastName: 'J',
  getFullName: function () {
    console.log(this.firstName + ' ' + this.lastName);
  }
};

const objTwo = Object.create(objOne);

console.log(objTwo); // {}
objTwo.getFullName(); //  Bennison J

• Metoda „Object.create” zwraca pusty obiekt z prototypem. a prototypem będzie to, co przekazaliśmy tej metodzie.

• Mam nadzieję, że na tym blogu nauczyliśmy się podstaw dziedziczenia prototypów w JavaScript, jeśli nie rozumiesz powyższych przykładów, nie martw się. Wyjaśnię więcej o tych koncepcjach w moich nadchodzących blogach. Dziękuję za czytanie tego bloga, do zobaczenia wkrótce.