Herança de classe em JavaScript

Herança de classe em JavaScript é um recurso valioso que permite a reutilibilidade do código. Ao utilizar a herança da classe, a classe infantil terá acesso às propriedades e métodos da classe pai em um programa JavaScript. Ele também permite criar uma classe infantil que herda a funcionalidade da classe pai, permitindo que você substitua.

Este artigo discutirá a herança da classe em JavaScript. Nós também explicaremos Métodos de sombreamento e herdando métodos estáticos Usando a herança da classe em JavaScript. Além disso, cada uma das seções especificadas será demonstrada com a ajuda de exemplos. Então vamos começar!

Herança de classe em JavaScript

O mecanismo em que uma classe herda os métodos e propriedades de outra classe é conhecida como Herança de classe. O "Base" ou o "Pai”Classe é aquele cujos métodos e propriedades são herdados, enquanto o“Derivado" ou o "Criança”Classe herda a funcionalidade da classe pai:

O "estende -se”A palavra -chave é usada para estabelecer a herança de classe entre pai e classe infantil, e o“super”A palavra -chave é utilizada para acessar os métodos e propriedades da classe pai.

Exemplo: Herança de classe em JavaScript

No exemplo abaixo, definiremos duas classes: Pessoa e Funcionário, e criar a herança de classe entre eles, utilizando o “super" e "estende -se" palavras-chave.

Primeiro de tudo, definiremos uma classe pai ou base chamada “Pessoa”Tendo um construtor e um método mostrado ():

classe de classe
construtor (nome)
esse.nome = nome;

mostrado nome ()
console.log ('meu nome é' + this.nome);

Na próxima etapa, criaremos a classe infantil chamada “Funcionário”Que terá um construtor e um“DisplayStatus ()”Método. Para estabelecer uma relação de herança de classe com o “Pessoa”Classe, você tem que usar o“estende -se”Palavra -chave e especifique o nome da classe pai, que é“Pessoa" no nosso caso. Depois de fazer isso, o “Funcionário”A classe herdará a“Pessoa”Métodos e propriedades da classe.

Além disso, no “Funcionário”Construtor de classe, nós invocaremos“super()”Para chamar o construtor do“Pessoa”Classnome”Argumento:

classe funcionário estende a pessoa
construtor (nome)
super (nome);

displayStatus ()
console.log ('eu sou um funcionário');

Agora, vamos criar um “funcionário“Objeto do“Funcionário”Classe e vai passar“Jack”Como argumentos de nome no construtor:

Deixe funcionário = novo funcionário ('Jack');

O criado “funcionário”Objeto herdou todos os métodos e propriedades do“Pessoa" aula. Agora, vamos invocar o “mostrado nome ()”Método do“Pessoa”Class

funcionário.mostrado nome ();

Por fim, chamaremos o “DisplayStatus ()”Método do“Funcionário”Objeto de classe:

funcionário.displayStatus ();

Dê uma olhada na imagem abaixo do código do código fornecido e em sua saída:

Como super () inicializa o “esse”Objeto, você deve invocar primeiro antes de acessá -lo. No entanto, se você tentar acessar “esse”Antes de executar o super (), isso lhe dará um erro.

Por exemplo, para inicializar o “idade"Propriedade do"Funcionário”Classe em seu construtor, chamaremos o“super()”Primeiro e depois acesse o“esse”Objeto:

classe funcionário estende a pessoa
construtor (nome, idade)
super (nome);
esse.idade = idade;

mostrar()
console.log ("Eu sou um funcionário");

getage ()
devolver isso.idade;

Agora, no momento da criação do “funcionário1“Objeto do“Funcionário”Aula, vamos passar“Jack" como nome e "29" como idade argumento para o construtor:

Deixe o funcionário1 = novo funcionário ('Jack', 29);

Então, após a inicialização, invocaremos o “getage ()”Método da nossa classe de funcionários para visualizar o valor da propriedade AGE:

console.log (funcionário1.getage ());

Confira a saída do exemplo acima:

Métodos de sombreamento usando herança de classe em javascript

Métodos com o mesmo nome podem ser definidos nas classes de pais e filhos. Em tal situação, quando você invoca o método de um objeto de classe infantil, ele sombreará o método presente na classe pai.

Por exemplo, o abaixo foi dado “Estudante”A classe é a classe infantil do“Pessoa”E está redefinindo o“mostrado nome ()”Método:

Classe Student estende a pessoa
construtor ()
super ('jack');

mostrado nome ()
console.log ('meu nome é jack');

Agora o "mostrado nome ()”Existe o método na classe infantil e também na classe dos pais. Então, quando você chama o “mostrado nome ()" com o "Estudante”O objeto de classe, ele invocará o método mostrado () definido na classe infantil:

Seja Student1 = New Student ();
Student1.mostrado nome ();

Aqui está o código de exemplo com sua saída:

Se você deseja invocar o método da classe pai com o mesmo nome, na aula infantil, você deve escrever “super.MethodName (argumentos)”. Por exemplo, chamaremos o “mostrado nome ()”Método do“Pessoa“Classe (pai) adicionando a linha“super.mostrado nome ()”Em nosso método de classe infantil mostrado nome ():

mostrado nome ()
super.mostrado nome ();
console.log ('função filho');

Agora, quando o objeto da classe infantil invoca o “mostrado nome ()”, Ele passará pelo método do corpo da classe infantil mostrado () e depois chamará o método da classe paiMedame (). Depois de concluir a execução do método da classe pai Substituído (), o controle será transferido de volta ao método mostrado () da classe infantil:

Seja Student1 = New Student ();
Student1.mostrado nome ();

Na imagem a seguir, você pode ver a saída do “mostrado nome ()”Método:

Herdando membros estáticos usando herança de classe em javascript

A classe infantil também pode herdar os métodos e propriedades estáticas da classe pai. Vamos ajudá -lo a entender esse conceito demonstrando um exemplo.

No exemplo seguinte, definiremos um estático “Olá Mundo()”Método no mesmo“Pessoa”Classe de pai que simplesmente produzirá o“Olá Mundo”String ao chamá -lo:

classe de classe
construtor (nome)
esse.nome = nome;

mostrado nome ()
console.log ('meu nome é' + this.nome);

estático helloworld ()
console.log ('Olá mundo');

Na próxima etapa, criaremos “Funcionário”Como uma classe infantil do“Pessoa”, Para que possa herdar o método e as propriedades da classe pai, incluindo o“Olá Mundo()”Método estático:

classe funcionário estende a pessoa
displayStatus ()
console.log ('eu sou um funcionário');

Em seguida, invocaremos o método estático helloworld () através do “Funcionário" aula:

Funcionário.Olá Mundo();

O empregado.O método helloworld () será executado igual à pessoa.Helloworld () Método:

Conclusão:

Você pode usar o estende -se palavra -chave para criar uma herança de classe em JavaScript e o super palavra -chave para se referir à classe pai. Com o mecanismo de herança da classe em JavaScript, a classe infantil pode acessar os métodos e propriedades da classe pai. Este artigo discutiu a herança de classe em JavaScript. Também explicamos métodos de sombreamento e herdando métodos estáticos usando a herança de classe em JavaScript. Além disso, cada uma das seções especificadas é demonstrada com a ajuda de exemplos.