Gráficos e textos explicam os objetos do protótipo e as cadeias de protótipo de JavaScript em detalhes

Para os recém -chegados, o protótipo JavaScript é uma coisa muito problemática. Primeiro, o protótipo é fácil de ser confundido com __proto__ e, segundo, as várias direções entre eles são realmente complicadas. De fato, já existem muitos artigos no mercado tentando deixar claro. Há uma chamada clássica com várias linhas desenhadas, conectando esta e essa. Para ser sincero, sinto -me muito tonto, muito menos entender completamente. Por isso, também quero tentar ver se consigo separar os pontos de conhecimento importantes no protótipo e explicá -lo claramente no formulário de gráfico mais simples.

Sabemos que o protótipo é um objeto através do qual outros objetos podem implementar a herança do atributo. Mas, além do protótipo, há outro __proto__ usado? Como as pessoas podem distingui -lo se parecem tão semelhantes? A quem eles estão apontando? Como você pode se lembrar do caos? Que diabos é a cadeia de protótipo? Acredito que muitos iniciantes que ainda têm alguma experiência podem não ser capazes de explicar completamente. A seguir, três imagens simples e alguns códigos de exemplo para entender.

1. A diferença entre protótipo e __proto__

 var a = {}; console.log (a.prototype); //undefinedConsole.log(a.__proto__); // objeto {} var b = function () {} console.log (b.prototype); // b {} console.log (b .__ proto__); // function () {}

 /*1. Método literal*/var a = {}; console.log (a .__ proto__); // objeto {} console.log (a .__ proto__ === a.constructor.prototype); // true/*2. Método construtor*/var a = function () {}; var a = novo a (); console.log (a .__ proto__); // a {} console.log (a .__ proto__ === a.constructor.prototype); // true/*3. Object.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); // false (esta é a exceção na Figura 1)

 var a = function () {}; var a = novo a (); console.log (a .__ proto__); // a {} (ou seja, o objeto de protótipo da função do construtor a) console.log (a .__ proto __.__ proto__); // objeto {} (ou seja, o objeto protótipo do objeto de função do construtor) console.log (a .__ Proto __.__ proto __.__ proto__); //nulo

O acima é tudo sobre este artigo. Este artigo usa três imagens para explicar os objetos do protótipo e as cadeias de protótipo de JavaScript. Espero que seja útil para todos ao aprender JavaScript.