__proto__VS. JavaScript中的原型

为了让它有点清楚除了上面的伟大的答案：

function Person(name){this.name = name};
var eve = new Person("Eve");
eve.__proto__ == Person.prototype //true
eve.prototype  //undefined

实例有__proto__，类有原型。

简单地说：

> var a = 1undefined> a.__proto__[Number: 0]> Number.prototype[Number: 0]> Number.prototype === a.__proto__true

这允许您将属性附加到X.prototype在实例化了X类型的对象之后，它们仍然可以通过Javascript引擎用于向上走原型链的__proto__引用访问这些新属性。

原型或Object.prototype是对象文字的属性。它表示对象原型对象，您可以覆盖它以在原型链上进一步添加更多属性或方法。

__proto__是一个访问器属性（get和set函数），它通过访问对象公开对象的内部原型。

参考文献：

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

var q = {}var prototype = {prop: 11}
q.prop // undefinedq.__proto__ = prototypeq.prop // 11

在函数构造函数中，当我们写入new Class时，javascript引擎会自动调用此q.__proto__ = prototype，并在__proto__ prop setClass.prototype中

function Class(){}Class.prototype = {prop: 999} // set prototype as we need, before call new
var q = new Class() // q.__proto__ = Class.prototypeq.prop // 999

享受%）

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

让我们说有一个功能

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

1. 现在我们有两个对象，对象a和对象b。都被创建了使用构造函数Foo。请记住，构造函数在这里只是一个词。
2. 对象a和b都有一个消息属性的副本。
3. 这两个对象a和b链接到构造函数Foo的原型对象。
4. 在对象a和b上，我们可以在所有浏览器中使用__proto__属性访问Foo原型，在IE中，我们可以使用Object.get原型（a）或Object.get原型（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();//ab.Greet();//ba.constructor.prototype.Greet();//undefined

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

在执行a. Greet（）时，JavaScript将首先在属性列表中的对象a中搜索Greet。如果找不到，它将在a__proto__链中上升。由于.__proto__和Foo.prototype是同一个对象，JavaScript将找到Greet（）方法并执行它。

我希望，现在原型和__proto__简化了一点。

在JavaScript中，函数可以用作构造函数。这意味着我们可以使用new关键字从它们中创建对象。每个构造函数都带有一个与它们链接的内置对象。这个内置对象称为原型。Instances of a constructor function use __proto__ to access the prototype property of its constructor function.

1. 首先我们创建了一个构造函数：function Foo(){}。需要明确的是，Foo只是另一个函数。但我们可以使用new关键字从中创建一个对象。这就是为什么我们称之为构造函数

2. 每个函数都有一个称为原型属性的唯一属性。因此，构造函数Foo有一个原型属性指向它的原型，即Foo.prototype（见图）。

3. 构造函数本身就是一个函数，它是称为[[Function]]构造函数的系统构造函数的实例。所以我们可以说function Foo是由[[Function]]构造函数构造的。所以，我们Foo function中的__proto__将指向其构造函数的原型，即Function.prototype。

4. Function.prototype本身只不过是一个由另一个名为[[Object]]的系统构造函数构造的对象。所以，[[Object]]是Function.prototype的构造函数。所以，我们可以说Function.prototype是[[Object]]的一个实例。所以Function.prototype的__proto__指向Object.prototype。

5. Object.prototype是原型链中的最后一个人。我的意思是它还没有被构建。它已经在系统中了。所以它的__proto__指向null。

6. 现在我们来看看Foo的实例。当我们使用new Foo()创建一个实例时，它创建了一个新对象，它是Foo的实例。这意味着Foo是这些实例的构造函数。这里我们创建了两个实例（x和y）。x和y的__proto__因此指向Foo.prototype。

我会尝试一个四年级的解释：

事情很简单。Aprototype是应该如何构建的一个例子。所以：

• 我是function，我构建了与prototype类似的新对象

• 我是一个object，我是用我的__proto__作为例子构建的

证明：

function Foo() { }
var bar = new Foo()
// `bar` is constructed from how Foo knows to construct objectsbar.__proto__ === Foo.prototype // => true
// bar is an instance - it does not know how to create objectsbar.prototype // => undefined

为了解释，让我们创建一个函数

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

当JavaScript执行此代码时，它将prototype属性添加到a，prototype属性是一个具有两个属性的对象：

1. constructor
2. __proto__

所以当我们这么做的时候

a.prototype返回

     constructor: a  // function definition__proto__: Object

现在你可以看到constructor只是函数a本身__proto__指向JavaScript的根级别Object。

让我们看看当我们使用a函数和new关键字时会发生什么。

var b = new a ('JavaScript');

当JavaScript执行这段代码时，它会做4件事：

1. 它创建一个新对象，一个空对象//{}
2. 它在b上创建__proto__并使其指向a.prototype因此b.__proto__ === a.prototype
3. 它以新创建的对象（在步骤a中创建）作为其上下文（this）执行a.prototype.constructor（这是函数a的定义），因此作为“JavaScript”传递的name属性（添加到this）被添加到新创建的对象中。
4. 它返回新创建的对象（在步骤#1中创建），因此varb被分配给新创建的对象。

现在如果我们添加a.prototype.car = "BMW"并做b.car，输出“BMW”出现。

这是因为当JavaScript执行此代码时，它在b上搜索car属性，它没有找到然后JavaScript使用b.__proto__（在步骤b.__proto__中指向“a.prototype”）并找到car属性，因此返回“BMW”。

您创建的每个函数都有一个名为prototype的属性，它的生命开始时是一个空对象。在您将此函数用作构造函数（即使用'new'关键字）之前，此属性毫无用处。

这通常与对象的__proto__属性混淆。有些人可能会感到困惑，除了对象的prototype属性可能会让他们获得对象的原型。但事实并非如此。prototype用于获取从函数构造函数创建的对象的__proto__。

在上面的例子中：

function Person(name){this.name = name};
var eve = new Person("Eve");
console.log(eve.__proto__ == Person.prototype) // true// this is exactly what prototype does, made Person.prototype equal to eve.__proto__

我希望这有道理。

定义

（括号内的数字（）是下面编写的代码的“链接”）

prototype-一个包含以下内容的对象：
=>函数（3）每个都可以访问的特定ConstructorFunction.prototype（5）通过此构造函数（1）创建或将要创建的对象（4）
=>构造函数本身（1）
=>这个特定对象的__proto__（原型对象）

__proto__（dandor proto？）-通过特定构造函数（1）创建的任何对象（2）之间的链接，以及该构造函数的原型对象的属性（5），允许每个创建的对象（2）访问原型的函数和方法（4）（__proto__默认包含在JS中的每个对象中）

代码澄清

1.

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

2.

    var John = new Person(‘John’, 37);// John is an object

3.

    Person.prototype.getOlder = function() {this.age++;}// getOlder is a key that has a value of the function

4.

    John.getOlder();

5.

    Person.prototype;

我碰巧从你不知道JS：这个和对象原型学习原型，这是一本很好的书，可以理解下面的设计并澄清这么多误解（这就是为什么我试图避免使用继承和instanceof之类的东西）。

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

什么是原型？

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

如何获取对象的原型？

通过__proto__或Object.getPrototypeOf

var a = { name: "wendi" };a.__proto__ === Object.prototype // trueObject.getPrototypeOf(a) === Object.prototype // true
function Foo() {};var b = new Foo();b.__proto__ === Foo.prototypeb.__proto__.__proto__ === Object.prototype

prototype是什么？

prototype是作为函数的特殊属性自动创建的对象，用于建立委托（继承）链，也称为原型链。

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

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 thattypeof Object === "function"var obj = new Object();

所以，Arary、Function、Object都是函数。我应该承认这刷新了我对JS的印象。我知道函数在JS中是一等公民，但似乎它是建立在函数之上的。

__proto__和prototype有什么区别？

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

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

有了这两个，我们可以在精神上绘制出原型链。就像这张图所示：

function Foo() {}var b = new Foo();
b.__proto__ === Foo.prototype // trueFoo.__proto__ === Function.prototype // trueFunction.prototype.__proto__ === Object.prototype // true

原型

原型是函数的一个属性。它是通过使用带有new关键字的（构造函数）函数创建对象的蓝图。

__proto__

__proto__在查找链中用于解析方法、属性。当创建对象时（使用带有new关键字的构造函数），__proto__设置为（构造函数）Function.prototype

function Robot(name) {this.name = name;}var robot = new Robot();
// the following are truerobot.__proto__ == Robot.prototyperobot.__proto__.__proto__ == Object.prototype

以下是我的（假想的）解释，以澄清混淆：

假设有一个与函数相关联的虚构类（蓝图/饼干切割器）。那个虚构的类用于实例化对象。prototype是扩展机制（C#中的扩展方法，或Swift扩展），用于向该虚构类添加内容。

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

以上可以想象为：

// imaginary classclass Robot extends Object{
static prototype = Robot.class// Robot.prototype is the way to add things to Robot class// since Robot extends Object, therefore Robot.prototype.__proto__ == Object.prototype
var __proto__;
var name = "";
// constructorfunction Robot(name) {
this.__proto__ = prototype;prototype = undefined;
this.name = name;}
}

所以，

var robot = new Robot();
robot.__proto__ == Robot.prototyperobot.prototype == undefinedrobot.__proto__.__proto__ == Object.prototype

现在将方法添加到Robot的prototype：

Robot.prototype.move(x, y) = function(x, y){ Robot.position.x = x; Robot.position.y = y};// Robot.prototype.move(x, y) ===(imagining)===> Robot.class.move(x, y)

以上可以想象为Robot类的扩展：

// Swift way of extentionextension Robot{function move(x, y){Robot.position.x = x; Robot.position.y = y}}

反过来，

// imaginary classclass Robot{
static prototype = Robot.class // Robot.prototype way to extend Robot classvar __proto__;
var name = "";
// constructorfunction Robot(name) {
this.__proto__ = prototype;prototype = undefined;
this.name = name;}
// added by prototype (as like C# extension method)function move(x, y){Robot.position.x = x; Robot.position.y = y};}

如何使用__proto__作为静态方法？

function Foo(name){this.name = nameFoo.__proto__.collection.push(this)Foo.__proto__.count++
}
Foo.__proto__.count=0Foo.__proto__.collection=[]
var bar = new Foo('bar')var baz = new Foo('baz')
Foo.count;//2Foo.collection // [{...}, {...}]bar.count // undefined

__proto__是构造prototype和构造函数的基础，例如：function human(){}有prototype，它在构造函数的新实例中通过__proto__共享。更详细的阅读这里

(function(){let a = function(){console.log(this.b)};a.prototype.b = 1;a.__proto__.b = 2;let q = new a();console.log(a.b);console.log(q.b)})()

尝试此代码以了解

'use strict'function A() {}var a = new A();class B extends A {}var b = new B();console.log('====='); // =====console.log(B.__proto__ === A); // trueconsole.log(B.prototype.__proto__ === A.prototype); // trueconsole.log(b.__proto__ === B.prototype); // trueconsole.log(a.__proto__ === A.prototype); // trueconsole.log(A.__proto__ === Function.__proto__); // trueconsole.log(Object.__proto__ === Function.__proto__); // trueconsole.log(Object.prototype === Function.__proto__.__proto__); // trueconsole.log(Object.prototype.__proto__ === null); // true

在JavaScript中，每个对象（函数也是对象！）都有一个__proto__属性，该属性是对其原型的引用。

当我们使用new运算符和构造函数来创建一个新对象时，新对象的__proto__属性将使用构造函数的prototype属性设置，然后构造函数将被新对象调用，在该过程中，“this”将是对构造函数范围内新对象的引用，最后返回新对象。

Constructor的原型是__proto__属性，Constructor的prototype属性与new运算符一起使用。

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

原型链实际上是对象的__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的getOritypeOf方法来获取某物的原型。

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

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

总结：

对象的__proto__属性是映射到对象构造函数的prototype的属性。换句话说：

instance.__proto__ === constructor.prototype // true

这用于形成对象的prototype链。prototype链是对象属性的查找机制。如果访问了对象的属性，JavaScript将首先查看对象本身。如果在那里找不到该属性，它将一直爬到protochain，直到找到（或没有找到）

示例：

function Person (name, city) {this.name = name;}
Person.prototype.age = 25;
const willem = new Person('Willem');
console.log(willem.__proto__ === Person.prototype); // the __proto__ property on the instance refers to the prototype of the constructor
console.log(willem.age); // 25 doesn't find it at willem object but is present at prototypeconsole.log(willem.__proto__.age); // now we are directly accessing the prototype of the Person function 

我们的第一个日志结果是true，这是因为如前所述，构造函数创建的实例的__proto__属性指的是构造函数的prototype属性。请记住，在JavaScript中，函数也是对象。对象可以有属性，任何函数的默认属性都是一个名为原型的属性。

然后，当这个函数被用作构造函数时，从它实例化的对象将收到一个名为__proto__的属性。这个__proto__属性指的是构造函数的prototype属性（默认情况下每个函数都有）。

为什么这个有用？

JavaScript在查找Objects上的属性时有一种机制，称为原型继承，这是它的基本功能：

• 首先，检查属性是否位于对象本身上。如果是，则返回此属性。
• 如果属性不位于对象本身，它将“爬上原型链”。它基本上查看__proto__属性引用的对象。在那里，它检查属性是否在__proto__引用的对象上可用。
• 如果属性不在__proto__对象上，它将爬上__proto__链，一直爬到Object对象。
• 如果它在对象及其prototype链的任何位置都找不到属性，它将返回undefined。

例如：

function Person (name) {this.name = name;}
let mySelf = new Person('Willem');
console.log(mySelf.__proto__ === Person.prototype);
console.log(mySelf.__proto__.__proto__ === Object.prototype);

解释性示例：

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

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

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

但是myPuppie没有原型属性。

> myPuppie.prototype>> undefined

因此，myPuppie的__proto__是用于实例化此对象的构造函数的.原型属性的参考（并且当前myPuppie对象与此__proto__对象具有“委托”关系），而myPuppie的.原型属性根本不存在（因为我们没有设置它）。

MPJ在这里做出了很好的解释：原型与原型-JavaScript中的对象创建