javascript原型

by Pranav Jindal

通过普拉纳夫·金达尔

JavaScript的原型：古怪，但这是它的工作原理 (Prototype in JavaScript: it’s quirky, but here’s how it works)

The following four lines are enough to confuse most JavaScript developers:

以下四行足以使大多数JavaScript开发人员感到困惑：

Object instanceof Function//true

Object instanceof Object//true

Function instanceof Object//true

Function instanceof Function//true

Prototype in JavaScript is one of the most mind-boggling concepts, but you can’t avoid it. No matter how much you ignore it, you will encounter the prototype puzzle during your JavaScript life.

JavaScript中的原型是最令人难以置信的概念之一，但您无法避免。 无论您多么忽略它，您在JavaScript的生活中都会遇到原型难题。

So let’s face it head-on.

因此，让我们面对现实吧。

Starting with basics, there are following data types in JavaScript:

从基础开始，JavaScript中包含以下数据类型：

1. undefined未定义
2. null空值
3. number数
4. string串
5. boolean布尔值
6. object目的

First five are primitive data types. These store a value of their type such as a boolean, and can be true or false.

前五个是原始数据类型。 它们存储其类型的值(例如boolean)，并且可以为true或false 。

The last “object” is a reference type which we can describe as a collection of key-value pairs (but it is much more).

最后一个“对象”是一种引用类型，我们可以将其描述为键-值对的集合(但要多得多)。

In JavaScript, new objects are made using Object constructor function (or object literal {}) which provides generic methods like toString() and valueOf().

在JavaScript中，使用对象构造 函数 (或对象常量{} ) 创建了新对象，该函数提供了诸如toString()和valueOf()类的通用方法。

Functions in JavaScript are special objects which can be “called”. We make them and by using the Function constructor function (or function literal). The fact that these constructors are objects as well as function has always confused me, much in the same way the chicken-egg riddle confuses everyone.

JavaScript中的函数是可以“ 调用”的特殊对象。 我们通过使用Function构造函数 (或函数文字)来制作它们。 这些构造函数既是对象又是函数，这一事实始终使我感到困惑，就像鸡肉蛋之谜使所有人困惑一样。

Before starting with Prototypes, I want to clarify that there are two prototypes in JavaScript:

在开始原型之前，我想澄清一下JavaScript中有两个原型：

1. prototype: This is a special object which is assigned as property of any function you make in JavaScript. Let me be clear here, it is already present for any function you make, but not mandatory for internal functions provided by JavaScript (and function returned by bind). This prototype is the same object that is pointed to by the [[Prototype]](see below) of the a newly created object from that function (using new keyword).

   prototype ：这是一个特殊的对象，它被分配为您在JavaScript中所做的任何函数的属性。 在这里让我清楚一点，它对您创建的任何函数都已经存在，但对于JavaScript提供的内部函数(以及bind返回的函数)不是必需的。 该prototype与对象所指向的对象相同。 该函数中新创建的对象的[[Prototype]] (请参见下文)(使用new关键字)。

2. [[Prototype]]: This is a somehow-hidden property on every object which is accessed by the running context if some property which is being read on the object is not available. This property simply is a reference to the prototype of the function from which the object was made. It can be accessed in script using special getter-setter (topic for another day) called __proto__. There are other new ways to access this prototype, but for sake of brevity, I will be referring to [[Prototype]] using __proto__.

   [[Prototype]]：这是每个对象的某种隐藏属性，如果正在对象上读取的某些属性不可用，则运行上下文可以访问该对象。 该属性只是对prototype的引用 制成对象的功能。 可以使用名为__proto__特殊getter-setter (另一天的主题)以脚本的方式进行访问。 还有其他访问此原型的新方法，但是为了简洁起见，我将参考[[Prototype]] 使用__proto__ 。

var obj = {}var obj1 = new Object()

The above two statements are equal statements when used to make a new object, but a lot happens when we execute any of these statements.

上面的两个语句在用于创建新对象时是相等的语句，但是当我们执行其中的任何一条语句时，都会发生很多事情。

When I make a new object, it is empty. Actually it is not empty because it is an instance of the Object constructor, and it inherently gets a reference of prototype of Object, which is pointed to by the __proto__ of the newly created object.

当我制作一个新对象时，它是空的。 实际上，它不是空的，因为它是 Object 构造函数，并且固有地获取prototype的引用 的Object, __proto__指向的 新创建的对象。

If we look at the prototype of Object constructor function, it looks the same as the __proto__ of obj. In fact, they are two pointers referring to the same object.

如果我们看一下Object构造函数的prototype ，它看起来与obj.的__proto__相同obj. 实际上，它们是指向同一对象的两个指针。

obj.__proto__ === Object.prototype//true

Every prototype of a function has an inherent property called constructor which is a pointer to the function itself. In the case of Object function, the prototype has constructor which points back to Object.

每个prototype 功能的 具有一个称为constructor的固有属性，该属性是指向函数本身的指针。 对于Object函数， prototype具有constructor 指向Object 。

Object.prototype.constructor === Object//true

In the picture above, the left side is the expanded view of the Objectconstructor. You must be wondering what are all these other functions over it. Well, functions are objects, so they can have properties over them as other objects can.

在上图中，左侧是Object构造函数的展开图。 您一定想知道它上面的所有其他功能是什么。 函数是对象 ，因此它们可以像其他对象一样具有属性。

If you look closely, the Object (on left) itself has a __proto__ which means that Object must have been made from some other constructor which has a prototype. As Object is a function object, it must have been made using Function constructor.

如果仔细观察， Object (左侧)本身具有__proto__ 这意味着该Object 必须由其他具有prototype.构造函数制成prototype. 作为Object 是一个功能对象，它必须是使用Function制成的 构造函数。

__proto__ of Object looks same as prototype of Function.When I check the equality of both, they turn out to be the same objects.

__proto__ Object 看起来和Function prototype一样。 当我检查两者的相等性时，它们原来是相同的对象。

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

If you look closely, you will see the Function itself has a __proto__ which means that Function constructor function must have been made from some constructor function which has a prototype. As Function itself is a function, it must have been made using Function constructor, that is, itself. I know that sounds weird but when you check it, it turns out to be true.

如果仔细观察，您会看到Function 本身有一个__proto__ 这意味着Function 构造函数 必须由具有prototype某些构造函数制成。 作为Function 本身是一个函数 ，它必须是使用Function制成的 构造函数，即本身。 我知道这听起来很怪异，但是当您检查它时，事实证明它是真实的。

The __proto__ of Function and prototype of Function are in fact two pointers referring to the same object.

__proto__ Function和prototype Function 是 实际上，两个指针指向同一个对象。

Function.prototype === Function.__proto__\\true

As mentioned earlier, the constructor of any prototype should point to the function that owns that prototype. The constructor of prototype of Function points back to Function itself.

如前所述，任何prototype的constructor 应该指向拥有该prototype.的函数prototype. constructor prototype Function 指向Function本身。

Function.prototype.constructor === Function\\true

Again, the prototype of Function has a __proto__ .Well, that’s no surprise… prototype is an object, it can have one. But notice also that it points to the prototype of Object.

再次， prototype Function 有一个__proto__ 嗯，这并不奇怪…… prototype是一个对象，它可以有一个。 但还要注意，它指向prototype Object 。

Function.prototype.__proto__ == Object.prototype\\true

So we can have a master map here:

所以我们可以在这里有一个主地图：

instanceof Operatora instanceof b

The instanceof operator looks for the object b pointed to by any of the constructor(s) of chained __proto__ on a. Read that again! If it finds any such reference it returns true else false.

的 instanceof 运算符寻找对象b 指向 任何的constructor (多个) 的链式__proto__ 上a 。 再读一遍！ 如果找到任何此类引用，则返回true 否则为false 。

Now we come back to our first four instanceof statements. I have written corresponding statements that make instanceof return true for the following:

现在我们回到我们的前四个instanceof 陈述。 我写了相应的语句，使instanceof 返回true 对于以下内容：

Object instanceof FunctionObject.__proto__.constructor === Function

Object instanceof ObjectObject.__proto__.__proto__.constructor === Object

Function instanceof FunctionFunction.__proto__.constructor === Function

Function instanceof ObjectFunction.__proto__.__proto__.constructor === Object

Phew!! Even spaghetti is less tangled, but I hope things are clearer now.

ew！ 即使是意大利面也不会那么纠结，但我希望现在情况会更加清楚。

Here I have something that I did not pointed out earlier that prototype of Object doesn’t have a __proto__.

这里有一些我之前没有指出的Object prototype 没有__proto__ 。

Actually it has a __proto__ but that is equal to null. The chain had to end somewhere and it ends here.

实际上它有一个__proto__ 但这等于null 。 链条必须在某处结束，并在此处结束。

Object.prototype.__proto__\\null

Our Object, Function, Object.prototypeand Function.prototype also have properties which are functions, such as Object.assign, Object.prototype.hasOwnPropertyand Function.prototype.call. These are internal functions which do not have prototype and are also instances of Function and have a __proto__ which is a pointer to Function.prototype.

我们的Object ， Function ， Object.prototype和 Function.prototype 也具有作为函数的属性，例如Object.assign ， Object.prototype.hasOwnProperty和 Function.prototype.call 。 这些是内部函数，没有prototype ，也是Function实例，具有__proto__ 这是指向Function.prototype的指针。

Object.create.__proto__ === Function.prototype\\true

You can explore other constructor functions like Arrayand Date, or take their objects and look for the prototype and __proto__. I’m sure you will be able to make out how everything is connected.

您可以探索其他构造函数，例如Array和 Date ，或者拿走他们的东西并寻找prototype 和 __proto__ 。 我相信您将能够弄清一切之间的联系。

额外查询： (Extra queries:)

There’s one more question that bugged me for a while: Why is it that prototype of Object is object and prototype of Function is function object?

有一个更多的窃听我的问题了一会儿：为什么是它prototype的Object是对象和prototype的Function是函数对象 ？

Here is a good explanation for it if you were thinking the same.

这里 如果您也这么想的话，这是一个很好的解释。

Another question that might be a mystery for you until now is: How do primitive data types get functions like toString(), substr() and toFixed()? This is well explained here.

到目前为止，您可能还不清楚的另一个问题是：原始数据类型如何获取诸如toString() ， substr()和toFixed()类的函数？ 这很好地解释了这里 。

Using prototype, we can make inheritance work with our custom objects in JavaScript. But that is a topic for another day.

使用prototype ，我们可以使继承与JavaScript中的自定义对象一起使用。 但这是另一天的话题。

Thanks for reading!

谢谢阅读！

翻译自: https://www.freecodecamp.org/news/prototype-in-js-busted-5547ec68872/

javascript原型