Neste tutorial, você aprenderá sobre protótipos em JavaScript com a ajuda de exemplos.
Antes de aprender protótipos, certifique-se de verificar estes tutoriais:
- Objetos JavaScript
- Função de construtor JavaScript
Como você sabe, você pode criar um objeto em JavaScript usando uma função de construtor de objeto. Por exemplo,
// constructor function function Person () ( this.name = 'John', this.age = 23 ) // creating objects const person1 = new Person(); const person2 = new Person();
No exemplo acima, function Person()é uma função de construtor de objeto. Criamos dois objetos person1e a person2partir dele.
Protótipo JavaScript
Em JavaScript, cada função e objeto tem uma propriedade chamada prototype por padrão. Por exemplo,
function Person () ( this.name = 'John', this.age = 23 ) const person = new Person(); // checking the prototype value console.log(Person.prototype); // (… )
No exemplo acima, estamos tentando acessar a propriedade prototype de uma Personfunção construtora.
Como a propriedade prototype não tem valor no momento, ela mostra um objeto vazio (…).
Herança de protótipo
Em JavaScript, um protótipo pode ser usado para adicionar propriedades e métodos a uma função de construtor. E os objetos herdam propriedades e métodos de um protótipo. Por exemplo,
// 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);
Resultado
(gênero: "masculino") masculino masculino
No programa acima, adicionamos uma nova propriedade genderà Personfunção do construtor usando:
Person.prototype.gender = 'male';
Em seguida, objeto person1e person2herda a propriedade genderda propriedade de protótipo da Personfunção do construtor.
Portanto, ambos os objetos person1e person2podem acessar a propriedade de gênero.
Observação: a sintaxe para adicionar a propriedade a uma função de construtor de objeto é:
objectConstructorName.prototype.key = 'value';
Prototype é usado para fornecer propriedades adicionais a todos os objetos criados a partir de uma função construtora.
Adicionar métodos a uma função de construtor usando protótipo
Você também pode adicionar novos métodos a uma função de construtor usando protótipo. Por exemplo,
// 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
No programa acima, um novo método greeté adicionado à Personfunção do construtor usando um protótipo.
Mudança de protótipo
Se um valor de protótipo for alterado, todos os novos objetos terão o valor de propriedade alterado. Todos os objetos criados anteriormente terão o valor anterior. Por exemplo,
// 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 : Você não deve modificar os protótipos de objetos internos de JavaScript padrão, como strings, arrays, etc. É considerada uma prática inadequada.
JavaScript Prototype Chaining
Se um objeto tentar acessar a mesma propriedade que está na função do construtor e no objeto de protótipo, o objeto obterá a propriedade da função do construtor. Por exemplo,
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
No programa acima, um nome de propriedade é declarado na função do construtor e também na propriedade prototype da função do construtor.
Quando o programa é executado, person1.nameexamina a função do construtor para ver se há uma propriedade chamada name. Como a função construtora tem a propriedade name com value 'John', o objeto obtém o valor dessa propriedade.
Quando o programa é executado, person1.ageexamina a função do construtor para ver se há uma propriedade chamada age. Como a função construtora não tem agepropriedade, o programa examina o objeto de protótipo da função de construtor e o objeto herda a propriedade do objeto de protótipo (se disponível).
Nota : Você também pode acessar a propriedade prototype de uma função construtora de um 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 )
No exemplo acima, um personobjeto é usado para acessar a propriedade prototype usando __proto__. No entanto, __proto__está obsoleto e você deve evitar usá-lo.
