An introduction to the method of implementing inheritance in JavaScript prototypes

In this article, we will discuss prototypes and how to use them for inheritance in JS. We will also see how prototype methods differ from class-based inheritance.

Inheritance

Inheritance is a distinctive feature of programming languages that emerged with the introduction of object-oriented programming languages. Most of these languages are class-based languages. Here, the class is like a blueprint and the object is its representation. That is, to create an object, first we have to create a class, and then we can create any number of objects from a class.

Imagine we have a class that represents a smartphone. This class has functions like taking pictures and GPS positioning like other smartphones. The following is using c to describe such a class:

class SmartPhone { public: void captureImages() {} } SmartPhone x; x.captureImages()

We created a class namedSmartPhone, which has a method namedcapturePicturesPhotograph.

If we need aniPhoneclass that can capture images and some special features like Face ID scanning. Here are two possible solutions:

• Rewrite the capture image functionality into a new class along with other common smartphone functionality, as well as iPhone-specific functionality. But this approach requires more time and effort and introduces more bugs.

• Reuse the functions in theSmartPhoneclass. This is the role of inheritance. Inheritance is also a way to reuse functions in other classes/objects.

Here is how we inherit thecapturePicturesmethod from theSmartPhoneclass, using c to implement it as follows:

class Iphone: public SmartPhone { public: void faceIDScan() {} } Iphone x x.faceIDScan() x.captureImages()

The above is a simple Inheritance example. However, it shows that inheritance allows us to reuse code in a way that makes the resulting program less error-prone and takes less time to develop.

The following is some important information about classes:

• The class that inherits this functionality is called a subclass
• The inherited class is called the parent class
• A class can inherit from multiple classes at the same time
• We can have multiple inheritance levels. For example, class C inherits from class B, and class B inherits from class A

It is worth noting that the class itself does not do anything. No work is actually done until the object is created from the class. We'll see why it's different from JavaScript.

What is a prototype?

In JS, all objects have a special internal property that is basically a reference to another object. This reference depends on how the object was created. In the ECMAScript/JavaScript specification, it is represented as[[Prototype]].

Since[[Prototype]]is linked to an object, the object has its own[[Prototype]]reference. This is how you build a prototype chain.

This[[Prototype]]chain is the building block of inheritance in JS.

__proto__Object

In order to access the[[Prototype]]of an object, most browsers provide the__proto__property . The access method is as follows:

obj.__proto__

It should be noted that, this attribute is not part of the ECMAScript standard, it is actually implemented by the browser.

Getting and setting prototype methods

In addition to the__proto__attribute, there is also a standard way to access[[Prototype]]:

Object.getPrototypeOf(obj);

to set the[[Prototype]]of the object:

Object.setPrototypeOf(obj, prototype);

[[Prototype]]and. prototypeproperty

[[Prototype]]is just a standard symbol used to represent the prototype of an object. Many developers confuse it with the.prototypeattribute, which is a completely different thing. Let’s take a look at the.prototypeattribute.

In JS, there are many ways to create objects. One way is to use the constructor and call it using thenewkeyword like this:

function SmartPhone(os) { this.os = os } let phone = new SmartPhone('Android')

Printphoneobject in the console:

{ os: "IPhone" __proto__{ constructor: ƒ SmartPhone(os) __proto__: Object } }

Now, if we wish to have some methods on thephoneobject, we can use the.prototypeattribute on the function like this:

SmartPhone.prototype.isAndroid = function () { return this.os === 'Android' || 'android' }

Create againphoneobject, print thephoneobject as follows:

{ os: "Android" __proto__{ isAndroid: ƒ() constructor: ƒ SmartPhone(os) __proto__: Object } }

We can seeisAndroid in the[[Prototype]]of the object ()method.

In short, the.prototypeproperty is basically like a blueprint for the[[Prototype]]object created by a given constructor. Everything declared in a.prototypeproperty/object will pop up in the object's[[Prototype]].

In fact, if you compareSmartPhone.prototype withphone's[[Prototype]], you will find that they are the same:

console.log(Object.getPrototypeOf(phone) === SmartPhone.prototype); // true

It is worth noting that we can also create methods in the constructor:

function ObjectA() { this.methodA = function () {} } let firstObj = new ObjectA() console.log(firstObj)

这种方法的问题是当我们初始化一个新对象时。所有实例都有自己methodA的副本。相反，当我们在函数的原型上创建它时，对象的所有实例只共享方法的一个副本，显然使用原型的方式效率会过高。

当我们访问属性时这里发生了什么？

当我们访问一个属性以获取它时，会发生以下情况：

JS 引擎查找对象上的属性，如果找到了该属性，然后返回它。否则，JS 引擎将通过查看[[Prototype]]来检查对象的继承属性，如果找到该属性，则返回它，否则，它会查找[[Prototype]]的[[Prototype]]。 找到属性或没有[[Prototype]]时，该链结束，这意味着我们已经到达原型链的末端。

当我们设置/创建属性时，JS 总是在对象本身上进行设置。 即使[[Prototype]]链上存在相同的属性，下面是一个例子：

function MyObject() {} MyObject.prototype.propA = 10; // 在原型上创建属性 let myObject = new MyObject(); console.log(myObject.propA); // [[Prototype]]上的属性 // 10 myObject.propA = 20; // 对象的属性 console.log(myObject.propA); // 20

在上面的示例中，我们创建了一个构造函数，该函数的[[Prototype]]上具有属性propA。 当我们尝试对其进行读取操作时，会在控制台中看到该值。 但是，当我们尝试在对象本身上设置相同的属性时；JS 使用给定值在对象上创建一个新属性。 现在，如果我们不能直接访问[[Prototype]]上的属性。

值得注意的是，普通对象的[[Prototype]]链的末尾是内置的Object.prototype。 这就是为什么大多数对象共享许多方法（例如toString()）的原因。 因为它们实际上是在Object.prototype上定义的。

使用原型继承的各种方法

在 JS 中，无论我们如何创建对象，只有原型继承，但这些方式还有一些区别，来看看：

对象字面量

在JavaScript中创建对象的最简单方法是使用对象字面量：

let obj = {}

如果在浏览器的控制台中打印obj，我们将看到以下内容:

基本上，所有用文字面量创建的对象都继承了Object.prototype的属性。

需要注意的是__proto__对象引用了创建它的构造函数。 在这种情况下，constructor属性指向Object构造函数。

使用对象构造函数

另一种不太常见的创建对象的方法是使用对象构造函数。JS 提供了一个名为Object的内置构造函数方法来创建对象。

let obj = new Object();

这种方法的结果与对象字面量的方式相同。它从Object.prototype继承属性。因为我们使用Object作为构造函数。

Object.create 方法

使用此辅助方法，我们可以创建一个带有[[Prototype]]的对象，如下所示：

let SmartPhone = { captureImages: function() {} } let Iphone = Object.create(SmartPhone) Iphone.captureImages()

这是在 JS 中使用继承的最简单方法之一。猜猜我们如何在没有任何[[Prototype]]引用的情况下创建对象？

构造方法

与 JS 运行时提供的对象构造函数相似。 我们还可以创建自己的构造函数，以创建适合我们需求的对象，如下所示：

function SmartPhone(os) { this.os = os; } SmartPhone.prototype.isAndroid = function() { return this.os === 'Android'; }; SmartPhone.prototype.isIOS = function() { return this.os === 'iOS'; };

现在，我们想创建一个iPhone类，它应该有'iOS'作为它os属性的值。它还应该有faceIDScan方法。

首先，我们必须创建一个Iphone构造函数，在其中，我们应该调用SmartPhone构造函数，如下所示：

function Iphone() { SmartPhone.call(this, 'iOS'); }

这会将Iphone构造函数中的this.os属性设置为’iOS‘。

之所以调用SmartPhone.call方法，是因为我们需要更改this值以引用Iphone。 这类似于在面向对象的世界中调用父级的构造函数。

接下来的事情是，我们必须从SmartPhone构造函数继承方法。 我们可以在此处使用Object.create朋友，如下所示：

Iphone.prototype = Object.create(SmartPhone.prototype);

现在，我们可以使用.prototype为Iphone添加方法，如下所示：

Iphone.prototype.faceIDScan = function() {};

最后，我们可以使用Iphone创建一个对象，如下所示：

let x = new Iphone(); // calling inherited method console.log(x.isIOS()): // true

ES6 class

使用ES6，整个过程非常简单。 我们可以创建类（它们与C ++或其他任何基于类的语言中的类不同，只是在原型继承之上的语法糖），然后从其他类派生新的类。

下面是我们如何在ES6中创建类:

class SmartPhone { constructor(os) { this.os = os; } isAndroid() { return this.os === 'Android'; } isIos() { return this.os === 'iOS'; } };

现在，我们可以创建一个派生自SmartPhone的新类，如下所示：

class Iphone extends SmartPhone { constructor() { super.call('iOS'); } faceIDScan() {} }

我们不是调用SmartPhone.call，而是调用super.call。 在内部，JavaScript引擎会自动为我们执行此操作。

最后，我们可以使用Iphone创建一个对象，如下所示

let x = new Iphone(); x.faceIDScan(); // calling inherited method console.log(x.isIos()): // true

该ES6示例与先前的构造方法示例相同。 但是阅读和理解起来要干净得多。

原文：https://javascript.info/prototype-inheritance

作者：Indermohan Sing

更多编程相关知识，请访问：编程课程！！

The above is the detailed content of An introduction to the method of implementing inheritance in JavaScript prototypes. For more information, please follow other related articles on the PHP Chinese website!