Antes de iniciar o código, você deve entender claramente qual o objetivo da herança e quais benefícios podem trazer. De um modo geral, ao projetar a classe, esperamos reduzir o código duplicado e enfraquecer o acoplamento entre as classes. É difícil cuidar de ambos. De acordo com nossa compreensão da herança da linguagem face -para -objeto, a herança trará um acoplamento forte direto, mas devido à sua flexibilidade única, o JS pode projetar um forte acoplamento e um código de acoplamento fraco, alta eficiência e código ineficiente. E o que você usa depende da situação.
A seguir, fornece três métodos de herança em JS: herança de classe, herança do protótipo e mistura. Aqui está uma breve descrição da herança da classe.
Herança de formulário de classe.
A realização da herança do tipo JS depende da cadeia de protótipo. Qual é a cadeia original? O objeto em JS possui uma prototia de atributo.
Parece ter uma impressão de protótipo.
Copie o código do código da seguinte forma:
var pessoa = function () {
this.name = "liyatang";
};
Person.prototype = {
// você pode fornecer a função básica da pessoa aqui
getName: function () {
Retornar este.name;
}
}
Colocamos a função básica da classe na propriedade Prototype, indicando que a referência do objeto Pessoa possui a função XXX.
Depois de entender o protótipo, você precisa entender qual é a cadeia original. Quando um membro (atributo ou método) do objeto visitante, se o membro não for visto no objeto atual, o JS o encontrará no objeto referido no atributo protótipo. Se não for encontrado, ele retornará a indífinado.
Então, o que os avisos da cadeia original nos dão? É fácil pensar que a cadeia principal significa permitir que uma classe herdei outra classe. Isso liga os membros da classe pai à subclasse, porque eles encontrarão a classe pai quando não forem encontrados na subclasse. (Os dois parágrafos acima das palavras não são rigorosos, descritos apenas em palavras fáceis para entender)
Abaixo, precisamos de uma aula chinesa e precisamos herdar os nomes e obter membros da classe Pessoa.
Copie o código do código da seguinte forma:
Var chinês = função (nome, nação) {
// herança, você precisa chamar o construtor da classe pai, você pode chamá -lo com chamada, esse ponto para o chinês
// A pessoa pode ligar para os membros da pessoa neste escopo
Pessoa.call (este, nome);
this.nation = National;
};
Chinês.prototype = Person.prototype;
// não é o mesmo de antes, porque o atributo de protótipo é coberto
//Chinese.prototype = {
// getNation: function () {{
// return this.nation;
//}
//};
// O caminho no futuro precisará ser adicionado assim
Chinês.prototype.getNation = function () {
Retornar esta.nation;
};
A relação de herança é estabelecida, chamamos isso assim
Copie o código do código da seguinte forma:
var c = novo chinês ("liyatang", "China");
alerta (c.getName ());
Portanto, a herança do tipo é concluída. Isso é realmente feito?
Isso ocorre porque o código acima chinês.prototype = Person.prototype; Isso não é tolerado por si só, e não é o efeito que queremos.
Podemos enfraquecer o acoplamento em outro objeto ou instância.
Copie o código do código da seguinte forma:
//
//Chinese.prototype = new Person ();
// O segundo tipo
// var f = function () {};
//F.prototype = Person.prototype;
//Chinese.prototype = f.prototype;
Quais são as diferenças entre esses dois métodos? Adicione uma função vazia f no segundo tipo, que pode evitar uma instância da criação de uma classe pai, porque a classe pai pode ser grande e a função da estrutura da classe pai terá alguns efeitos colaterais ou um grande número de cálculos será executado. Portanto, recomendo o segundo método.
Neste ponto, acabou, ainda não! Há um atributo dos atributos dos atributos do objeto, que preserva uma referência a uma função de uma instância de objeto específica. De acordo com esta declaração, Chiese.prototype.Constructor deve ser igual ao chinês, o que na verdade não é.
Quando a cadeia de protótipos da Chiese foi criada antes das memórias, cobrimos a pessoa. Prototipo fora chiese.prototype. Então, neste momento, chiese.prototype.constructor é pessoa. Também precisamos adicionar o seguinte código
Copie o código do código da seguinte forma:
// Não há necessidade de investigar as condições if aqui, conhecendo chinês.prototype.constructor = chinês
If (chinês.prototype.constructor == object.prototype.constructor) {
Chinês.prototype.constructor = chinês;
}
Transforme -se em todo o código da seguinte maneira
Copie o código do código da seguinte forma:
var pessoa = função (nome) {
this.name = nome;
};
Person.prototype = {
getName: function () {
Retornar este.name;
}
};
Var chinês = função (nome, nação) {
Pessoa.call (este, nome);
this.nation = National;
};
var f = function () {};
F.Prototype = Person.prototype;
Chinês.prototype = f.prototype;
If (chinês.prototype.constructor == object.prototype.constructor) {
Chinês.prototype.constructor = chinês;
}
Chinês.prototype.getNation = function () {
Retornar esta.nation;
};
var c = novo chinês ("liyatang", "China");
alerta (c.getName ());
Se você pode colocar o código de herança em uma função, é conveniente para o código reutilizar, e a última classificação do código é a seguinte
Copie o código do código da seguinte forma:
Função estend (subclasse, superclass) {{
var f = function () {};
F.prototype = superclass.prototype;
subclass.prototype = new f ();
subclass.prototype.constructor = subclass;
subclass.superclass = superclass.prototype;
If (superclass.prototype.constructor == object.prototype.constructor) {
superclass.prototype.constructor = superclass;
}
}
var pessoa = função (nome) {
this.name = nome;
};
Person.prototype = {
getName: function () {
Retornar este.name;
}
};
Var chinês = função (nome, nação) {
Pessoa.call (este, nome);
this.nation = National;
};
estender (chinês, pessoa);
Chinês.prototype.getNation = function () {
Retornar esta.nation;
};
var c = novo chinês ("liyatang", "China");
alerta (c.getName ());
Modificação após publicação:
Sob os comentários no primeiro andar, tenho uma nova visão dessa função estenda. Dois métodos foram propostos ao discutir como definir a cadeia original
Copie o código do código da seguinte forma:
//
//Chinese.prototype = new Person ();
// O segundo tipo
// var f = function () {};
//F.prototype = Person.prototype;
//Chinese.prototype = f.prototype;
Embora a segunda maneira de reduzir a função de construção da classe pai, a pessoa.
No entanto, no primeiro método, você pode reduzir a pessoa. Pode desejar colocar este código de função em extensão. Basta escrever
Chinês.prototype = nova pessoa ();
Mas o esquecimento é que chinês.prototype = new Person (); A resposta está errada! Obviamente, a nova pessoa () precisa passar um parâmetro de nome. Não podemos fazer essa parte da função de extensão, por isso temos que chamar o construtor de classes pais na classe chinesa. Isso também está de acordo com as idéias orientadas para o objeto.
Portanto, ainda é recomendável usar o segundo método.
A primeira vez que escrevi sobre artigos técnicos dessa maneira, basicamente é pavimentado de acordo com meu próprio pensamento.