En este tutorial, aprenderá sobre prototipos en JavaScript con la ayuda de ejemplos.
Antes de aprender prototipos, asegúrese de consultar estos tutoriales:
- Objetos JavaScript
- Función de constructor de JavaScript
Como sabe, puede crear un objeto en JavaScript utilizando una función de constructor de objetos. Por ejemplo,
// constructor function function Person () ( this.name = 'John', this.age = 23 ) // creating objects const person1 = new Person(); const person2 = new Person();
En el ejemplo anterior, function Person()es una función de constructor de objetos. Hemos creado dos objetos person1y a person2partir de él.
Prototipo de JavaScript
En JavaScript, cada función y objeto tiene una propiedad denominada prototipo por defecto. Por ejemplo,
function Person () ( this.name = 'John', this.age = 23 ) const person = new Person(); // checking the prototype value console.log(Person.prototype); // (… )
En el ejemplo anterior, estamos intentando acceder a la propiedad prototipo de una Personfunción constructora.
Dado que la propiedad del prototipo no tiene valor en este momento, muestra un objeto vacío (…).
Herencia de prototipos
En JavaScript, se puede usar un prototipo para agregar propiedades y métodos a una función de constructor. Y los objetos heredan propiedades y métodos de un prototipo. Por ejemplo,
// 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);
Salida
(género: "masculino") masculino masculino
En el programa anterior, hemos agregado una nueva propiedad gendera la Personfunción constructora usando:
Person.prototype.gender = 'male';
Luego objeta person1y person2hereda la propiedad genderde la propiedad prototipo de la Personfunción constructora.
Por lo tanto, los dos objetos person1y person2se puede acceder a la propiedad de género.
Nota: La sintaxis para agregar la propiedad a una función constructora de objetos es:
objectConstructorName.prototype.key = 'value';
El prototipo se utiliza para proporcionar propiedades adicionales a todos los objetos creados a partir de una función de constructor.
Agregar métodos a una función de constructor mediante un prototipo
También puede agregar nuevos métodos a una función de constructor usando prototype. Por ejemplo,
// 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
En el programa anterior, greetse agrega un nuevo método a la Personfunción constructora usando un prototipo.
Cambio de prototipo
Si se cambia un valor de prototipo, todos los objetos nuevos tendrán el valor de propiedad modificado. Todos los objetos creados anteriormente tendrán el valor anterior. Por ejemplo,
// 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
Nota : No debe modificar los prototipos de objetos estándar integrados en JavaScript como cadenas, matrices, etc. Se considera una mala práctica.
Encadenamiento de prototipos de JavaScript
Si un objeto intenta acceder a la misma propiedad que está en la función constructora y el objeto prototipo, el objeto toma la propiedad de la función constructora. Por ejemplo,
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
En el programa anterior, se declara un nombre de propiedad en la función constructora y también en la propiedad prototipo de la función constructora.
Cuando el programa se ejecuta, person1.namebusca en la función constructora para ver si hay una propiedad nombrada name. Dado que la función constructora tiene la propiedad name con valor 'John', el objeto toma valor de esa propiedad.
Cuando el programa se ejecuta, person1.agebusca en la función constructora para ver si hay una propiedad nombrada age. Dado que la función constructora no tiene agepropiedad, el programa busca en el objeto prototipo de la función constructora y el objeto hereda la propiedad del objeto prototipo (si está disponible).
Nota : También puede acceder a la propiedad de prototipo de una función constructora desde un objeto.
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 )
En el ejemplo anterior, personse usa un objeto para acceder a la propiedad del prototipo usando __proto__. Sin embargo, __proto__ha quedado obsoleto y debe evitar su uso.
