将原型链分为两类可能会有所帮助。

考虑构造函数：

 function Person() {}

Object.getPrototypeOf（Person）的值是一个函数。事实上，它是Function.prototype。由于Person是作为一个函数创建的，所以它与所有函数共享相同的原型函数对象。与Person相同__proto__，但不应使用该属性。无论如何，使用Object.getPrototypeOf（Person），您可以有效地沿着所谓的原型链的阶梯前进。

向上的链条如下所示：

人员→ 功能.原型→ Object.prototype（终点）

重要的是，这个原型链与Person可以构造的对象关系不大。这些构造的对象有自己的原型链，而这个链可能和上面提到的对象没有共同的祖先。

以该对象为例：

var p = new Person();

p与Person没有直接的原型链关系。他们的关系是不同的。对象p有自己的原型链。使用Object.getPrototypeOf，您会发现链如下：

p型→ 人物原型→ Object.prototype（终点）

此链中没有函数对象（尽管可能是）。

所以Person似乎与两种链条有关，它们各自生活。要从一条链“跳”到另一条链，请使用：

.prototype：从构造函数的链跳到创建的对象的链。因此，此属性仅为函数对象定义（因为new只能用于函数）。构造函数：从创建的对象链跳到构造函数链。

以下是所涉及的两个原型链的可视化演示，以列表示：

总结如下：

prototype属性不提供主题原型链的信息，而是提供主题创建的对象的信息。

属性原型的名称会导致混淆，这并不奇怪。如果将此属性命名为prototypeOfConstructedInstance或类似的名称，可能会更清楚。

您可以在两个原型链之间来回跳转：

Person.prototype.constructor === Person

通过将不同的对象显式指定给原型属性，可以打破这种对称性（稍后将详细介绍）。

创建一个函数，获取两个对象

Person.prototype是在创建函数Person的同时创建的对象。它具有Person作为构造函数，即使该构造函数尚未实际执行。因此，同时创建了两个对象：

功能Person本身将函数作为构造函数调用时充当原型的对象

两者都是对象，但它们具有不同的角色：函数对象构造，而另一个对象表示函数将构造的任何对象的原型。原型对象将成为其原型链中构建对象的父对象。

由于函数也是一个对象，所以它在自己的原型链中也有自己的父级，但请记住这两个链是关于不同的事情的。

以下是有助于把握问题的一些等式——所有这些都是正确的：

函数Person（）｛｝；//这是构造函数（函数对象）的原型链信息：console.log（Object.getPrototypeOf（Person）==Function.prototype）；//在同一层次结构中更进一步：console.log（Object.getPrototypeOf（Function.prototype）==Object.proto原型）；console.log（Object.getPrototypeOf（Object.prototype）==null）；console.log（Person.__proto__==Function.prototype）；//这里我们交换通道，并查看构造函数的构造函数console.log（Person.constructor==函数）；console.log（函数的个人实例）；//Person.prototype由Person创建（创建时）//这里我们来回交换车道：console.log（Person.prototype.constructor==人员）；//虽然它不是它的一个实例：console.log（！（Person.prototype instanceof Person））；//实例是由构造函数创建的对象：var p=新角色（）；//类似于为构造函数显示的内容，这里我们有//构造函数创建的对象也是如此：console.log（Object.getPrototypeOf（p）==Person.prototype）；console.log（p.__proto__==Person.prototype）；//在这里，我们交换通道，并查看构造函数console.log（p.constructor==人员）；console.log（p instanceof Person）；

向原型链添加级别

虽然在创建构造函数函数时创建了原型对象，但可以忽略该对象，并为该构造函数创建的任何后续实例分配另一个应用作原型的对象。

例如：

function Thief() { }
var p = new Person();
Thief.prototype = p; // this determines the prototype for any new Thief objects:
var t = new Thief();

现在t的原型链比p长一步：

吨→ p→ 人物原型→ Object.prototype（终点）

另一个原型链不再长：Thief和Person是兄弟姐妹，在原型链中共享同一个父级：

个人}小偷}→ 功能.原型→ Object.prototype（终点）

之前展示的图形可以扩展到这一点（省略了最初的Thief.原型）：

蓝色线条表示原型链，其他彩色线条表示其他关系：

在对象及其构造函数之间在构造函数和将用于构造对象的原型对象之间

当构造函数创建对象时，该对象隐式引用构造函数的“prototype”属性以解析属性引用。构造函数的“prototype”属性可以由程序表达式constructor.prototype引用，添加到对象原型中的财产通过继承由共享原型的所有对象共享。

原型的七个Koan

当西罗·桑在深度冥想后下了火狐山时，他的头脑清晰而平静。

然而，他的手却坐立不安，自己抓起画笔，记下了下面的笔记。

---

0）两种不同的东西可以称为“原型”：

prototype属性，如obj.prototype原型内部属性，在ES5中表示为[[prototype]]。它可以通过ES5 Object.getPrototypeOf（）进行检索。Firefox可以通过__proto__属性作为扩展访问它。ES6现在提到了__proto__的一些可选要求。

---

1） 这些概念的存在是为了回答这个问题：

当我执行obj.properties时，JS在哪里查找.properties？

直觉上，经典继承应该会影响属性查找。

---

2)

__proto__用于点。在obj.properties中查找属性。.prototype不直接用于查找，而是间接用于查找，因为它在使用new创建对象时确定__proto__。

查找顺序为：

obj财产添加了obj.p=。。。或Object.defineProperty（obj，…）obj.__proto的财产__对象proto_.proto__的财产，依此类推如果某些__proto__为空，则返回undefined。

这就是所谓的原型链。

你可以避免。使用obj.hasOwnProperty（'key'）和Object.getOwnPropertyNames（f）查找

---

3） 设置对象__proto__的主要方法有两种：

新增：var F=函数（）｛｝var f=新f（）则new已设置：f.__proto__==f原型这就是使用原型的地方。对象创建：f=对象.create（proto）集合：f.__proto__==原型

---

4） 代码：

var F = function(i) { this.i = i }
var f = new F(1)

对应于下图（省略了一些数字内容）：

(Function)       (  F  )                                      (f)----->(1)
 |  ^             | | ^                                        |   i    |
 |  |             | | |                                        |        |
 |  |             | | +-------------------------+              |        |
 |  |constructor  | |                           |              |        |
 |  |             | +--------------+            |              |        |
 |  |             |                |            |              |        |
 |  |             |                |            |              |        |
 |[[Prototype]]   |[[Prototype]]   |prototype   |constructor   |[[Prototype]]
 |  |             |                |            |              |        |
 |  |             |                |            |              |        |
 |  |             |                | +----------+              |        |
 |  |             |                | |                         |        |
 |  |             |                | | +-----------------------+        |
 |  |             |                | | |                                |
 v  |             v                v | v                                |
(Function.prototype)              (F.prototype)                         |
 |                                 |                                    |
 |                                 |                                    |
 |[[Prototype]]                    |[[Prototype]]          [[Prototype]]|
 |                                 |                                    |
 |                                 |                                    |
 | +-------------------------------+                                    |
 | |                                                                    |
 v v                                                                    v
(Object.prototype)                                       (Number.prototype)
 | | ^
 | | |
 | | +---------------------------+
 | |                             |
 | +--------------+              |
 |                |              |
 |                |              |
 |[[Prototype]]   |constructor   |prototype
 |                |              |
 |                |              |
 |                | -------------+
 |                | |
 v                v |
(null)           (Object)

此图显示了许多语言预定义的对象节点：

无效的对象对象.原型作用功能.原型1.Number.prototype（可以用（1）找到__proto__，括号必须满足语法）

我们的两行代码只创建了以下新对象：

fFF.原型

i现在是f的属性，因为当你这样做时：

var f = new F(1)

它计算F，这是new将返回的值，然后将其分配给F。

---

5） 构造函数通常通过。查找：

f.constructor === F
!f.hasOwnProperty('constructor')
Object.getPrototypeOf(f) === F.prototype
F.prototype.hasOwnProperty('constructor')
F.prototype.constructor === f.constructor

当我们编写f.constructor时，JavaScript会执行。查找为：

f没有.构造函数f.__proto__==f.prototype具有构造函数==f，因此接受它

结果f.constructor==f直观上是正确的，因为f用于构造f，例如集合字段，与经典OOP语言中的情况非常相似。

---

6） 经典的继承语法可以通过操纵原型链来实现。

ES6添加了类并扩展了关键字，这些关键字主要是语法糖，用于之前可能的原型操作疯狂。

class C {
    constructor(i) {
        this.i = i
    }
    inc() {
        return this.i + 1
    }
}

class D extends C {
    constructor(i) {
        super(i)
    }
    inc2() {
        return this.i + 2
    }
}

// Inheritance syntax works as expected.
c = new C(1)
c.inc() === 2
(new D(1)).inc() === 2
(new D(1)).inc2() === 3

// "Classes" are just function objects.
C.constructor === Function
C.__proto__ === Function.prototype
D.constructor === Function
// D is a function "indirectly" through the chain.
D.__proto__ === C
D.__proto__.__proto__ === Function.prototype

// "extends" sets up the prototype chain so that base class
// lookups will work as expected
var d = new D(1)
d.__proto__ === D.prototype
D.prototype.__proto__ === C.prototype
// This is what `d.inc` actually does.
d.__proto__.__proto__.inc === C.prototype.inc

// Class variables
// No ES6 syntax sugar apparently:
// http://stackoverflow.com/questions/22528967/es6-class-variable-alternatives
C.c = 1
C.c === 1
// Because `D.__proto__ === C`.
D.c === 1
// Nothing makes this work.
d.c === undefined

没有所有预定义对象的简化图：

(c)----->(1)
 |   i
 |
 |
 |[[Prototype]]
 |
 |
 v    __proto__
(C)<--------------(D)         (d)
| |                |           |
| |                |           |
| |prototype       |prototype  |[[Prototype]] 
| |                |           |
| |                |           |
| |                | +---------+
| |                | |
| |                | |
| |                v v
|[[Prototype]]    (D.prototype)--------> (inc2 function object)
| |                |             inc2
| |                |
| |                |[[Prototype]]
| |                |
| |                |
| | +--------------+
| | |
| | |
| v v
| (C.prototype)------->(inc function object)
|                inc
v
Function.prototype

让我们花一点时间研究一下以下功能是如何工作的：

c = new C(1)
c.inc() === 2

第一行将c.i设置为1，如“4）”所述。

在第二行，当我们这样做时：

c.inc()

.inc是通过[[原型]]链找到的：c->c->c.Prototype->inc当我们将Javascript中的函数调用为X.Y（）时，Javascript会在Y（）函数调用中将其自动设置为等于X！

同样的逻辑也解释了d.inc和d.inc2。

这篇文章https://javascript.info/class#not-只是一个语法糖提到了值得了解的类的进一步影响。如果没有class关键字（TODO check which），其中一些可能无法实现：

[[FunctionKind]]：“classConstructor”，强制使用new调用构造函数：ES6类构造函数不能作为普通函数调用的原因是什么？类方法是不可枚举的。可以使用Object.defineProperty完成。类总是使用strict。可以通过显式使用strict for each函数来完成，这无疑是乏味的。

原型继承的概念对于许多开发人员来说是最复杂的概念之一。让我们试着理解问题的根源，以便更好地理解原型继承。让我们从一个简单的函数开始。

如果我们在Tree函数上使用一个新运算符，我们将其作为构造函数调用。

每个JavaScript函数都有一个原型。当你记录Tree.prototype时，你会。。。

如果查看上面的console.log（）输出，您可以看到Tree.prototype上的构造函数属性和__proto__属性。__proto__表示这个函数所基于的原型，由于这只是一个普通的JavaScript函数，还没有设置继承，所以它引用的是Object原型，它是JavaScript中刚刚内置的东西。。。

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

这包括.toString、.toValue、.hasOwnProperty等。。。

__我的mozilla带来的proto__已被弃用，取而代之的是Object.getPrototypeOf方法来获取对象的原型。

Object.getPrototypeOf(Tree.prototype); // Object {} 

让我们向Tree原型添加一个方法。

我们修改了Root并向其添加了一个函数分支。

这意味着当您创建Tree实例时，可以调用它的分支方法。

我们还可以向原型中添加原语或对象。

让我们在树中添加一个子树。

在这里，Child从Tree继承了它的原型，我们在这里做的是使用Object.create（）方法根据您传递的内容创建一个新对象，这里是Tree.prototype。在这种情况下，我们正在做的是将Child的原型设置为一个看起来与Tree原型相同的新对象。接下来，我们将Child的构造函数设置为Child，如果不设置，它将指向Tree（）。

孩子现在有了自己的原型，它的__proto__指向Tree，Tree的原型指向base Object。

Child  
|
 \
  \
   Tree.prototype
   - branch
   |
   |
    \
     \
      Object.prototype
      -toString
      -valueOf
      -etc., etc.

现在您创建了一个最初在Tree中可用的Child和call分支的实例。我们还没有在Child原型上定义分支。但是，在Child继承的Root原型中。

在JS中，一切都不是对象，一切都可以像对象一样。

Javascript有字符串、数字、布尔值、未定义、null等原语。它们不是对象（即引用类型），但肯定可以充当对象。让我们看一个例子。

在该列表的第一行中，为name指定了一个基本字符串值。第二行将名称视为对象，并使用点表示法调用charAt（0）。

这是幕后发生的事情：//JavaScript引擎的作用

String对象在被销毁之前只存在一个语句（一个称为自动装箱的过程）。让我们再次回到我们的原型继承。

Javascript支持基于原型。每个函数都有一个原型属性，该属性引用另一个对象财产/函数是从对象本身或通过原型链（如果不存在）

JS中的原型是一个对象，它使您成为另一个对象的父对象。授权意味着如果你不能做某事，你会告诉别人帮你做。

https://jsfiddle.net/say0tzpL/1/

如果您查找上面的fiddle，dog可以访问toString方法，但它在其中不可用，但可以通过委托给Object.prototype的原型链使用

如果您查看下面的一个，我们正在尝试访问每个函数中可用的调用方法。

https://jsfiddle.net/rknffckc/

如果您查找上面的fiddle，Profile Function可以访问调用方法，但它在其中不可用，但可以通过委托给Function.prototype的原型链使用

注意：prototype是函数构造函数的属性，而__proto__是从函数构造函数构造的对象的属性。每个函数都有一个原型属性，其值为空对象。当我们创建函数的实例时，我们得到一个内部属性[[Prototype]]或__proto__，其引用是function构造函数的原型。

上图看起来有点复杂，但展示了原型链接工作原理的全貌。让我们慢慢来：

有两个实例b1和b2，其构造函数是Bar，父实例是Foo，并且有两个来自原型链的方法通过Bar和Foo识别和说话

https://jsfiddle.net/kbp7jr7n/

如果你查阅上面的代码，我们有Foo构造函数，它有方法identify（），Bar构造函数有speak方法。我们创建了两个Bar实例b1和b2，它们的父类型是Foo。现在，在调用Bar的speak方法时，我们能够通过原型链识别谁在调用speak。

Bar现在拥有Foo的所有方法，这些方法都在其原型中定义。让我们进一步了解Object.prototype和Function.prototype以及它们之间的关系。如果您查找Foo的构造函数，Bar和Object是Function构造函数。

Bar的原型是Foo，Foo的原型是Object，如果仔细观察，Foo原型与Object.prototype相关。

在结束之前，让我们在这里用一小段代码来总结上面的内容。我们在这里使用instanceof运算符来检查对象的原型链中是否包含构造函数的prototype属性，该属性在下面概括了整个大型图。

我希望这是一些信息，我知道这类信息可能很难掌握。。。简单地说，它只是链接到对象的对象！！！！

每个对象都有一个内部属性[[Prototype]]，将其链接到另一个对象：

object [[Prototype]] → anotherObject

在传统javascript中，链接对象是函数的原型属性：

object [[Prototype]] → aFunction.prototype

某些环境将[[Prototype]]公开为__proto__：

anObject.__proto__ === anotherObject

创建对象时创建[[Prototype]]链接。

// (1) Object.create:
var object = Object.create(anotherObject)
// object.__proto__ = anotherObject

// (2) ES6 object initializer:
var object = { __proto__: anotherObject };
// object.__proto__ = anotherObject

// (3) Traditional JavaScript:
var object = new aFunction;
// object.__proto__ = aFunction.prototype

因此，这些陈述是等价的：

var object = Object.create(Object.prototype);
var object = { __proto__: Object.prototype }; // ES6 only
var object = new Object;

您实际上无法在新语句中看到链接目标（Object.prototype）；相反，目标由构造函数（Object）暗示。

记得：

每个对象都有一个链接[[Prototype]]，有时公开为__proto__。每个函数都有一个原型属性，最初持有一个空对象。使用new创建的对象链接到其构造函数的原型属性。如果函数从未用作构造函数，则其原型属性将不被使用。如果不需要构造函数，请使用Object.create而不是new。

原型允许您创建类。如果不使用原型，那么它将成为静态的。

这里有一个简短的例子。

var obj = new Object();
obj.test = function() { alert('Hello?'); };

在上面的例子中，您有静态函数调用测试。该函数只能由obj.test访问，您可以将obj想象为一个类。

其中如下代码所示

function obj()
{
}

obj.prototype.test = function() { alert('Hello?'); };
var obj2 = new obj();
obj2.test();

obj已成为一个现在可以实例化的类。可以存在多个obj实例，它们都具有测试功能。

以上是我的理解。我正在把它做成一个社区维基，所以如果我错了，人们可以纠正我。