Recentemente, li on-line sobre a experiência de alguém durante uma entrevista com o Taobao e descobri que havia muitas coisas sobre as quais não estava claro, então escrevi alguns artigos para aprofundar minha compreensão de algumas questões.
Uma questão mencionada no artigo é: Como o JavaScript implementa herança?
Abaixo explicarei alguns métodos e exemplos que encontrei online para aprofundar minha impressão.
Sabemos que função em JavaScript é versátil. Além de ser usada para definições de funções, também pode ser usada para definições de classes.
A herança em JavaScript é um pouco estranha. Ao contrário do C++ e de algumas linguagens orientadas a objetos, ele não possui modificações de controle de acesso, como público e privado, e não há implementos ou outros símbolos específicos para indicar herança.
Com relação à herança de classes JavaScript, você pode consultar o exemplo a seguir.
Copie o código do código da seguinte forma:
<script type="texto/javascript">
função Pessoa() {
//propriedades
this.Gender = "feminino";
esta.Idade = 18;
this.Words = "Silêncio";
//método
isto.shouting = function() {
alert("Feliz! Método da classe pai");
}
}
//Herdar
functionProgramador() {
this.base = Pessoa;
}
Programador.prototype = nova Pessoa;
//Adiciona novos métodos às subclasses
Programador.prototype.typeCode = function() {
alert("Eu sou um programador! Trabalhador migrante de TI, muito infeliz. Método de subclasse");
}
// Exemplo de chamada
function digaOlá() {
var a = novo Programador();
alert(a.Gender); // Chama as propriedades da classe pai
a.shouting(); // Chama o método da classe pai
a.typeCode(); // Chama o método da subclasse
}
digaOlá();
</script>
No exemplo acima, primeiro é declarada uma classe de pessoa, que contém alguns atributos e métodos, e depois é declarada uma classe de programador, que possui um atributo base. Este atributo não é necessário, mas para fins de especificações e para encontrar objetos em. o futuro Todas as classes herdadas precisam ser escritas e, em seguida, a classe pessoa é copiada para o objeto protótipo do programador (protótipo), assim a herança de classe é realizada;
Simule alguns princípios de classes e herança em JavaScript
Em linguagens orientadas a objetos, usamos classes para criar um objeto personalizado. Porém, tudo em JavaScript é um objeto, então como criar um objeto personalizado?
Isso requer a introdução de outro conceito - protótipo. Podemos simplesmente considerar o protótipo como um modelo. Os objetos personalizados recém-criados são todos cópias deste modelo (protótipo) (na verdade, não uma cópia, mas um link. Acontece que esse tipo de link é. invisível e dá às pessoas a impressão de que se trata de uma cópia).
Vejamos um exemplo de criação de um objeto personalizado via protótipo:
Copie o código do código da seguinte forma:
//Construtor
function Pessoa(nome, sexo) {
este.nome = nome;
este.sexo = sexo;
}
//Defina o protótipo de Person. As propriedades no protótipo podem ser referenciadas por objetos personalizados.
Pessoa.protótipo = {
getNome: função() {
retorne este.nome;
},
getSexo: função() {
retorne este.sexo;
}
}
Aqui chamamos a função Person de construtor, que é uma função que cria um objeto personalizado. Pode-se observar que o JavaScript simula as funções das classes por meio de construtores e protótipos.
A seguir está um exemplo para explicar em detalhes o trabalho específico realizado pelo JavaScript ao criar um objeto personalizado:
Copie o código do código da seguinte forma:
var zhang = new Pessoa("ZhangSan", "homem");
console.log(zhang.getName()); // "ZhangSan"
var chun = new Pessoa("ChunHua", "mulher");
console.log(chun.getName()); // "ChunHua"
Quando o código var zhang = new Person("ZhangSan", "man") é executado, as seguintes coisas são feitas internamente:
Crie um objeto em branco (new Object()).
Copie os atributos (pares chave-valor) em Person.prototype para este objeto vazio (como mencionamos anteriormente, a implementação interna não é uma cópia, mas um link oculto).
Passe este objeto para o construtor através da palavra-chave this e execute o construtor.
Atribua este objeto à variável zhang.
Todo o trabalho concluído.
Para provar que o modelo de protótipo não é copiado para o objeto instanciado, mas é uma forma de vinculação, consulte o seguinte código:
Copie o código do código da seguinte forma:
function Pessoa(nome, sexo) {
este.nome = nome;
este.sexo = sexo;
}
Pessoa.protótipo.idade = 20;
var zhang = new Pessoa("ZhangSan", "homem");
console.log(zhang.age);//20
//Substitui o atributo idade no protótipo
zhang.idade = 19;
console.log(zhang.age);//19
excluir zhang.age;
// Após excluir o atributo age da instância, o valor deste atributo é obtido do protótipo novamente
console.log(zhang.age);//20
No exemplo acima, se for obtido apenas por cópia, após a exclusão do atributo idade, o objeto não existirá. Porém, o atributo idade no exemplo ainda pode ser gerado, ou o valor anterior será substituído, indicando que. excluiu apenas o atributo com o mesmo nome na subclasse, e o atributo idade na classe pai ainda existe no objeto por meio de um link invisível.
Como implementar herança simples em JavaScript?
O exemplo a seguir cria uma classe de funcionário Employee que herda todas as propriedades do protótipo protótipo de Person.
Copie o código do código da seguinte forma:
function Funcionário(nome, sexo, IDFuncionário) {
este.nome = nome;
este.sexo = sexo;
this.employeeID = funcionárioID;
}
// Aponta o protótipo de Employee para uma instância de Person
// Como as instâncias de Person podem chamar métodos no protótipo Person, as instâncias de Employee também podem chamar todas as propriedades no protótipo Person.
Funcionário.prototype = new Pessoa();
Funcionário.prototype.getEmployeeID = function() {
retorne este.employeeID;
};
var zhang = novo Funcionário("ZhangSan", "homem", "1234");
console.log(zhang.getName()); // "ZhangSan
Ok, acima estão alguns processos e métodos específicos para implementar herança em JavaScript.
Claro, para resumir, o mecanismo de herança em JavaScript é baseado apenas em simulação. Em comparação com algumas linguagens orientadas a objetos, é difícil e tem algumas falhas, mas em geral, isso ainda não reduz a eficiência dos desenvolvedores front-end. . entusiasmo.