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

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__是用于查找链的实际对象 原型是用来构建的对象 当你用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 a = 1
undefined
> a.__proto__
[Number: 0]
> Number.prototype
[Number: 0]
> Number.prototype === a.__proto__
true

这允许你在X类型的对象实例化之后将属性附加到X.prototype，并且它们仍然可以通过javascript引擎使用的__proto__引用访问这些新属性。

对于静态方法使用__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

！！!这是世界上最好的解释!!!!!

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

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

在函数构造函数中，当我们编写新Class时，javascript引擎会自动调用这个q.__proto__ = prototype，并在__proto__道具中设置Class.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

享受%)