我碰巧从You Don't Know JS: this & Object prototyping中学习原型，这是一本很好的书，可以理解设计的底层，澄清许多误解(这就是为什么我试图避免使用继承和instanceof之类的东西)。

但我和这里的人有同样的问题。有几个答案真的很有帮助，很有启发性。我也很乐意分享我的理解。

什么是原型?

JavaScript中的对象有一个内部属性，在规范中表示为[[Prototype]]，它只是对另一个对象的引用。几乎所有对象在创建时都会被赋予这个属性的非空值。

如何获得一个对象的原型?

通过__proto__或Object.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

原型是什么?

原型是作为函数的特殊属性自动创建的对象，用于建立委托(继承)链，即原型链。

当我们创建一个函数a时，prototype会自动作为a上的一个特殊属性创建，并将上的函数代码保存为prototype上的构造函数。

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

我想把这个属性作为存储函数对象的属性(包括方法)的地方。这也是JS中的实用函数被定义为Array.prototype.forEach()、Function.prototype.bind()、Object.prototype.toString()的原因。

为什么要强调函数的性质?

{}.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();

Arary, Function, Objectare都是函数。我必须承认，这刷新了我对JS的印象。我知道函数是JS中的一等公民，但它似乎是建立在函数之上的。

__proto__和prototype有什么区别?

__proto__a引用作用于每个对象以引用其[[Prototype]]属性。

Prototype是作为函数的特殊属性自动创建的对象，用于存储函数对象的属性(包括方法)。

有了这两个，我们可以在脑海中绘制出原型链。如图所示:

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

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

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

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。

干杯!

对于静态方法使用__proto__怎么样?

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

对于任何想要了解原型继承的人来说，这都是一个非常重要的问题。根据我的理解，默认情况下，当从函数中使用new创建对象时，prototype会被赋值，因为function定义了prototype对象:

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

当我们创建一个普通的对象，没有new，即显式地从一个函数，它没有原型，但它有一个空的原型，可以分配一个原型。

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

我们可以使用Object。创建以显式链接对象。

// 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__是用于查找链的实际对象 原型是用来构建的对象 当你用new创建一个对象时: (新的Foo)。__proto__ === Foo.prototype; (新的Foo)。原型=== undefined;

我们可以进一步注意到，使用函数构造函数创建的对象的__proto__属性指向相应构造函数的prototype属性所指向的内存位置。

如果我们改变构造函数的prototype的内存位置，派生对象的__proto__仍将继续指向原始地址空间。因此，要使公共属性沿着继承链向下可用，总是将属性附加到构造函数函数原型，而不是重新初始化它(这会改变它的内存地址)。

考虑下面的例子:

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

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

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。