Primeiro, compartilhe exemplos de herança do protótipo JS para sua referência. O conteúdo específico é o seguinte
1. Heritância do protótipo JS
<! Doctype html> <html> <head> <meta charset = "utf-8"> <title> js protótipo herança </tititle> </head> <body> <!-prototypes hereitância-> <script type = "text/javascript"> // clone () função é usada para criar um var para criar um var para criar um var para criar um var para criar um varej ("typen/jAdtynOne ()/functy) clones () e" typet)/funcript () <! {}; // Esta frase é o núcleo da herança do protótipo. O objeto de protótipo da função é o objeto literal_f.prototype = obj; retornar novo _f; } // Declare um objeto literal primeiro var animal = {Somththing: 'Apple', Eat: function () {console.log ("Eat" + this.somthing); }} // Não é necessário definir uma subclasse da pessoa, basta executar um clone de clonagem var = clone (animal); // Você pode obter diretamente o valor padrão fornecido pela pessoa ou pode adicionar ou modificar atributos e métodos console.log (cat.eat ()); Cat.somthing = 'Orange'; console.log (cat.eat ()); // Declare a subclasse e execute uma clonagem var alguém = clone (gato); </script> </body> </html>2. Princípio de trabalho do protótipo JavaScript Heritância
É sabido que o JavaScript adota a herança do protótipo, mas como fornece apenas uma instância da implementação, o novo operador, por padrão, a explicação dela é sempre confusa. Vamos explicar o que é a herança do protótipo e como usar a herança do protótipo em JavaScript.
Definição de herança de protótipo
Quando você lê a explicação sobre a herança do protótipo JS, geralmente vê o seguinte texto:
Ao procurar as propriedades de um objeto, o JavaScript atravessará a cadeia de protótipo para cima até que o atributo do nome fornecido seja encontrado. - Do jardim secreto de JavaScript
A maioria das implementações de JavaScript usa o atributo __proto__ para representar a cadeia de protótipo de um objeto. Neste artigo, veremos a diferença entre __proto__ e protótipo.
Nota: __Proto__ é um uso informal que não deve aparecer em seu código. Aqui, apenas o usamos para explicar como funciona o protótipo JavaScript.
O código a seguir mostra como o mecanismo JS procura propriedades:
função getProperty (obj, prop) {if (obj.HasownProperty (prop)) retorna obj [prop] else if (obj .__ proto__! == null) retornar getProperty (obj .__ proto__, prop) mais indefinido}Vamos dar um exemplo comum: um ponto bidimensional tem coordenadas bidimensionais XY, que é semelhante a ter um método de impressão.
Usando a definição de herança do protótipo que mencionamos antes, criamos um ponto de objeto com três propriedades: x, y e impressão. Para criar um novo ponto bidimensional, precisamos criar um novo objeto, para que seu atributo __proto__ aponte para o ponto:
var point = {x: 0, y: 0, print: function () {console.log (this.x, this.y); }}; var p = {x: 10, y: 20, __proto__: ponto}; p.print (); // 10 20Javascript PrototyPy Hereitância
O que é confuso é que ninguém que ensina a herança do protótipo fornecerá esse código, mas fornecerá o seguinte código:
ponto de função (x, y) {this.x = x; this.y = y; } Point.prototype = {print: function () {console.log (this.x, this.y); }}; var p = novo ponto (10, 20); p.print (); // 10 20Isso é diferente do que eu disse. Aqui o ponto se torna uma função e também há um atributo de protótipo, e há um novo operador. O que está acontecendo com isso?
Como o novo operador funciona
O criador Brendan Eich queria tornar o JS não muito diferente das linguagens de programação tradicionais orientadas a objetos, como Java e C ++. Nesses idiomas, usamos o novo operador para instanciar um novo objeto para a classe. Então ele escreveu um novo operador em JS.
Existe um conceito de construtor no C ++ para inicializar as propriedades da instância; portanto, o novo operador deve ser direcionado para funções.
Precisamos colocar o método de objeto em um só lugar. Como estamos usando o idioma do protótipo, o colocaremos nas propriedades do protótipo da função.
O novo operador aceita uma função f e seus parâmetros: novo F (argumentos ...). Este processo é dividido em três etapas:
Crie uma instância da classe. Esta etapa é definir a propriedade __proto__ de um objeto vazio como f.prototype.
Inicialize a instância. A função f é passada no parâmetro e chamada, e a palavra -chave que é definida para esta instância.
Retorna a instância.
Agora que sabemos como o novo funciona, podemos implementá -lo no código JS:
função new (f) {var n = {'__proto__': f.prototype}; /*Etapa 1*/ Função de retorno () {f.Apply (n, argumentos); /*Etapa 2*/ retornar n; /*Etapa 3*/}; }Um pequeno exemplo de sua situação de trabalho:
ponto de função (x, y) {this.x = x; this.y = y; } Point.prototype = {print: function () {console.log (this.x, this.y); }}; var p1 = novo ponto (10, 20); p1.print (); // 10 20 console.log (P1 InstanceOf Point); // verdadeiro var p2 = novo (ponto) (10, 20); p2.print (); // 10 20 console.log (P2 InstanceOf Point); // verdadeiroTrue Prototype Hereitância em JavaScript
A especificação ECMA da JS apenas nos permite usar o novo operador para herança de protótipo. Mas o grande mestre Douglas Crockford descobriu uma maneira de usar o novo para alcançar a verdadeira herança do protótipo! Ele escreveu o objeto. Crie a função da seguinte maneira:
Object.create = function (pai) {função f () {} f.prototype = pai; retornar novo f (); };Isso parece estranho, mas é bastante conciso: cria um novo objeto e protótica para qualquer valor que você queira definir. Se permitirmos __proto__, também podemos escrever isso:
Object.create = function (pai) {return {'__proto__': pai}; };O código a seguir permite que nosso ponto adote herança de protótipo real:
var point = {x: 0, y: 0, print: function () {console.log (this.x, this.y); }}; var p = object.create (ponto); px = 10; py = 20; p.print (); // 10 20para concluir
Aprendemos o que é a herança do protótipo JS e como o JS pode implementá -la de uma maneira específica. No entanto, o uso da herança de protótipo real (como Object.Create e __proto__) ainda tem as seguintes desvantagens:
Deficiência padrão: __ Proto__ não é um uso padrão ou mesmo um uso de desaprovação. Ao mesmo tempo, o objeto original.Create e a versão original escrita por Daoye também são diferentes.
Má otimização: seja o objeto nativo ou personalizado. Crie, seu desempenho é muito menor que o novo, e o primeiro é mais lento que 10 vezes mais lento que o último.
O exposto acima é tudo sobre este artigo, espero que seja útil para o aprendizado de todos.