我的理解是:__proto__和prototype都是为原型链技术服务的。区别在于以下划线命名的函数(如__proto__)根本不是开发人员显式调用的目标。换句话说，它们只是用于继承等机制，它们是“后端”。但是不带下划线的函数是为显式调用而设计的，它们是“前端”。

Prototype VS. __proto__ VS. [[Prototype]]

在创建函数时，会自动创建一个名为prototype的属性对象(不是您自己创建的)，并将其附加到函数对象(构造函数)。注意:这个新的原型对象也指向本机JavaScript对象，或者有一个内部私有链接。

例子:

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;
}

如果你使用new关键字从Foo中创建一个新对象，你基本上是在创建一个新对象，它有一个内部或私有的链接到我们之前讨论过的函数Foo的原型:

var b = new Foo();

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

到该函数对象的私有链接称为双括号prototype或[[prototype]]。许多浏览器为我们提供了一个公共链接，称为__proto__!

更具体地说，__proto__实际上是一个属于原生JavaScript对象的getter函数。它返回this绑定的内部私有原型链接(返回b的[[prototype]]):

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

值得注意的是，ECMAScript5的启动，你也可以使用getPrototypeOf方法来获得内部的私有链接:

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

注意:这个答案并不打算涵盖创建新对象或新构造函数的整个过程，而是帮助更好地理解__proto__、prototype和[[prototype]]以及它是如何工作的。

另一种理解它的好方法是:

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);

仅当支持IE11 __proto__后。在那个版本之前，比如IE9，你可以使用构造函数来获取__proto__. dll。

解释性的例子:

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

let myPuppie = new Dog()

现在，myPupppie有__proto__属性指向Dog.prototype。

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

但是mypuppy没有原型属性。

> myPuppie.prototype
>> undefined

因此，mypuppie的__proto__是对用于实例化此对象的构造函数的.prototype属性的引用(当前mypuppie对象与此__proto__对象具有“委托”关系)，而mypuppie的.prototype属性则根本不存在(因为我们没有设置它)。

MPJ的解释很好: 在JavaScript中创建对象

'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

在JavaScript中，每个对象(函数也是对象!)都有__proto__属性，该属性是对其原型的引用。

当我们使用new操作符和构造函数一起创建一个新对象时， 新对象的__proto__属性将被设置为构造函数的prototype属性， 然后构造函数将由new对象调用， 在这个过程中，“this”将是构造函数作用域中对新对象的引用，最终返回新对象。

构造函数的prototype是__proto__属性，构造函数的prototype属性是work with new操作符。

构造函数必须是函数，但函数并不总是构造函数，即使它具有prototype属性。

Prototype chain实际上是对象的__proto__属性，用于引用其原型， 以及原型的__proto__属性来引用原型的原型，等等， 直到引用Object的原型的__proto__属性，该属性引用为null。

例如:

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]]和__proto__属性实际上是一样的。

我们可以使用Object的getPrototypeOf方法来获取某个对象的原型。

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

我们编写的任何函数都可以用new操作符创建一个对象， 这些函数中的任何一个都可以是构造函数。

一种很好的思考方式是……

Prototype用于构造函数。它真的应该被称为“prototypeToInstall”，因为它就是这样的。

__proto__是对象上的“已安装原型”(由上述构造函数()函数创建/安装在对象上)