__proto__ VS. protótipo em JavaScript

Esta figura mostra novamente que todo objeto tem um protótipo. A função de construtor Foo também possui a sua própria __proto__, Function.prototype, e que, por sua vez, também faz referência, por sua __proto__propriedade, novamente ao Object.prototype. Assim, repita, Foo.prototype é apenas uma propriedade explícita de Foo que se refere ao protótipo de objetos bec.

var b = new Foo(20);
var c = new Foo(30);

Quais são as diferenças entre __proto__e prototype?

A figura foi retirada de dmitrysoshnikov.com .

__proto__é o objeto real usado na cadeia de pesquisa para resolver métodos etc. prototypeé o objeto usado para criar __proto__quando você cria um objeto com new:

( new Foo ).__proto__ === Foo.prototype;
( new Foo ).prototype === undefined;

prototypeé uma propriedade de um objeto Function. É o protótipo de objetos construídos por essa função.

__proto__é propriedade interna de um objeto, apontando para seu protótipo. Os padrões atuais fornecem um Object.getPrototypeOf(O)método equivalente , embora o padrão de fato__proto__ seja mais rápido.

Você pode encontrar instanceofrelacionamentos comparando uma função prototypecom a __proto__cadeia de um objeto e pode quebrá-los alterando prototype.

function Point(x, y) {
    this.x = x;
    this.y = y;
}

var myPoint = new Point();

// the following are all true
myPoint.__proto__ == Point.prototype
myPoint.__proto__.__proto__ == Object.prototype
myPoint instanceof Point;
myPoint instanceof Object;

Aqui Pointestá uma função construtora, ela cria um objeto (estrutura de dados) processualmente. myPointé um objeto construído por Point()assim Point.prototypefica guardado para myPoint.__proto__naquele momento.

A propriedade prototype é criada quando uma função é declarada.

Por exemplo:

 function Person(dob){
    this.dob = dob
 }; 

Person.prototypeA propriedade é criada internamente quando você declara a função acima. Muitas propriedades podem ser adicionadas ao Person.prototype que são compartilhadas por instâncias de Person criadas usando new Person ().

// adds a new method age to the Person.prototype Object.
Person.prototype.age = function(){return date-dob}; 

Vale a pena notar que Person.prototypeé umObject por padrão, literal (pode ser alterado conforme necessário).

Toda instância criada usando new Person()possui uma __proto__propriedade que aponta para o Person.prototype. Essa é a cadeia usada para percorrer para encontrar uma propriedade de um objeto específico.

var person1 = new Person(somedate);
var person2 = new Person(somedate);

cria 2 instâncias de Person, esses 2 objetos podem chamar o agemétodo de Person.prototypecomo person1.age,person2.age .

Na figura acima da sua pergunta, você pode ver que Fooé um Function Objecte, portanto, ele possui um __proto__link para o Function.prototypequal, por sua vez, é uma instância Objecte possui um __proto__link para Object.prototype. O link proto termina aqui com __proto__o Object.prototypeapontar paranull .

Qualquer objeto pode ter acesso a todas as propriedades em sua cadeia de proto, conforme vinculado por __proto__ de protótipos, , formando a base para a herança prototípica.

__proto__ não é uma maneira padrão de acessar a cadeia de protótipos, a abordagem padrão, mas similar, é usar Object.getPrototypeOf(obj) .

Código abaixo para instanceof operador fornece uma melhor compreensão:

O instanceofoperador de classe de objeto retorna truequando um objeto é uma instância de uma classe, mais especificamente se Class.prototypefor encontrado na cadeia proto desse objeto, o objeto é uma instância dessa classe.

function instanceOf(Func){
  var obj = this;
  while(obj !== null){
    if(Object.getPrototypeOf(obj) === Func.prototype)
      return true;
    obj = Object.getPrototypeOf(obj);
  }
  return false;
}      

O método acima pode ser chamado como: instanceOf.call(object, Class)que retorna true se o objeto for uma instância da Class.

Uma boa maneira de pensar nisso é ...

prototypeé usado por constructor()funções. Deveria realmente ter sido chamado de algo como,"prototypeToInstall" , já que é isso que é.

e __proto__é esse "protótipo instalado" em um objeto (que foi criado / instalado no objeto a partir da referida constructor()função)

Para explicar, vamos criar uma função

 function a (name) {
  this.name = name;
 }

Quando o JavaScript executa esse código, ele adiciona prototypepropriedade a a, prototypeproperty é um objeto com duas propriedades:

1. constructor
2. __proto__

Então, quando fazemos

a.prototype retorna

     constructor: a  // function definition
    __proto__: Object

Agora, como você pode ver, constructornada mais é do que a aprópria função e __proto__aponta para o nível raizObject do JavaScript.

Vamos ver o que acontece quando usamos a afunção com newpalavra-chave.

var b = new a ('JavaScript');

Quando o JavaScript executa esse código, ele faz 4 coisas:

1. Ele cria um novo objeto, um objeto vazio // {}
2. Ele cria __proto__em be torna apontam para a.prototypeassimb.__proto__ === a.prototype
3. Ele é executado a.prototype.constructor(que é a definição da função a) com o objeto recém-criado (criado na etapa 1) como seu contexto (isto), portanto, a namepropriedade transmitida como 'JavaScript' (adicionada athis ) é adicionada ao objeto recém-criado.
4. Ele retorna o objeto recém-criado em (criado na etapa 1), para que var bseja atribuído ao objeto recém-criado.

Agora, se adicionarmos a.prototype.car = "BMW"e fizermos b.car , a saída "BMW" será exibida.

isso ocorre porque, quando o JavaScript executou esse código, ele procurou por carpropriedades b, ele não encontrou o JavaScript usado b.__proto__(que foi feito para apontar para 'a.prototype' na etapa 2) e encontra a carpropriedade, então retorne "BMW".

Protótipo VS. __proto__ VS. [[Protótipo]]

Ao criar uma função, um objeto de propriedade chamado prototype está sendo criado automaticamente (você não a criou por si mesmo) e está sendo anexado ao objeto da função (the constructor).
Nota : Este novo protótipo objeto de também aponta para, ou possui um link interno-privado, para o Objeto JavaScript nativo.

Exemplo:

function Foo () {
    this.name = 'John Doe';
}

// Foo has an object property called prototype.
// prototype was created automatically when we declared the function Foo.
Foo.hasOwnProperty('prototype'); // true

// Now, we can assign properties and methods to it:
Foo.prototype.myName = function () {
    return 'My name is ' + this.name;
}

Se você criar um novo objeto Foousando a newpalavra - chave, estará basicamente criando (entre outras coisas) um novo objeto que possui um link interno ou privado ao Fooprotótipo da função que discutimos anteriormente:

var b = new Foo();

b.[[Prototype]] === Foo.prototype  // true

Para ser mais específico, __proto__é na verdade uma função getter que pertence ao objeto JavaScript nativo. Ele retorna a ligação de protótipo interno-privado de qualquer que seja a thisligação (retorna a [[Prototype]]de b):

b.__proto__ === Foo.prototype // true

Vale ressaltar que, a partir de ECMAScript5, você também pode usar o método getPrototypeOf para obter a ligação privada interna:

Object.getPrototypeOf(b) === b.__proto__ // true

Para deixar um pouco claro, além das ótimas respostas acima:

function Person(name){
    this.name = name
 }; 

var eve = new Person("Eve");

eve.__proto__ == Person.prototype //true

eve.prototype  //undefined

As instâncias têm __proto__ , as classes têm protótipo .

Em JavaScript, uma função pode ser usada como construtor. Isso significa que podemos criar objetos a partir deles usando a nova palavra-chave. Toda função de construtor vem com um objeto interno encadeado com eles. Este objeto interno é chamado de protótipo.Instances of a constructor function use __proto__ to access the prototype property of its constructor function.

1. Primeiro, criamos um construtor: function Foo(){}. Para ser claro, Foo é apenas outra função. Mas podemos criar um objeto a partir dele com a nova palavra-chave. É por isso que chamamos de função construtora

2. Toda função possui uma propriedade única, chamada propriedade prototype. Portanto, a função Constructor Foopossui uma propriedade prototype que aponta para seu protótipo, que é Foo.prototype(veja a imagem).

3. As funções de construtor são elas próprias uma função que é uma instância de um construtor de sistema chamado construtor [[Function]]. Então, podemos dizer que function Fooé construído por um construtor [[Function]]. Então, __proto__do nosso Foo functionapontaremos para o protótipo de seu construtor, que é Function.prototype.

4. Function.prototypeO próprio é nada mais que um objeto construído a partir de outro construtor de sistema chamado [[Object]]. Então, [[Object]]é o construtor de Function.prototype. Então, podemos dizer que Function.prototypeé uma instância de [[Object]]. Então, __proto__de Function.prototypepontos para Object.prototype.

5. Object.prototypeé o último homem da cadeia de protótipos. Quero dizer, não foi construído. Já está lá no sistema. Portanto, __proto__aponta para null.

6. Agora chegamos a instâncias de Foo. Quando criamos uma instância usando new Foo(), ele cria um novo objeto do qual é uma instância Foo. Isso significa que Fooé o construtor dessas instâncias. Aqui criamos duas instâncias (x e y). __proto__de x e y, portanto, aponta para Foo.prototype.

Resumo:

A __proto__propriedade de um objeto é uma propriedade que mapeia para a prototypefunção construtora do objeto. Em outras palavras:

instance.__proto__ === constructor.prototype // true

Isso é usado para formar a prototypecadeia de um objeto. A prototypecadeia é um mecanismo de pesquisa de propriedades em um objeto. Se a propriedade de um objeto for acessada, o JavaScript procurará primeiro o próprio objeto. Se a propriedade não for encontrada lá, ela subirá atéprotochain até que seja encontrada (ou não)

Exemplo:

function Person (name, city) {
  this.name = name;
}

Person.prototype.age = 25;

const willem = new Person('Willem');

console.log(willem.__proto__ === Person.prototype); // the __proto__ property on the instance refers to the prototype of the constructor

console.log(willem.age); // 25 doesn't find it at willem object but is present at prototype
console.log(willem.__proto__.age); // now we are directly accessing the prototype of the Person function 

Nosso primeiro log resulta true, porque, como mencionado, a __proto__propriedade da instância criada pelo construtor se refere aoprototype propriedade do construtor. Lembre-se, em JavaScript, funções também são objetos. Os objetos podem ter propriedades, e uma propriedade padrão de qualquer função é uma propriedade chamada prototype.

Então, quando essa função é utilizada como uma função construtora, o objeto instanciado a partir dela receberá uma propriedade chamada __proto__. E essa __proto__propriedade se refere à prototypepropriedade da função construtora (que por padrão todas as funções possuem).

Por que isso é útil?

O JavaScript possui um mecanismo ao procurar propriedades nas Objectsquais é chamada 'herança prototípica' , eis o que basicamente faz:

• Primeiro, é verificado se a propriedade está localizada no próprio objeto. Nesse caso, essa propriedade é retornada.
• Se a propriedade não estiver localizada no próprio objeto, ela 'subirá o protochain'. Basicamente, analisa o objeto referido pela __proto__propriedade. Lá, ele verifica se a propriedade está disponível no objeto referido por __proto__.
• Se a propriedade não estiver localizada no __proto__objeto, ela subirá a __proto__cadeia, até o Objectobjeto.
• Se não conseguir encontrar a propriedade em nenhum lugar do objeto e sua prototypecadeia, ele retornará undefined.

Por exemplo:

function Person (name) {
  this.name = name;
}

let mySelf = new Person('Willem');

console.log(mySelf.__proto__ === Person.prototype);

console.log(mySelf.__proto__.__proto__ === Object.prototype);

Por acaso, estou aprendendo o protótipo de You Don't Know JS: this & Object Prototypes , que é um livro maravilhoso para entender o design abaixo e esclarecer muitos equívocos (é por isso que estou tentando evitar o uso de herança e coisas assim instanceof).

Mas eu tenho a mesma pergunta que as pessoas fizeram aqui. Várias respostas são realmente úteis e esclarecedoras. Eu também adoraria compartilhar meus entendimentos.

O que é um protótipo?

Objetos em JavaScript têm uma propriedade interna, indicada na especificação como [[Prototype]], que é simplesmente uma referência a outro objeto. Quase todos os objetos recebem um não-null valor para essa propriedade, no momento de sua criação.

Como obter o protótipo de um objeto?

via __proto__ouObject.getPrototypeOf

var a = { name: "wendi" };
a.__proto__ === Object.prototype // true
Object.getPrototypeOf(a) === Object.prototype // true

function Foo() {};
var b = new Foo();
b.__proto__ === Foo.prototype
b.__proto__.__proto__ === Object.prototype

Qual é o prototype?

prototypeé um objeto criado automaticamente como uma propriedade especial de uma função , usada para estabelecer a cadeia de delegação (herança), também conhecida como cadeia de protótipo.

Quando criamos uma função a, prototypeé automaticamente criado como uma propriedade especial sobre ae salva o código de função em que o constructoron prototype.

function Foo() {};
Foo.prototype // Object {constructor: function}
Foo.prototype.constructor === Foo // true

Eu adoraria considerar essa propriedade como o local para armazenar as propriedades (incluindo métodos) de um objeto de função. Essa também é a razão pela qual funções utilitárias em JS são definidas como Array.prototype.forEach(),Function.prototype.bind() ,Object.prototype.toString().

Por que enfatizar a propriedade de uma função ?

{}.prototype // undefined;
(function(){}).prototype // Object {constructor: function}

// The example above shows object does not have the prototype property.
// But we have Object.prototype, which implies an interesting fact that
typeof Object === "function"
var obj = new Object();

Assim, Arary, Function, Objectestão todas as funções. Devo admitir que isso atualiza minha impressão em JS. Eu sei que funções são cidadãos de primeira classe em JS, mas parece que ele é construído sobre funções.

Qual é a diferença entre __proto__e prototype?

__proto__uma referência funciona em cada objeto para se referir à sua [[Prototype]]propriedade.

prototypeé um objeto criado automaticamente como uma propriedade especial de uma função , usada para armazenar as propriedades (incluindo métodos) de um objeto de função.

Com esses dois, podemos mapear mentalmente a cadeia de protótipos. Como esta figura ilustra:

function Foo() {}
var b = new Foo();

b.__proto__ === Foo.prototype // true
Foo.__proto__ === Function.prototype // true
Function.prototype.__proto__ === Object.prototype // true

'use strict'
function A() {}
var a = new A();
class B extends A {}
var b = new B();
console.log('====='); // =====
console.log(B.__proto__ === A); // true
console.log(B.prototype.__proto__ === A.prototype); // true
console.log(b.__proto__ === B.prototype); // true
console.log(a.__proto__ === A.prototype); // true
console.log(A.__proto__ === Function.__proto__); // true
console.log(Object.__proto__ === Function.__proto__); // true
console.log(Object.prototype === Function.__proto__.__proto__); // true
console.log(Object.prototype.__proto__ === null); // true

Em JavaScript, todo objeto (a função também é objeto!) Tem uma __proto__propriedade, a propriedade é referência ao seu protótipo.

Quando usamos o newoperador com um construtor para criar um novo objeto, a __proto__propriedade do novo objeto será definida com a prototypepropriedade do construtor; o construtor será chamado pelo novo objeto, nesse processo "this" será uma referência ao novo objeto no escopo do construtor, finalmente retorne o novo objeto.

O protótipo do construtor é __proto__propriedade, a prototypepropriedade do construtor é o trabalho com o newoperador.

O construtor deve ser uma função, mas a função nem sempre é construtora, mesmo que tenha prototypepropriedade.

A cadeia de protótipos na verdade é __proto__propriedade do objeto para fazer referência ao seu protótipo, e a __proto__propriedade do protótipo para fazer referência ao protótipo do protótipo e assim por diante, até fazer referência à __proto__propriedade do protótipo do objeto que é referência a nulo.

Por exemplo:

console.log(a.constructor === A); // true
// "a" don't have constructor,
// so it reference to A.prototype by its ``__proto__`` property,
// and found constructor is reference to A

[[Prototype]]e __proto__propriedade é realmente a mesma coisa.

Podemos usar o método getPrototypeOf do Object para obter o protótipo de algo.

console.log(Object.getPrototypeOf(a) === a.__proto__); // true

Qualquer função que escrevemos pode ser usada para criar um objeto com o newoperador, para que qualquer uma dessas funções possa ser um construtor.

Outra boa maneira de entender isso:

var foo = {}

/* 
foo.constructor is Object, so foo.constructor.prototype is actually 
Object.prototype; Object.prototype in return is what foo.__proto__ links to. 
*/
console.log(foo.constructor.prototype === foo.__proto__);
// this proves what the above comment proclaims: Both statements evaluate to true.
console.log(foo.__proto__ === Object.prototype);
console.log(foo.constructor.prototype === Object.prototype);

Somente após o IE11 __proto__ser suportado. Antes dessa versão, como o IE9, você poderia usar o constructorpara obter o __proto__.

protótipo

prototype é uma propriedade de uma Function. É o modelo para criar objetos usando essa função (construtora) com a nova palavra-chave.

__proto__é usado na cadeia de pesquisa para resolver métodos, propriedades. quando um objeto é criado (usando a função construtora com a nova palavra-chave), __proto__é definido como (Construtor) Function.prototype

function Robot(name) {
    this.name = name;
}
var robot = new Robot();

// the following are true   
robot.__proto__ == Robot.prototype
robot.__proto__.__proto__ == Object.prototype

Aqui está minha explicação (imaginária) para esclarecer a confusão:

Imagine que exista uma classe imaginária (blueprint / coockie cutter) associada à função. Essa classe imaginária é usada para instanciar objetos. prototypeé o mecanismo de extensão (método de extensão em C # ou extensão rápida) para adicionar itens a essa classe imaginária.

function Robot(name) {
    this.name = name;
}

O acima pode ser imaginado como:

// imaginary class
class Robot extends Object{

    static prototype = Robot.class  
    // Robot.prototype is the way to add things to Robot class
    // since Robot extends Object, therefore Robot.prototype.__proto__ == Object.prototype

    var __proto__;

    var name = "";

    // constructor
    function Robot(name) {

        this.__proto__ = prototype;
        prototype = undefined;

        this.name = name;
    }

} 

Assim,

var robot = new Robot();

robot.__proto__ == Robot.prototype
robot.prototype == undefined
robot.__proto__.__proto__ == Object.prototype

Agora adicionando método ao prototypedo Robot:

Robot.prototype.move(x, y) = function(x, y){ Robot.position.x = x; Robot.position.y = y};
// Robot.prototype.move(x, y) ===(imagining)===> Robot.class.move(x, y)

O acima pode ser imaginado como extensão da classe Robot:

// Swift way of extention
extension Robot{
    function move(x, y){    
        Robot.position.x = x; Robot.position.y = y
    }
}

Que por sua vez,

// imaginary class
class Robot{

    static prototype = Robot.class // Robot.prototype way to extend Robot class
    var __proto__;

    var name = "";

    // constructor
    function Robot(name) {

        this.__proto__ = prototype;
        prototype = undefined;

        this.name = name;
    }

    // added by prototype (as like C# extension method)
    function move(x, y){ 
        Robot.position.x = x; Robot.position.y = y
    };
}

Simplificando:

> var a = 1
undefined
> a.__proto__
[Number: 0]
> Number.prototype
[Number: 0]
> Number.prototype === a.__proto__
true

Isso permite anexar propriedades ao X.prototype após a instanciação de objetos do tipo X, e eles ainda terão acesso a essas novas propriedades através da referência __proto__ que o mecanismo Javascript usa para percorrer a cadeia de protótipos.

Prototype ou Object.prototype é uma propriedade de um objeto literal. Ele representa o objeto de protótipo de objeto que você pode substituir para adicionar mais propriedades ou métodos ao longo da cadeia de protótipos.

__proto__ é uma propriedade do acessador (função get e set) que expõe o protótipo interno de um objeto através do qual ele é acessado.

Referências:

1. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype

2. http://www.w3schools.com/js/js_object_prototypes.asp

3. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/proto

Eu sei, estou atrasado, mas deixe-me tentar simplificá-lo.

Digamos que existe uma função

    function Foo(message){

         this.message = message ; 
     };

     console.log(Foo.prototype);

A função Foo terá um objeto protótipo vinculado. Portanto, sempre que criamos uma função em JavaScript, ela sempre tem um objeto de protótipo vinculado a ela.

Agora vamos em frente e crie dois objetos usando a função Foo.

    var a = new Foo("a");
    var b = new Foo("b");
    console.log(a.message);
    console.log(b.message);

1. Agora temos dois objetos, objeto ae objeto b. Ambos são criados usando o construtor Foo. Lembre-se de que construtor é apenas uma palavra aqui.
2. Os objetos aeb têm uma cópia da propriedade da mensagem.
3. Esses dois objetos aeb estão vinculados ao objeto de protótipo do construtor Foo.
4. Nos objetos aeb, podemos acessar o protótipo Foo usando a propriedade proto em todos os navegadores e no IE podemos usar Object.getPrototypeOf (a) ou Object.getPrototypeOf (b)

Agora, Foo.prototype, a. proto e b. proto tudo indica o mesmo objeto.

    b.__proto__ === Object.getPrototypeOf(a);
    a.__proto__ ===  Foo.prototype;
    a.constructor.prototype  === a.__proto__;

tudo acima retornaria verdadeiro.

Como sabemos, no JavaScript, as propriedades podem ser adicionadas dinamicamente. Podemos adicionar propriedade ao objeto

    Foo.prototype.Greet = function(){

         console.log(this.message);
    }
    a.Greet();//a
    b.Greet();//b
    a.constructor.prototype.Greet();//undefined 

Como você vê, adicionamos o método Greet () no Foo.prototype, mas ele pode ser acessado em aeb ou em qualquer outro objeto construído usando Foo.

Ao executar a.Greet (), o JavaScript primeiro pesquisará Greet no objeto a na lista de propriedades. Ao não encontrar, ele subirá na cadeia proto de a. Desde um. proto e Foo.prototype é o mesmo objeto, o JavaScript encontrará o método Greet () e o executará.

Espero que agora protótipo e proto sejam um pouco simplificados.

Exemplo explicativo:

function Dog(){}
Dog.prototype.bark = "woof"

let myPuppie = new Dog()

agora, myPupppie possui uma __proto__propriedade que aponta para Dog.prototype.

> myPuppie.__proto__
>> {bark: "woof", constructor: ƒ}

mas myPuppie NÃO possui uma propriedade prototype.

> myPuppie.prototype
>> undefined

Portanto, __proto__de mypuppie é a referência à propriedade .prototype da função construtora que foi usada para instanciar esse objeto (e o atual objeto myPuppie possui um "delegado para" o relacionamento com este__proto__ ), enquanto a propriedade .prototype de myPuppie está simplesmente ausente (desde nós não o definimos).

Boa explicação por MPJ ​​aqui: proto vs prototype - Criação de Objetos em JavaScript

Fiz para mim um pequeno desenho que representa o seguinte trecho de código:

var Cat = function() {}
var tom = new Cat()

Eu tenho um histórico clássico de OO, portanto, foi útil representar a hierarquia dessa maneira. Para ajudá-lo a ler este diagrama, trate os retângulos na imagem como objetos JavaScript. E sim, funções também são objetos. ;)

Objetos em JavaScript têm propriedades e __proto__é apenas um deles.

A idéia por trás dessa propriedade é apontar para o objeto ancestral na hierarquia (herança).

O objeto raiz no JavaScript é Object.prototypee todos os outros objetos são descendentes deste. A __proto__propriedade do objeto raiz é null, que representa o fim da cadeia de herança.

Você notará que isso prototypeé uma propriedade das funções. Caté uma função, mas também Functione Objectsão funções (nativas). tomnão é uma função, portanto, não possui essa propriedade.

A idéia por trás dessa propriedade é apontar para um objeto que será usado na construção, ou seja, quando você chama o newoperador nessa função.

Observe que os objetos protótipos (retângulos amarelos) têm outra propriedade chamada constructorque aponta de volta para o respectivo objeto de função. Por razões de brevidade, isso não foi descrito.

De fato, quando criamos o tomobjeto com new Cat(), o objeto criado terá a __proto__propriedade definida como o prototypeobjeto da função construtora.

No final, vamos brincar um pouco com esse diagrama. As seguintes afirmações são verdadeiras:

• tom.__proto__A propriedade aponta para o mesmo objeto que Cat.prototype.

• Cat.__proto__aponta para o Function.prototypeobjeto, como Function.__proto__e Object.__proto__faz.

• Cat.prototype.__proto__e tom.__proto__.__proto__aponte para o mesmo objeto e é isso Object.prototype.

Felicidades!

DEFINIÇÕES

(número entre parênteses () é um 'link' para o código que está escrito abaixo)

prototype- um objeto que consiste em:
=> funções (3) deste particular ConstructorFunction.prototype(5) acessíveis por cada objeto (4) criado ou a ser criado através dessa função construtora (1)
=> a própria função construtora (1) )
=> __proto__deste objeto em particular (objeto de protótipo)

__proto__ (dandor proto?) - um link ENTRE qualquer objeto (2) criado por meio de uma função específica do construtor (1) E as propriedades do objeto de protótipo (5) desse construtor que permitem que cada objeto criado (2) tenha acesso às funções do protótipo e métodos (4) (__proto__ por padrão, está incluído em todos os objetos em JS)

ESCLARECIMENTO DE CÓDIGO

1

    function Person (name, age) {
        this.name = name;
        this.age = age;  

    } 

2)

    var John = new Person(‘John’, 37);
    // John is an object

3)

    Person.prototype.getOlder = function() {
        this.age++;
    }
    // getOlder is a key that has a value of the function

4)

    John.getOlder();

5)

    Person.prototype;

Vou tentar uma explicação da quarta série:

As coisas são muito simples. A prototypeé um exemplo de como algo deve ser construído. Assim:

• Sou um functione construo novos objetos semelhantes aos meusprototype

• Eu sou um objecte fui construído usando o meu __proto__como exemplo

prova :

function Foo() { }

var bar = new Foo()

// `bar` is constructed from how Foo knows to construct objects
bar.__proto__ === Foo.prototype // => true

// bar is an instance - it does not know how to create objects
bar.prototype // => undefined

Toda função que você cria tem uma propriedade chamada prototypee ela inicia sua vida como um objeto vazio. Esta propriedade é inútil até que você use essa função como função construtora, ou seja, com a palavra-chave 'new'.

Isso geralmente é confundido com a __proto__propriedade de um objeto. Alguns podem ficar confusos e, exceto que a prototypepropriedade de um objeto pode obter o proto de um objeto. Mas este não é o caso. prototypeé usado para obter o __proto__objeto criado a partir de um construtor de função.

No exemplo acima:

function Person(name){
    this.name = name
}; 

var eve = new Person("Eve");

console.log(eve.__proto__ == Person.prototype) // true
// this is exactly what prototype does, made Person.prototype equal to eve.__proto__

Eu espero que faça sentido.

Que tal usar __proto__para métodos estáticos?

function Foo(name){
  this.name = name
  Foo.__proto__.collection.push(this)
  Foo.__proto__.count++

}

Foo.__proto__.count=0
Foo.__proto__.collection=[]

var bar = new Foo('bar')
var baz = new Foo('baz')

Foo.count;//2
Foo.collection // [{...}, {...}]
bar.count // undefined

(function(){ 
      let a = function(){console.log(this.b)};
      a.prototype.b = 1;
      a.__proto__.b = 2;
      let q = new a();
      console.log(a.b);
      console.log(q.b) 
    })()

Experimente este código para entender

Há apenas um objeto usado para encadeamento protípico. Obviamente, esse objeto tem um nome e um valor: __proto__é seu nome e prototypeé seu valor. Isso é tudo.

para facilitar ainda mais a compreensão, veja o diagrama na parte superior deste post (diagrama de dmitry soshnikov), você nunca encontrará __proto__pontos para outra coisa senãoprototype seu valor.

A essência é a seguinte: __proto__é o nome que faz referência ao objeto prototípico e prototypeé o objeto prototípico real.

É como dizer:

let x = {name: 'john'};

xé o nome do objeto (ponteiro) e {name: 'john'}é o objeto real (valor dos dados).

NOTA: esta é apenas uma dica massivamente simplificada de como eles estão relacionados em um nível alto.

Atualização: Aqui está um exemplo simples de javascript concreto para melhor ilustração:

let x = new String("testing") // Or any other javascript object you want to create

Object.getPrototypeOf(x) === x.__proto__; // true

Isso significa que, quando Object.getPrototypeOf(x)o valor real de x(qual é o seu protótipo), é exatamente o que o __proto__de xestá apontando. Portanto, __proto__está de fato apontando para o protótipo de x. Assim, faz __proto__referência x(ponteiro de x) e prototypeé o valor de x(seu protótipo).

Espero que esteja um pouco claro agora.

Essa é uma pergunta muito importante e relevante para quem deseja entender a herança prototípica. Pelo que entendi, o protótipo é atribuído por padrão quando um objeto é criado com o novo de uma função porque Function possui um objeto de protótipo por definição:

function protofoo(){
}
var protofoo1 = new protofoo();
console.log(protofoo.prototype.toString()); //[object Object]

Quando criamos um objeto comum sem novo, ou seja, explicitamente a partir de uma função, ele não possui protótipo, mas possui um proto vazio ao qual pode ser atribuído um protótipo.

var foo={
  check: 10
};
console.log(foo.__proto__); // empty
console.log(bar.prototype); //  TypeError
foo.__proto__ = protofoo1; // assigned
console.log(foo.__proto__); //protofoo

Podemos usar Object.create para vincular um objeto explicitamente.

// we can create `bar` and link it to `foo`
var bar = Object.create( foo );
bar.fooprops= "We checking prototypes";
console.log(bar.__proto__); // "foo"
console.log(bar.fooprops); // "We checking prototypes"
console.log(bar.check); // 10 is delegated to `foo`

__proto__é a base para construir prototypee uma função construtora, por exemplo: function human(){}has, prototypeque é compartilhada via __proto__na nova instância da função construtora. Uma leitura mais detalhada aqui

Como isso afirmou corretamente

__proto__é o objeto real usado na cadeia de pesquisa para resolver métodos, etc. prototype é o objeto usado para criar __proto__quando você cria um objeto com new:

( new Foo ).__proto__ === Foo.prototype;
( new Foo ).prototype === undefined;

Podemos observar ainda que a __proto__propriedade de um objeto criado usando o construtor de funções aponta para o local da memória apontado pelo protótipo propriedade desse respectivo construtor.

Se alterarmos o local da memória do protótipo da função construtora, o __proto__objeto derivado continuará apontando para o espaço de endereço original. Portanto, para disponibilizar propriedades comuns na cadeia de herança, sempre acrescente propriedades ao protótipo de função do construtor , em vez de reinicializá-lo (o que alteraria seu endereço de memória).

Considere o seguinte exemplo:

function Human(){
    this.speed = 25;
}

var himansh = new Human();

Human.prototype.showSpeed = function(){
    return this.speed;
}

himansh.__proto__ === Human.prototype;  //true
himansh.showSpeed();    //25

//now re-initialzing the Human.prototype aka changing its memory location
Human.prototype = {lhs: 2, rhs:3}

//himansh.__proto__ will still continue to point towards the same original memory location. 

himansh.__proto__ === Human.prototype;  //false
himansh.showSpeed();    //25

meu entendimento é: __proto__ e prototype são todos servidos para a técnica de cadeia de protótipos. a diferença é que funções nomeadas com sublinhado (como __proto__) não são direcionadas a desenvolvedores chamados explicitamente. em outras palavras, eles são apenas para alguns mecanismos, como herdar etc. são 'back-end'. mas funções nomeadas sem sublinhado são projetadas para serem chamadas explicitamente, elas são 'front-end'.

!!! ESTA É A MELHOR EXPLICAÇÃO DO MUNDO !!!!!

var q = {}
var prototype = {prop: 11}

q.prop // undefined
q.__proto__ = prototype
q.prop // 11

no mecanismo javascript dos construtores de funções chama isso q.__proto__ = prototypeautomaticamente quando escrevemos new Classe no __proto__conjunto de propsClass.prototype

function Class(){}
Class.prototype = {prop: 999} // set prototype as we need, before call new

var q = new Class() // q.__proto__ = Class.prototype
q.prop // 999

Desfrutar %)