W tym samouczku nauczysz się prototypów w JavaScript na podstawie przykładów.
Zanim nauczysz się prototypów, zapoznaj się z tymi samouczkami:
- Obiekty JavaScript
- Funkcja konstruktora JavaScript
Jak wiesz, możesz stworzyć obiekt w JavaScript używając funkcji konstruktora obiektów. Na przykład,
// constructor function function Person () ( this.name = 'John', this.age = 23 ) // creating objects const person1 = new Person(); const person2 = new Person();
W powyższym przykładzie function Person()jest funkcją konstruktora obiektów. Stworzyliśmy dwa obiekty person1iz person2niego.
Prototyp JavaScript
W JavaScript każda funkcja i obiekt ma domyślnie właściwość o nazwie prototype. Na przykład,
function Person () ( this.name = 'John', this.age = 23 ) const person = new Person(); // checking the prototype value console.log(Person.prototype); // (… )
W powyższym przykładzie próbujemy uzyskać dostęp do właściwości prototypu Personfunkcji konstruktora.
Ponieważ własność prototypu nie ma w tej chwili wartości, pokazuje pusty obiekt (…).
Dziedziczenie prototypów
W JavaScript można użyć prototypu, aby dodać właściwości i metody do funkcji konstruktora. A obiekty dziedziczą właściwości i metody z prototypu. Na przykład,
// constructor function function Person () ( this.name = 'John', this.age = 23 ) // creating objects const person1 = new Person(); const person2 = new Person(); // adding property to constructor function Person.prototype.gender = 'male'; // prototype value of Person console.log(Person.prototype); // inheriting the property from prototype console.log(person1.gender); console.log(person2.gender);
Wynik
(płeć: „mężczyzna”) mężczyzna mężczyzna
W powyższym programie dodaliśmy nową właściwość genderdo Personfunkcji konstruktora za pomocą:
Person.prototype.gender = 'male';
Następnie obiekt person1i person2dziedziczy właściwość genderz właściwości prototypu Personfunkcji konstruktora.
W związku z tym zarówno obiekty, jak person1i person2mają dostęp do właściwości gender.
Uwaga: Składnia dodawania właściwości do funkcji konstruktora obiektów jest następująca:
objectConstructorName.prototype.key = 'value';
Prototyp jest używany w celu zapewnienia dodatkowej własności wszystkim obiektom utworzonym z funkcji konstruktora.
Dodaj metody do funkcji konstruktora przy użyciu prototypu
Możesz także dodać nowe metody do funkcji konstruktora za pomocą prototypu. Na przykład,
// constructor function function Person () ( this.name = 'John', this.age = 23 ) // creating objects const person1 = new Person(); const person2 = new Person(); // adding a method to the constructor function Person.prototype.greet = function() ( console.log('hello' + ' ' + this.name); ) person1.greet(); // hello John person2.greet(); // hello John
W powyższym programie nowa metoda greetjest dodawana do Personfunkcji konstruktora przy użyciu prototypu.
Zmiana prototypu
Jeśli wartość prototypu zostanie zmieniona, wszystkie nowe obiekty będą miały zmienioną wartość właściwości. Wszystkie wcześniej utworzone obiekty będą miały poprzednią wartość. Na przykład,
// constructor function function Person() ( this.name = 'John' ) // add a property Person.prototype.age = 20; // creating an object const person1 = new Person(); console.log(person1.age); // 20 // changing the property value of prototype Person.prototype = ( age: 50 ) // creating new object const person3 = new Person(); console.log(person3.age); // 50 console.log(person1.age); // 20
Uwaga : Nie należy modyfikować prototypów standardowych, wbudowanych obiektów JavaScript, takich jak łańcuchy, tablice itp. Jest to uważane za złą praktykę.
Tworzenie łańcuchów prototypów JavaScript
Jeśli obiekt próbuje uzyskać dostęp do tej samej właściwości, która znajduje się w funkcji konstruktora i obiekcie prototypu, obiekt pobiera właściwość z funkcji konstruktora. Na przykład,
function Person() ( this.name = 'John' ) // adding property Person.prototype.name = 'Peter'; Person.prototype.age = 23 const person1 = new Person(); console.log(person1.name); // John console.log(person1.age); // 23
W powyższym programie nazwa właściwości jest zadeklarowana w funkcji konstruktora, a także we właściwości prototyp funkcji konstruktora.
Gdy program jest wykonywany, person1.namesprawdza funkcję konstruktora, aby sprawdzić, czy istnieje właściwość o nazwie name. Ponieważ funkcja konstruktora ma właściwość name z wartością 'John', obiekt przyjmuje wartość z tej właściwości.
Gdy program jest wykonywany, person1.agesprawdza funkcję konstruktora, aby sprawdzić, czy istnieje właściwość o nazwie age. Ponieważ funkcja konstruktora nie ma agewłaściwości, program zagląda do obiektu prototypu funkcji konstruktora, a obiekt dziedziczy właściwość z obiektu prototypowego (jeśli jest dostępna).
Uwaga : Dostęp do właściwości prototypu funkcji konstruktora można również uzyskać z obiektu.
function Person () ( this.name = 'John' ) // adding a prototype Person.prototype.age = 24; // creating object const person = new Person(); // accessing prototype property console.log(person.__proto__); // ( age: 24 )
W powyższym przykładzie personobiekt jest używany do uzyskania dostępu do właściwości prototypu za pomocą __proto__. Jednak __proto__został wycofany i należy go unikać.
