Tutorial básico de aprendizagem sobre herança de protótipo em javascript

Na maioria das linguagens de programação, existem classes e objetos e uma classe pode herdar outras classes.

No JavaScript, a herança é baseada em protótipo, o que significa que não há classes no JavaScript e, em vez disso, um objeto herda outro objeto. :)

1. Herança, o proto

Em JavaScript, quando um objeto Rabbit herda outro animal de objeto, significa que haverá uma propriedade especial no objeto de coelho: Rabbit .__ Proto__ = Animal;

Ao acessar um objeto de coelho, se o intérprete não conseguir encontrar a propriedade em coelho, ele seguirá a cadeia __proto__ para pesquisar no objeto animal

O atributo __proto__ em castanhas é acessível apenas no Chrome e no Firefox. Por favor, veja uma castanha:

 var animal = {Eats: true} var rabbit = {jumps: true} coelho .__ proto__ = animal // herança (rabbit.eats) // true

O atributo EATS é acessado de um objeto animal.

Se o atributo tiver sido encontrado no objeto de coelho, o atributo proto não será verificado.

Vamos ter outra castanha. Quando há também um atributo EATS na subclasse, a classe pai não será acessada.

 var animal = {Eats: true} var fedUprabbit = {Eats: false} feduprabbit .__ proto__ = alerta animal (feduprabbit.eats) // false

Você também pode adicionar uma função no animal e ele também pode ser acessado em coelho.

 var animal = {Eat: function () {alert ("estou cheio") this.full = true}} var rabbit = {jump: function () { / * algo * /}} rabbit .__ proto__ = animal

(1) coelho.eat ():

A função Rabbit.eat () é executada nas duas etapas a seguir:

Primeiro, o intérprete procura o coelho. Não há função de comer no coelho, por isso olha para cima ao longo do coelho .__ Proto__ e o encontrou em animais.

A função é executada com este = coelho. Este valor não tem nada a ver com o atributo __proto__.

Então isso.full = verdadeiro no coelho:

Vamos ver quais novas descobertas fizemos aqui. Um objeto chama a função pai, mas isso ainda aponta para o próprio objeto, que é a herança.

O objeto referenciado por __proto__ é chamado de protótipo, e o animal é o protótipo de coelho (nota do tradutor: este é o atributo __proto__ do coelho refere -se ao atributo de protótipo do animal)

(2) Pesquise ao ler, não ao escrever

Ao ler um objeto, como este.prop, o intérprete procura propriedades em seu protótipo.

Ao definir um valor de atributo, como este.prop = valor, não há razão para pesquisar, e esse atributo (prop) será adicionado diretamente a esse objeto (é isso). Excluir obj.prop é semelhante, ele exclui apenas as propriedades do próprio objeto e as propriedades no protótipo permanecem intactas.

(3) Sobre Proto

Se você estiver lendo o guia, aqui chamamos __proto__, que é representado no guia como [[protótipo]]. Ambos os colchetes são importantes porque há outra propriedade chamada protótipo.

2. Object.create, object.getProTypeOf

__Proto__ é uma propriedade não padrão fornecida pelo Chrome/Firefox e permanece invisível em outros navegadores.

Todos os navegadores modernos, exceto ópera (ou seja, 9), suportam duas funções padrão para lidar com problemas de protótipo:

 Object.Ceate (Prop [, Props])

Crie um objeto vazio com o proto dado:

 var animal = {Eats: true} coelho = object.create (animal) alerta (rabbit.eats) // true

O código acima cria um objeto de coelho vazio e o protótipo é definido como animal

Depois que o objeto de coelho é criado, podemos adicionar propriedades a ele:

 var animal = {Eats: true} coelho = object.create (animal) coelho.jumps = true

O segundo parâmetro da função Object.Creat é opcional, que permite que as propriedades sejam definidas como novos objetos. Isso é omitido por causa da herança de nosso relacionamento.

(1) Object.GetPrototypeOf (OBJ)

Retorna o valor de obj .__ proto__. Esta função é padrão e pode ser usada em navegadores que não podem acessar diretamente o atributo __proto__.

 var animal = {Eats: true} coelho = object.create (animal) alerta (object.getprototypeof (coelho) === animal) // true

Os navegadores modernos permitem a leitura de valores de atributos __proto__, mas não podem ser definidos.

3. O protótipo

Existem algumas boas maneiras de navegador cruzado de definir o atributo __proto__, que usará as funções do construtor. lembrar! Qualquer função cria um objeto através da nova palavra -chave.

Uma castanha:

 function rabbit (nome) {this.name = nome} var rabbit = new Rabbit ('John') alerta (rabbit.name) // john

A nova operação define as propriedades do protótipo para a propriedade __proto__ do objeto de coelho.

Vamos dar uma olhada em seu princípio, por exemplo, um novo objeto de coelho, que herda o animal.

 var animal = {Eats: true} function rabbit (nome) {this.name = name} rabbit.prototype = animalvar rabbit = new Rabbit ('John') Alert (Rabbit.eats) // verdadeiro, porque Rabbit .__ Proto__ == Animal

Rabbit.prototype = Animal Literal Means: Set __proto__ = Animal para todos os objetos criados por novo coelho

4.

Object.Create (Prop) A função é poderosa porque permite a herança direta de um determinado objeto. Pode ser simulado pelo seguinte código:

 function herd (proto) {function f () {} f.prototype = proto retornar novo f}

Herito (animal) é exatamente equivalente ao objeto.Crere (animal), retorna um objeto vazio e objeto .__ proto__ = animal.

Uma castanha:

 var animal = {Eats: true} var rabbit = alerta (animal) (rabbit.eats) // truealert (rabbit.HasownProperty ('Eats')) // FALSO, do protótipo

Vamos dar uma olhada em qual é o seu princípio:

 function herd (proto) {função f () {} // (1) f.prototype = proto // (2) retorna new f () // (3)}

(1) Uma nova função foi criada e a função não definiu nenhum atributo para isso; portanto, `novo f` criará um objeto vazio.

(2) `f.prototype` está definido como proto

(3) `new` f cria um objeto vazio, o objeto` __proto__ = f.prototype`

(4) Bingo! Temos um objeto vazio herdando `proto '

Esta função é amplamente utilizada em várias bibliotecas e estruturas.

Sua função aceita um objeto com opções

 / * As opções contêm configurações de menu: largura, altura etc */menu de função (opções) {// ...} Você deseja definir determinados menu da função de opções (opções) {options.width = options.width || 300 // Defina o valor padrão // ...}

. . . Mas alterar o valor do parâmetro pode produzir alguns resultados errados, pois as opções podem ser usadas no código externo. Uma solução é clonar o objeto Opções, copiar todos os atributos em um novo objeto e modificá -lo no novo objeto.

Como resolver esse problema com a herança? As opções do PS podem adicionar configurações, mas não podem ser excluídas.

Solução

Você pode herdar opções e modificar ou adicionar novas propriedades em sua subclasse.

 function herd (proto) {função f () {} f.prototype = proto retornar novo f} função menu (options) {var opts = herd (opções) opts.width = opts.width || 300 // ...}

Todas as operações são válidas apenas em subobjetos. Quando o método do menu termina, o código externo ainda pode usar objetos de opções não modificadas. Excluir operação é muito importante aqui. Se a largura for uma propriedade em um protótipo, excluir opts.width não terá nenhum efeito

5. HasownProperty

Todos os objetos têm a função HasownProperty, que pode ser usada para detectar se uma propriedade é a própria ou um protótipo.

Uma castanha:

 function rabbit (nome) {this.name = nome} rabbit.prototype = {Eats: true} var rabbit = new Rabbit ('john') alerta (rabbit.HasownProperty ('Eats')) // FALSO, no object (Rabbit.HasownProperty ('Name')) // verdade

6. Looping com/sem propriedades herdadas

para .. em loop, emite todas as propriedades de um objeto, incluindo seu próprio e protótipo.

 function rabbit (name) {this.name = nome} rabbit.prototype = {Eats: true} var rabbit = new Rabbit ('John') para (var p em coelho) {alert (p + "=" + rabbit [p]) // produz "nome" e "eats"}}}

Use o HasownProperty para filtrar as propriedades do objeto:

 function rabbit (nome) {this.name = nome} rabbit.prototype = {Eats: true} var rabbit = new Rabbit ('John') para (var p em coelho) {if (! Rabbit.HasownProperty (P)) continue // filtra "Eats" ALERT (P + "=" + raci.

7. Resumo

Javascript implementa herança através de um atributo especial proto

Ao acessar as propriedades de um objeto, se o intérprete não conseguir encontrá -lo no objeto, ele continuará procurando as propriedades da função, isso aponta para o objeto, não seu protótipo.

Atribuir obj.prop = valor, exclua obj.prop

Gerenciar Proto:

Chrome e Firefox podem acessar diretamente o atributo __proto__ do objeto. A maioria dos navegadores modernos suporta acesso somente leitura usando object.getProTypeOf (OBJ).

Object.create (proto) pode gerar objetos infantis vazios com o proto fornecido ou obter a mesma função através do seguinte código:

 function herd (proto) {função f () {} f.prototype = proto retornar novo f ()}

Outros métodos:

para .. em loop, emite todas as propriedades de um objeto (incluindo seu próprio e protótipo) e a cadeia de protótipos do objeto.

Se um suporte de propriedade pertence ao objeto obj, obj.HasownProperty (Prop) retornará true, caso contrário, falsa.