Herdar os métodos de outra classe usando a palavra -chave Extend em JavaScript

Com os recursos adicionais e a sintaxe da classe mais simples, o ES6 tornou o JavaScript muito mais simples. Antes disso, a herança de JavaScript foi possível com o objeto.Propriedade de protótipo que era muito diferente e complexa em comparação com Java e C ++ e outras linguagens de programação.

Neste post, vamos analisar herança em javascript usando o “estende -sePalavra -chave em JavaScript. Exemplos ajudam a agarrar o conceito fortemente, para que vamos dar exemplos também. Vamos começar.

O que é herança?

Como qualquer outra linguagem de programação, a herança é um conceito muito importante na programação orientada a objetos JavaScript. A definição mais simples de herança é quando métodos e atributos de uma classe pai ou classe base são copiados ou herdados em classes derivadas ou infantis. É muito útil, pois, devido a isso, somos capazes de alcançar a reutilização de código. Reutilização de código significa reutilizar atributos/propriedades e métodos de uma classe em outra classe recém -criada.

Estende a palavra -chave

Agora que analisamos o que é a herança. Vamos discutir como conseguir isso. Como mencionado anteriormente, costumávamos alcançar a herança via objeto.protótipo que é chamado de herança prototípica. No entanto, foi seguida uma abordagem mais fácil, que estava usando a palavra -chave Extend.

A função de estender palavras -chave é usada para criar uma classe/classe infantil derivada a partir de uma classe de pai/classe base. A classe infantil pode herdar qualquer aula e essa classe se torna a classe pai. Quando herdamos, na classe infantil, todos os métodos e atributos serão herdados da classe pai.

Sintaxe:

Classe ChildClass estende a Class de Parent;

Deve -se ter em mente que ele só funciona na versão Ecmascript 2015 (ES6).

Qual navegador suporta a palavra -chave "estender"?

Agora vamos ver quais navegadores suportam a palavra -chave "estender".

cromada	Borda	Raposa de fogo	Safári	Ópera
49.0	13.0	45.0	9.0	36.0

Agora que cobrimos a teoria da herança e a palavra -chave "estender", vamos implementá -la no JavaScript.

Exemplo:

ClassanImalName
construtor (nome)
esse.AnimalName = nome;

presente()
Return'name: ' + este.AnimalName;


ClassanImalextendEnmalName
construtor (nome, quantidade)
super (nome);
esse.quantidade = quantidade;

whatanimal ()
retornar este.presente () + "quantidade:" + this.quantidade;


Const animal = novo animal ("frango", 5);
Alerta (animal.whatanimal ());

Neste exemplo, temos uma classe de pai “nome animal”, onde definimos o nome do animal. Tem um método com o nome "presente ()". Temos outra classe "animal" que estende "nome de animal". Isso significa que a classe "animal" é uma classe infantil e herdará todos os métodos "AnimalName". Temos um método na classe "animal" com o nome de "Whatanimal ()". Nisso, estamos herdando o método da classe "AnimalName" "presente" e depois criamos uma instância da classe "Animal". Agora, quando alertamos a função whatanimal (), ele funcionará corretamente.

Vale a pena notar que usamos a palavra -chave super () para se referir à classe pai no exemplo acima. Quando chamamos o método super (), estamos de fato chamando o construtor da classe pai e podemos acessar todos os métodos e propriedades dos pais graças à super palavra -chave.

Uso de getter e setter em herança

Quando usamos aulas e herança, é quase impossível não usar getters e setters. É muito útil recuperar ou atualizar propriedades antes de retornar ou definir essas propriedades.

A palavra -chave "get" é usada para recuperar ou obter uma propriedade. A palavra -chave "set" é usada para atualizar ou definir alguma propriedade.

Por exemplo:

ClassanImalName
construtor (nome)
esse._animalName = nome;

Get GetanimalName ()
retornar este._animalName;

Definir setAnimalName (nam)
esse._animalName = nam;

presente()
Return'name: ' + este._animalName;


ClassanImalextendEnmalName
construtor (nome, quantidade)
super (nome);
esse.quantidade = quantidade;

whatanimal ()
retornar este.getanimalName;


const animal = novo animal ("frango", 5);
Alerta (animal.whatanimal ());

Neste exemplo, usamos o personagem sublinhado porque queríamos separar o getter/setter do atributo/propriedade real para melhor entender. Este exemplo é idêntico ao anterior, com a exceção de que a classe "AnimalName" agora tem um getter e setter. Recuperamos o nome do animal da classe pai através do método get que é "getanimalName".

Também podemos definir uma propriedade da mesma maneira, adicionando apenas mais uma linha usando o código acima.

ClassanImalName
construtor (nome)
esse._animalName = nome;

Get GetanimalName ()
retornar este._animalName;

Definir setAnimalName (nam)
esse._animalName = nam;

presente()
Return'name: ' + este._animalName;


ClassanImalextendEnmalName
construtor (nome, quantidade)
super (nome);
esse.quantidade = quantidade;

whatanimal ()
retornar este.getanimalName;


const animal = novo animal ("frango", 5);
animal.setAnimalName = "vaca";
Alerta (animal.whatanimal ());

A saída agora será atualizada para "vaca".

Conclusão

A herança é um dos conceitos centrais de programação orientada a objetos e a definição de herança pode ser definida como quando os métodos e atributos de uma classe pai ou base são copiados/herdados para uma criança ou classe derivada e podem ser alcançados usando a palavra-chave estende -se em javascript.

Se você ler este artigo completamente, tenho certeza de que vocês têm uma idéia de como usar a palavra -chave Extends para acessar os métodos e atributos da classe pai em javascript. Explicamos herança, estendemos a palavra -chave, definimos palavras -chave, obtemos palavra -chave e qual navegador suporta a palavra -chave Extend. A herança prototípica, conforme declarado no início deste artigo, está desatualizado e complexo. Estend é mais simples e semelhante a outros idiomas como Java, C ++, etc.