我知道，我迟到了，但让我试着简化一下。

假设有一个函数

    function Foo(message){

         this.message = message ; 
     };

     console.log(Foo.prototype);

Foo函数将有一个原型对象链接。所以，无论何时我们在JavaScript中创建一个函数，它总是有一个原型对象链接到它。

现在让我们继续使用函数Foo创建两个对象。

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

现在我们有两个对象，对象a和对象b。它们都被创建了 使用构造函数Foo。记住，构造函数在这里只是一个词。 对象a和b都有message属性的副本。 这两个对象a和b链接到构造函数Foo的原型对象。 在对象a和b上，我们可以在所有浏览器中使用__proto__属性访问Foo prototype，在IE中我们可以使用Object.getPrototypeOf(a)或Object.getPrototypeOf(b)

现在,Foo。Prototype, a.__proto__和b.__proto__都表示同一个对象。

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

所有这些都将返回true。

如我们所知，在JavaScript中属性可以动态添加。我们可以向对象添加属性

    Foo.prototype.Greet = function(){

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

如你所见，我们在Foo中添加了Greet()方法。但它可以在a和b或任何其他使用Foo构造的对象中访问。

在执行a.Greet()时，JavaScript将首先在对象a的属性列表中搜索Greet。如果没有找到，它将在a. Since a.__proto__和Foo的__proto__链中上升。prototype是同一个对象，JavaScript会找到Greet()方法并执行它。

我希望，现在prototype和__proto__被简化了一点。

我为自己画了一个小图，代表以下代码片段:

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

我有经典的OO背景，所以用这种方式表示层次结构很有帮助。为了帮助您阅读此图表，请将图像中的矩形视为JavaScript对象。是的，函数也是对象。；）

JavaScript中的对象有属性，__proto__只是其中之一。

此属性背后的思想是指向(继承)层次结构中的祖先对象。

JavaScript的根对象是object。Prototype和所有其他对象都是这个对象的后代。根对象的__proto__属性为null，表示继承链的结束。

你会注意到原型是函数的属性。Cat是一个函数，但function和Object也是(本机)函数。Tom不是一个函数，因此它没有这个属性。

此属性背后的思想是指向一个将在构造中使用的对象，即当您在该函数上调用new操作符时。

注意，原型对象(黄色矩形)有另一个属性称为 构造函数，它指向各自的函数对象。为 简短的原因，这是没有描述。

实际上，当我们用new Cat()创建tom对象时，所创建的对象的__proto__属性将被设置为构造函数的原型对象。

最后，让我们稍微研究一下这个图表。以下陈述是正确的:

汤姆。__proto__属性指向与Cat.prototype相同的对象。 猫。__proto__指向函数。原型对象，就像函数一样。__proto__和Object。__proto__做。 Cat.prototype。__proto__和tom.__proto__。__proto__指向相同的对象，即object .prototype。

干杯!

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]]以及它是如何工作的。

__proto__是在查找链中用于解析方法的实际对象，prototype是在你用new创建对象时用于构建__proto__的对象:

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

除了以上这些精彩的答案外，我还想说得更清楚一点:

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

var eve = new Person("Eve");

eve.__proto__ == Person.prototype //true

eve.prototype  //undefined

实例有__proto__，类有prototype。

只有一个对象用于原型链接。该对象显然有一个名称和值:__proto__是它的名称，prototype是它的值。这是所有。

为了让它更容易理解，看看这篇文章顶部的图表(由dmitry soshnikov绘制的图表)，你永远不会发现__proto__的值指向prototype以外的其他东西。

要点是:__proto__是引用原型对象的名称，prototype是实际的原型对象。

这就像是在说:

let x = {name: 'john'};

X是对象名称(指针)，{name: 'john'}是实际对象(数据值)。

注意:这只是一个非常简单的提示，说明它们在较高的水平上是如何相互关联的。

更新:下面是一个简单具体的javascript示例，以便更好地说明:

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

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

这意味着当Object.getPrototypeOf(x)为我们获取x的实际值(这是它的原型)时，正是x的__proto__所指向的。因此__proto__确实指向x的原型。因此__proto__引用x (x的指针)，而prototype是x的值(它的原型)。

我希望现在大家都明白了。