Javascript OOP parte II

Olá amigos, sou Bennison, neste blog, vou explicar como OOP funciona em Javascript e explicar como ele difere do OOP clássico. Antes de ler este artigo, por favor, leia meu blog anterior sobre os fundamentos da OOP .

O que é um Protótipo?

Em Javascript, temos algo chamado protótipo. Em JavaScript, todo objeto terá um link para um determinado protótipo. Então cada objeto tem protótipos. o protótipo também contém propriedades e métodos.
Aqui o importante é que os métodos e propriedades do protótipo possam ser acessados pelo objeto.

OOP clássico vs Javascript OOP

Na OOP Clássica, um objeto é instanciado da classe, o que é chamado de instanciação. Aqui a classe é apenas um projeto para criar Objetos.
Mas em Javascript, essa terminologia é apenas diferente. Aqui , cada objeto é vinculado a outros objetos e esses objetos são chamados de protótipos .

Herança prototípica significa um protótipo que contém métodos e protótipos acessíveis a todos os objetos vinculados a esse protótipo.
Assim, o objeto herda métodos e propriedades do protótipo, é assim que se chama herança prototípica. essa herança é diferente da herança de classe, que é uma classe herdada da outra classe. Mas, neste caso, instância herdada da classe base.
Na imagem acima, no javascript a seta OOP está apontando para cima, isso significa que o objeto delega seus comportamentos aos protótipos.
Na OOP clássica, os métodos são copiados da classe para as instâncias (objetos).

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

Se navegarmos no google para entender o método de mapa javascript, no documento MDN podemos ver isso como Array.prototype.map()

Aqui o “ Array.prototype()” é o protótipo para todos os objetos array que criamos em JavaScript. Portanto, todos os arrays têm acesso ao método map.
Agora, este objeto protótipo contém todos os métodos de array, incluindo um mapa.

Assim, no exemplo acima, “ Array.Prototype” é o protótipo do array de números, essa variável de array de números está vinculada a protótipos. Portanto ele tem acesso a todos os métodos que estão definidos no objeto “ array.prototype ”. Portanto, no exemplo acima, o array “number” herda o mapa de métodos.
Em Javascript, podemos implementar a herança prototípica de três maneiras, uma é a função construtora, a segunda são as classes ES6 e a última é o método Object.Create().

Uma função construtora é usada para criar objetos a partir de funções. é assim que os objetos integrados, como métodos Array e map, são implementados.

Esta é uma alternativa moderna às funções do construtor. Classes ES6 funcionam da mesma forma que a função construtora. A classe ES6 não se comporta como um OOP Clássico. Nos bastidores, as classes ES6 são implementadas com funções Constructor.

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

E no exemplo acima podemos ver o método 'hasOwnProperty', que nos ajuda a verificar a propriedade, e o método é a propriedade própria do objeto que é chamado de método hasOwnProperty.

O método “object.create()” é a maneira mais fácil de vincular um objeto a um objeto de protótipo.

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

O método “Object.create” retorna um objeto vazio com o protótipo. e o protótipo será o que passamos para esse método.

Espero que, neste blog, tenhamos aprendido o básico da herança prototípica em Javascript, se você não conseguiu entender os exemplos acima, não se preocupe, explicarei mais sobre esses conceitos em meus próximos blogs. Obrigado por ler este blog, até breve.

JavaScript OOP (Protótipo) #2