Como entender a cadeia de protótipo JS

Antes de falar sobre cadeias de protótipo, devemos primeiro entender qual é a relação entre funções e funções personalizadas e quais são as relações inextricáveis ​​entre construtores, protótipos e instâncias? De fato, todas as funções são instâncias de função. Existe um protótipo de protótipo de propriedade no construtor, que também é um objeto; Depois, há uma propriedade construtora no objeto de protótipo, que aponta para o construtor; E existe uma propriedade _proto_ no objeto de instância, que também aponta para o objeto Prototype, e essa propriedade não é uma propriedade padrão e não pode ser usada na programação. Esta propriedade é usada internamente para uso do navegador.

 // _proto_ Existe um protótipo de propriedade na função. O objeto criado por esta função será conectado à propriedade por padrão. // A relação entre protótipo e _proto___ é da perspectiva do objeto, o protótipo é da perspectiva do construtor.

Abaixo, vamos olhar para a foto e falar.

1. A relação entre construtor, protótipo e instância

①+objeto

②+função+objeto+matriz

Depois de entendê -los, vamos discutir o que é uma cadeia de protótipos. Para ser franco, na verdade é uma cadeia finita formada entre um objeto de instância finito e um protótipo, usado para implementar atributos compartilhados e herança. Em seguida, vejamos o código para falar.

 var obj = new Object (); O objeto é um objeto de protótipo com um objeto de protótipo e um objeto de protótipo obj._proto _._ proto _._ proto _._ proto__proto_ também possui um objeto de protótipo. O protótipo objeto do objeto continua olhando para cima e você encontrará um exemplo de cadeia de protótipo nulo // var arr = []; arr -> Array.prototype -> object.prototype -> null var o = new Object (); o -> object.prototype -> null; function foo1 () {this.name1 = '1';} função foo2 () {this.name2 = '2';} foo2.prototype = new Foo1 (); function foo3 () {this.name = '3';} foo3.Prototype = new Foo2 (); var à

Em seguida é a questão da herança.

2. Herança

1) Herança do protótipo

 função animal (nome) {this.name = name; } função tiger (cor) {this.color = color; } // var tiger = new tiger ('amarelo'); // console.log (tiger.color); // console.log (tiger.name); // indefinido // tiger.prototype = new animal ('tigre'); // One Way Object.prototype.name = 'Big Tiger'; // a segunda maneira de var tigre = novo tigre ('amarelo'); console.log (tiger.color); console.log (tiger.name);

Vale a pena notar que existem dois problemas principais aqui: ① Não é conveniente passar parâmetros para o tipo pai; ② Os tipos de referência no tipo pai são compartilhados por todas as instâncias

2) ES5 fornece o método objeto.Create () para implementar a herança

 ― - Função compatível com Shim Shim Create (obj) {if (object.create) {return object.create (obj); } else {function foo () {} foo.prototype = obj; retornar novo foo (); }}

Este método é um novo recurso do ES5, que na verdade está copiando e herdando.

3) Copiar herança

 var obj = {}; obj.extend = function (obj) {for (var k em obj) {this [k] = obj [k]; }}

4) Heritância do construtor de empréstimos - os membros do protótipo no construtor emprestado não são emprestados

 função animal (nome) {this.name = name;} função mouse (apelido) {animal.call (this, 'mouse'); this.nickname = apelido;} var m = new Mouse ('jerry'); console.log (m.name); console.log (m.nickname);

Problema existente: pode resolver o problema de passar parâmetros na herança do protótipo, mas os membros (atributos e métodos) no objeto de protótipo no tipo pai não podem ser herdados para

5) O objeto de prototipo de herança combinado é dinâmico

 function pessoa (nome) {this.name = name;} person.prototype.showname = function () {console.log (this.name);} função aluno (nome, idade) {Person.Call (this, nome); this.age = Age;} Student.prototype = new Person (); Student.Prototype.Contrutor = Student; Student.Prototype.Showage = function () {Console.log (this.age);} var stU = novo ('Zhang San', 12);

[Herança de protótipo + herança do construtor de emprestado] Sua característica é que uma cópia dos atributos por instância e o método é compartilhado

[Resumo] Para colocá-lo em uma frase muito difícil, a chamada cadeia de protótipo é uma maneira de comportamento de encontrar uma mãe, e pode-se entender que os seres humanos nascem por seres humanos e os demônios nascem por demônios. Na verdade, existe apenas um núcleo da cadeia de protótipos: compartilhamento de atributos e controle independente. Quando a instância do seu objeto precisa de atributos independentes, a essência de todas as práticas é criar atributos na instância do objeto. Se você não pensa muito, pode definir diretamente os atributos independentes necessários pessoalmente para substituir as propriedades do protótipo. Em suma, ao usar a herança do protótipo, você deve prestar atenção especial aos atributos no protótipo, porque são todas as existências que afetam todo o corpo. O método mais comum agora é o modo de combinação.

1. Cadeia de protótipo

1) a relação entre construtor, protótipo e instância

①O construtor possui um protótipo de propriedade, que é um objeto (uma instância de um objeto). ②O objeto de protótipo possui um atributo construtor, que aponta para a função do construtor à qual o objeto de protótipo pertence. ③O objeto de instância possui um atributo _proto_, que também aponta para o objeto protótipo do construtor. É uma propriedade não padrão e não pode ser usada para programação. É usado pelo próprio navegador. 2) A relação entre protótipo e _proto_

① Prototipo é uma propriedade do construtor

②_proto_ é o atributo do objeto de instância

- Ambos apontam para o mesmo objeto

[Resumo] i) Funções também são objetos e objetos não são necessariamente funções;

ii) a essência de um objeto: um conjunto não ordenado de pares de valor-chave; Os valores nos pares de valor-chave podem ser valores de qualquer tipo de dados

iii) Objeto é um contêiner e o contêiner contém (propriedades e métodos)

3) Pesquisa de atributo

① Ao acessar um membro do objeto, você primeiro procurará se ele existe no objeto.

②Se não houver objeto atual, procure -o no protótipo objeto do construtor

③Se o objeto de protótipo não for encontrado, procure o protótipo do objeto Prototype

④ Saiba que o protótipo do objeto protótipo é nulo

2. Função

- Todas as funções são instâncias de função

① Objeto local: Objeto independente do ambiente do host (navegador) - incluindo objeto, matriz, data, regexp, função, erro, número, string, booleano

② Objetos internos - incluindo matemática e global (janela, que é uma variável global no JS), e o novo não é necessário ao usá -lo.

③ Host Objeto - incluindo objetos personalizados, DOM, BOM

O exposto acima é a descrição completa de como entender a cadeia de protótipo JS introduzida em você. Espero que seja útil para você. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a você a tempo. Muito obrigado pelo seu apoio ao site wulin.com!