En detalle los gráficos y los textos explican los objetos prototipo y las cadenas prototipo de JavaScript

Para los recién llegados, JavaScript Prototype es algo muy problemático. Primero, el prototipo es fácil de confundir con __proto__, y segundo, las diversas direcciones entre ellos son realmente complicadas. De hecho, ya hay muchos artículos en el mercado tratando de dejarlo en claro. Hay una llamada imagen clásica con varias líneas dibujadas, conectando esta y esa. Para ser honesto, me siento muy mareado, y mucho menos lo entiendo completamente. Así que también quiero probarlo yo mismo para ver si puedo separar los puntos de conocimiento importantes en el prototipo y explicarlo claramente en la forma de gráfico más simple.

Sabemos que el prototipo es un objeto a través del cual otros objetos pueden implementar la herencia de atributos. Pero además del prototipo, ¿se usa otro __proto__? ¿Cómo pueden las personas distinguirlo si se ven tan similares? ¿A quién señalan? ¿Cómo puedes recordar el caos? ¿Qué demonios es la cadena prototipo? Creo que muchos principiantes que incluso tienen alguna experiencia pueden no ser capaces de explicarlo por completo. Las siguientes son tres imágenes simples y algunos códigos de ejemplo para comprender.

1. La diferencia entre prototipo y __proto__

 var a = {}; console.log (a.prototype); //undefinedconsole.log(a.__proto__); // objeto {} var b = function () {} console.log (b.prototype); // b {} console.log (b .__ proto__); //función() {}

 /*1. Método literal*/var a = {}; console.log (a .__ proto__); // objeto {} console.log (a .__ proto__ === A.Constructor.Prototype); // verdadero/*2. Método constructor*/var a = function () {}; var a = new a (); console.log (a .__ proto__); // a {} console.log (a .__ proto__ === a.constructor.prototype); // Verdadero/*3. Objeto.create () método*/var a1 = {a: 1} var a2 = object.create (a1); console.log (a2 .__ proto__); // objeto {a: 1} console.log (a .__ proto__ === A.Constructor.Prototype); // falso (esta es la excepción en la Figura 1)

 var a = function () {}; var a = new a (); console.log (a .__ proto__); // a {} (es decir, el objeto prototipo de la función del constructor a) console.log (a .__ Proto __.__ Proto__); // objeto {} (es decir, el objeto prototipo de la función de la función del constructor) console.log (a .__ Proto __.__ Proto __.__ Proto__); //nulo

Lo anterior se trata de este artículo. Este artículo utiliza tres imágenes para explicar los objetos prototipo y las cadenas prototipo de JavaScript. Espero que sea útil para todos cuando aprendan JavaScript.