Prototypy JavaScript dla początkujących

JavaScript jest językiem opartym na prototypach.język oparty na prototypach. Zdekonstruujmy definicję prototypów w JavaScript.

Gdy zaczniesz uczyć się programowania obiektowego w JavaScript, szybko natkniesz się na dziedziczenie prototypowe.

Prototyp jest członkiem obiektu i można się do niego odwoływać z instancji. Zanim stworzymy nasz własny prototyp. Zobaczmy szybki przykład tego, jak już mamy do czynienia z prototypami.

Utwórzmy tablicę:

let x = 
x.map(a => a + 1) //

x przechowuje tablicę. x jest instancją Array. x ma odniesienie do wszystkich prototypowych właściwości Array. Możemy więc np. wywołać funkcję Array.prototype.map() na x

Zaczynam widzieć prototypy wszędzie!

Ustawmy nasz własny prototyp:

// Creates a constructor called Country
class Country {
constructor(country) {
this.country = country
}
}// Create a new instance of Country
let sweden = new Country('Sweden')// sweden is now an object called Country
sweden // Country { country: 'Sweden' }

Teraz chcemy, aby Szwecja przywitała się ze światem. To jest miejsce, gdzie prototypy i łańcuch prototypów wchodzą do gry

// Add method to the prototype of the constructor
Country.prototype.helloWorld = function() {
return `I am a country called ${this.country}`
}

Kraj ma metodę helloWorld jako właściwość prototypu. sweden jest wciąż tym samym obiektem, ale możemy teraz odwołać się do helloWorld.

sweden.helloWorld() // 'I am a country called Sweden'

Interpretator szuka helloWorld Jeśli nie zostanie znalezione żadne odniesienie, zacznie przeskakiwać w górę łańcucha prototypów, aż żądanie zostanie spełnione W tym przypadku helloWorld może być powiązane z sweden poprzez łańcuch prototypów.

A jeśli stworzymy nowy kraj:

let canada = new Country('Canada')

To samo dotyczy canady, nowa instancja Country może również uzyskać dostęp do prototypów. Tak właśnie działa prototyp i łańcuch prototypów. Działa on jako łącznik między funkcją a jej obiektami.

Chcę udostępnić prototyp mojego konstruktora innemu konstruktorowi?

Powiedzmy, że chcemy dodać prototypowy obiekt PlanetA do PlanetB

// Constructor PlanetA
class PlanetA {
constructor(instance) {
this.instance = instance
}
// prototype method
helloWorld() {
return `I am a instance called ${this.instance}`
}
}let x = new PlanetA('x')x.helloWorld() // I am a instance called x

Aby zademonstrować elastyczność dziedziczenia prototypowego, połączymy prototypy naszej instancji PlanetA z PlanetB. Możemy użyć Object.setPrototypeOf(), aby to zrobić.

// Constructor PlanetB
class PlanetB {
constructor(instance) {
this.instance = instance
}
}let y = new PlanetB('y')Object.setPrototypeOf(y, x)y.helloWorld() // I am a instance called y

To było podstawowe wprowadzenie do koncepcji dziedziczenia w JavaScript. Kluczem jest wiedzieć, że masz możliwość dynamicznego tworzenia obiektów bez żadnych wewnętrznych właściwości, ale nadal możesz uzyskać dostęp do metod w łańcuchu prototypów.

Istnieje więcej szczegółów dotyczących prototypów i sposobów obsługi dziedziczenia w JavaScript, w zależności od tego, jak zdecydujesz się czynnikować swoje obiekty. Słowo kluczowe 'class' jest cukrem syntaktycznym dla funkcji konstruktora. Nie ma czegoś takiego jak dziedziczenie klas w JavaScript, jest tylko prototypowy sposób dziedziczenia.

Mam nadzieję, że uznałeś to za pomocne i że możesz teraz czuć się bardziej komfortowo, mówiąc o prototypach i o tym, jak OOP działa w JavaScript.

Baw się swoim kodem.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *