Este artigo descreve o mecanismo de herança JavaScript. Compartilhe para sua referência. A análise específica é a seguinte:
Geralmente, é difícil para iniciantes entender o mecanismo de herança da linguagem JavaScript. Ele não tem o conceito de "subclasse" e "classe pai", nem tem a distinção entre "classe" e "instância". Ele se baseia inteiramente em um modelo de "cadeia de protótipos" muito estranho para obter herança.
Passei muito tempo estudando essa parte e fazendo muitas anotações. Mas todos são memória forçada e não podem ser entendidos fundamentalmente.
1. Como criar uma classe
Suponha que haja uma classe chamada Pessoa da seguinte maneira:
Copie o código da seguinte forma: var pessoa = function (nome, idade) {
this.name = nome;
this.age = idade;
}
Person.prototype.getName = function () {
retornar este.name;
}
Como mencionado acima: a pessoa representa todas as pessoas na terra, e todos têm esses dois atributos básicos: nome e idade; Agora queremos implementar uma aula de estudante e depois sabemos; Os alunos também são uma pessoa, e os alunos também têm atributos como nome e idade; A questão agora é como podemos construir esse relacionamento?
Vamos primeiro ver como as línguas puras orientadas a objetos fazem isso (como o ActionScript3)
Copie o código da seguinte forma: os alunos da classe estendem a pessoa {}; // é muito simples, uma linha de código; Para ser mais preciso, uma palavra-estender
2. Como posso fazer isso se eu mudar para JS
Antes de explicar a implementação do mecanismo de herança JS, vamos primeiro entender a cadeia de protótipos de JS:
A cópia do código é a seguinte: var pessoa = nova pessoa ('Poised-flw', 21);
pessoa.getName (); // "Poised-flw"
Quanto ao método GetName () acima, como ele é executado? Primeiro, você descobrirá se existe um método getName () na função da pessoa e não encontrará; Em seguida, vá para a pessoa.prototipo para pesquisar e descobrir que existe! Então chame, e se não o fizer? Continue a seguir o mesmo método e pesquisar ao longo do protótipo até encontrar o método ou alcançar a parte superior da cadeia de protótipo!
Por exemplo, agora existe um construtor chamado cachorro que representa o protótipo de um objeto de cachorro.
Copie o código da seguinte forma: função cão (nome) {
this.name = nome;
}
Usar o novo para este construtor gerará uma instância do objeto de cachorro.
A cópia do código é a seguinte: var doda = novo cachorro ('cabelos grandes');
alerta (DOGA.NAME); // cabelos grandes
Preste atenção a essa palavra -chave no construtor, que representa o objeto de instância recém -criado.
3. Desvantagens do novo operador
Há uma desvantagem no uso de construtores para gerar objetos de instância, ou seja, a capacidade de compartilhar atributos e métodos.
Por exemplo, no construtor do objeto de cachorro, defina as espécies de atributos comuns de um objeto de instância.
Copie o código da seguinte forma: função cão (nome) {
this.name = nome;
this.species = 'Canidae';
}
Em seguida, dois objetos de instância são gerados:
A cópia do código é a seguinte: var doda = novo cachorro ('cabelos grandes');
var dogb = novo cachorro ('eimao');
Os atributos da espécie desses dois objetos são independentes, modificando um não afetará o outro.
A cópia do código é a seguinte: DOGA.SPECES = 'feminino';
alerta (Dogb.spécies); // Mostra "família canina", não afetada por Doga
Cada objeto de instância possui sua própria cópia de suas propriedades e métodos. Isso não apenas falha em compartilhar dados, mas também um enorme desperdício de recursos.
Então: Ideia de herança: implemente o mecanismo de herança através da cadeia de protótipo exclusiva da JS!
4. Herança baseada na cadeia de protótipo
1. Herança e implementação direta
Copie o código da seguinte forma: var estudantes = função (nome, idade, sid) {
Pessoa.Call (este, nome, idade);
this.sid = sid;
}
Estudantes.prototype = new Person (); // coloca a pessoa na cadeia de protótipos de estudantes para implementar o mecanismo de herança
Estudantes.prototype.constructor = estudantes;
Estudantes.prototype.getResults = function () {
// Obtenha as notas dos alunos
}
É necessário não perder os alunos.prototype.Constructor = Linha dos alunos! , ao definir um construtor, seu protótipo padrão é uma instância de objeto e, em seguida, o atributo construtor do protótipo é definido automaticamente para a própria função! ! ! Se o protótipo for definido manualmente para outro objeto, o novo objeto naturalmente não terá o valor do construtor do objeto original, portanto, seu atributo construtor precisará ser redefinido. como:
Copie o código da seguinte forma: var test = function () {
this.time = "agora";
}
console.log (test.prototype); // objeto {} um objeto vazio
console.log (test.prototype.constructor); // function () {this.time = "agora";} e a própria função
// Se você alterar manualmente a propriedade do protótipo de teste
Test.prototype = {
Algumfunc: function () {
console.log ('Hello World!');
}
};
console.log (test.prototype.constructor); // function objeto () {[Código nativo]}
// Então você descobrirá que o apontamento está completamente errado; portanto, ao alterar manualmente a propriedade do protótipo, você precisa alterar seu construtor apontando;
Após o teste acima, você saberá por que precisa modificar o valor do construtor.
2. A função herdada encapsulada estende
Copie o código da seguinte
var f = function () {};
F.prototype = superclass.prototype;
subclass.prototype = new f ();
subclass.prototype.constructor = subclass;
}
De fato, a função dessa função é apenas um encapsulamento do processo de herança acima, e as diferenças são:
Ele herda apenas o atributo protótipo da superclasse e não herda os atributos no construtor de superclasse;
A vantagem disso é reduzir a sobrecarga do novo construtor!
Obviamente, o problema subsequente é que você não pode simplesmente passar por essa função para permitir que a subclasse herde todas as propriedades da superclasse
melhorar:
Copie o código da seguinte forma: // Continue adicionando uma linha de código ao construtor dos alunos:
Pessoa.Call (este, nome, idade);
5. Resumo
Usando o princípio da cadeia de protótipo do JS, podemos facilmente implementar o mecanismo de herança JS. Embora não seja muito rigoroso, meu objetivo foi alcançado: tente parecer um código repetitivo uma vez!
Espero que este artigo seja útil para a programação JavaScript de todos.