JavaScript中的原型继承

In Javascript we don’t have classes, rather we only have objects. So if we want to implement inheritance with objects we can get the help of prototypical inheritance.

在Javascript中，我们没有类，而只有对象。 因此，如果我们想用对象实现继承，我们可以得到原型继承的帮助。

Before talking about prototypical inheritance, we all should stay on the same pitch in terms of javascript prototype. So,

在讨论原型继承之前，我们都应该就javascript 原型保持一致 。 所以，

Javascript原型 (Prototype in Javascript)

Suppose we have one object john . We have another object person .

假设我们有一个对象john 。 我们还有另一个对象person 。

john is a type of person , right?

john是一种person ，对吗？

We will add the common behaviors to the person object, then later somehow we will link this person object with the john object. Now we can refer person as the prototype of john object.

我们将普通行为添加到person对象，然后稍后以某种方式将此person对象与john对象链接。 现在我们可以将person称为john对象的原型。

Prototype is just a parent of another object.

原型只是另一个对象的父代。

Every object in javascript (except a single one) has a prototype object. Now the question is how this prototype looks like?

javascript中的每个对象(单个对象除外)都有一个原型对象。 现在的问题是该原型的外观如何？

We can get the help of the Chrome dev tool to see how a prototype looks like.

我们可以获得Chrome开发工具的帮助，以查看原型的外观。

In the above screenshot, we can see the prototype of person object inside __proto__ property. Yes, this is the prototype of person object.

在上面的屏幕截图中，我们可以看到__proto__属性内的person对象的原型。 是的，这是person对象的原型。

Every object in Javascript has a constructor property that refers to the function that was used to create that object.

Javascript中的每个对象都有一个constructor属性，该属性引用用于创建该对象的函数。

A prototype is just an object in memory. Every object has a prototype or parent except one object. We will refer to that object throughout the article as the base object.

原型只是内存中的一个对象。 除一个对象外，每个对象都有一个原型或父对象。 我们将在整篇文章中将该对象称为基础对象 。

So every object in javascript is derived from another object which we can refer to as base Object. So the base object is the root of all objects in Javascript. On the above screenshot, you can see that there is no __proto__ property inside the prototype of person

因此，javascript中的每个对象都派生自另一个对象，我们可以将其称为基础对象 。 因此，基础对象是Javascript中所有对象的根。 在上面的屏幕截图中，您可以看到person的原型内没有__proto__属性。

So Base Object doesn't have any prototype. It is the root.

因此，基础对象没有任何原型。 这是根。

We always have a single reference of the base object in memory and all objects we will create later directly or indirectly derived from the base object.

我们在内存中始终只对基础对象有一个引用，而我们以后将直接或间接从基础对象派生的所有对象都将被引用。

To see this in action we can get the help of getPrototypeOf method.

为了了解这一点，我们可以获取getPrototypeOf方法的帮助。

Object.getPrototypeOf(person) === Object.getPrototypeOf({})

This expression will always return true.

此表达式将始终返回true。

We should not use __proto__ property directly from any object because its deprecated rather we should always use getPrototypeOf method.

我们不应该直接从任何对象中使用__proto__属性，因为不赞成使用它，而应该始终使用getPrototypeOf方法。

Now time to see the prototypical inheritance in action.

现在该看一下原型继承的实际应用了。

Javascript中的原型继承 (Prototypical Inheritance in Javascript)

In person object we had some methods like toString and valueOf but we did not define those methods in person. Then how we are getting those properties and methods? 🤔

在person对象中，我们有一些方法，例如toString和valueOf但我们没有亲自定义这些方法。 那么我们如何获得这些属性和方法？ 🤔

When we access a property or method in an object, the javascript engine first looks for that property on the object itself. If it can't find then it looks inside its prototype.

当我们访问对象中的属性或方法时，javascript引擎首先在对象本身上寻找该属性。 如果找不到，它将查找其原型内部。

If the property is not defined inside its prototype then the engine looks if the prototype is inherited from another prototype. (Multilevel prototypical inheritance, will talk about it later)

如果该属性未在其原型内定义，则引擎将查找该原型是否从另一个原型继承。 ( 多级原型继承 ，稍后再讨论)

This way it will look all the way up to the base object. This is the prototypical inheritance in action.

这样，它将一直到基础对象 。 这就是行动中的原型继承 。

JavaScript中的多级原型继承 (Multilevel Prototypical Inheritance in Javascript)

Before talk something about the multilevel prototype first we will create an array an inspect its prototype to see what is inside there.

首先讨论多级原型之前，我们将创建一个数组并检查其原型以查看其中的内容。

Create an empty array users in the Chrome Dev Tool and inspect what’s inside that array.

在Chrome开发者工具中创建一个空数组users ，并检查该数组中的内容。

In the prototype of users you will see a lot of methods and if you are working with javascript for some time, probably you already used a lot of these methods. Those are array helper methods and most of them got introduced in ES6.

在users原型中，您将看到很多方法，如果您使用javascript已有一段时间，可能您已经使用了很多方法。 这些是数组帮助器方法，其中大多数是在ES6中引入的。

Those methods are inside the __proto__ property so the object inside the __proto__ property is the prototype of an array. You can also get that using the following statement.

这些方法是内部__proto__属性，以便内部的对象__proto__属性是一个数组的原型 。 您还可以使用以下语句来获取该信息。

Object.getPrototypeOf(users)

If you go to the very end of users prototype members, you will see another__proto__ property. Try to inspect that __proto__ property.

如果您到了users原型成员的最后，您将看到另一个__proto__属性。 尝试检查该__proto__属性。

We are familiar with this last prototype object, right? It’s the base object.

我们熟悉最后一个原型对象，对吗？ 这是基础对象 。

So we can visually represent the whole thing like bellow.

这样我们就可以像波纹管一样直观地呈现整个事物。

So the users has a prototype that we can call as array prototype. In that array prototype, we have all the helper methods of the javascript array.

因此， users拥有一个可以称为数组原型 e的原型 。 在该数组原型中，我们拥有javascript array的所有辅助方法。

That array prototype is inherited from another prototype, which is the root prototype or the base of all javascript objects. This is the multi-level inheritance in action.

该数组原型是从另一个原型继承的，该原型是所有Javascript对象的根原型或基础。 这是实际的多级继承。

This is the first part of my writing about prototypical inheritance. Here I am covering the basic things like what is javascript prototypes, prototypical inheritance, and multi-level prototypical inheritance.

这是我关于原型继承的第一部分。 在这里，我将介绍诸如javascript原型，原型继承和多级原型继承之类的基本内容。

In the second part, I will write about implementing custom and your own multi-level prototypical inheritance that you can use to write reusable and more robust application code. So stay tuned!

在第二部分中，我将写有关实现自定义和您自己的多级原型继承的信息，可用于编写可重用且更健壮的应用程序代码。 敬请期待！

翻译自: https://medium.com/swlh/prototypical-inheritance-in-javascript-e43ac10dbf5e