Herança de classe JavaScript
Herança de classe
Para criar uma herança de classe, use a palavra- extends
chave.
Uma classe criada com uma herança de classe herda todos os métodos de outra classe:
Exemplo
Crie uma classe chamada "Model" que herdará os métodos da classe "Car":
class Car {
constructor(brand) {
this.carname =
brand;
}
present() {
return 'I have a ' + this.carname;
}
}
class Model extends Car {
constructor(brand, mod) {
super(brand);
this.model = mod;
}
show() {
return this.present() + ', it is a ' + this.model;
}
}
let myCar = new Model("Ford", "Mustang");
document.getElementById("demo").innerHTML
= myCar.show();
O super()método se refere à classe pai.
Ao chamar o super()método no método construtor, chamamos o método construtor do pai e obtemos acesso às propriedades e métodos do pai.
A herança é útil para reutilização de código: reutilize propriedades e métodos de uma classe existente ao criar uma nova classe.
Getters e Setters
As classes também permitem que você use getters e setters.
Pode ser inteligente usar getters e setters para suas propriedades, especialmente se você quiser fazer algo especial com o valor antes de devolvê-los ou antes de defini-los.
Para adicionar getters e setters na classe, use as palavras-chave
gete set.
Exemplo
Crie um getter e um setter para a propriedade "carname":
class Car {
constructor(brand) {
this.carname
= brand;
}
get cnam() {
return this.carname;
}
set cnam(x) {
this.carname = x;
}
}
let myCar = new Car("Ford");
document.getElementById("demo").innerHTML = myCar.cnam;
Nota: mesmo que o getter seja um método, você não usa parênteses quando deseja obter o valor da propriedade.
O nome do método getter/setter não pode ser igual ao nome da propriedade, neste caso carname.
Muitos programadores usam um caractere de sublinhado _
antes do nome da propriedade para separar o getter/setter da propriedade real:
Exemplo
Você pode usar o caractere sublinhado para separar o getter/setter da propriedade real:
class Car {
constructor(brand) {
this._carname
= brand;
}
get carname() {
return this._carname;
}
set carname(x) {
this._carname = x;
}
}
let myCar = new Car("Ford");
document.getElementById("demo").innerHTML = myCar.carname;
Para usar um setter , use a mesma sintaxe de quando você define um valor de propriedade, sem parênteses:
Exemplo
Use um setter para mudar o carname para "Volvo":
class Car {
constructor(brand) {
this._carname
= brand;
}
get carname() {
return this._carname;
}
set carname(x) {
this._carname = x;
}
}
let myCar = new Car("Ford");
myCar.carname = "Volvo";
document.getElementById("demo").innerHTML = myCar.carname;
Elevação
Ao contrário de funções e outras declarações JavaScript, as declarações de classe não são içadas.
Isso significa que você deve declarar uma classe antes de poder usá-la:
Exemplo
//You cannot use the class yet.
//myCar = new Car("Ford")
//This would
raise an error.
class Car {
constructor(brand) {
this.carname = brand;
}
}
//Now you can use the class:
let myCar = new Car("Ford")
Nota: Para outras declarações, como funções, você NÃO receberá um erro ao tentar usá-lo antes de ser declarado, porque o comportamento padrão das declarações JavaScript é içamento (mover a declaração para o topo).