Shulou(Shulou.com)06/02 Report--

This article will explain in detail how to analyze the inheritance of JavaScript. The content of the article is of high quality, so the editor shares it for you as a reference. I hope you will have a certain understanding of the relevant knowledge after reading this article.

Prototype chain inheritance

Principle

The essence is to rewrite the prototype object and replace it with an instance of a new type. In the following code, the properties and methods of the instance object that used to exist in SuperType now also exist in SubType.prototype.

Realize

Function Super () {this.value = true;} Super.prototype.getValue = function () {return this.value} function Sub () {}; / / Sub inherits SuperSub.prototype = new Super (); Sub.prototype.constructor = Sub;const ins = new Sub (); console.log (ins.getValue ()); / / true

Sub inherits Super, and inheritance is achieved by creating an instance of Super and assigning it to Sub.prototype. All the properties and methods that originally existed in the instance of Super now also exist in Sub.prototype. As shown in the figure.

As you can see in the figure above, instead of using the prototype provided by Sub by default, it has been replaced with a new prototype; this new prototype is an example of Super. Thus, the new prototype not only has the properties and methods that it has as an instance of Super, but it also points to the prototype of Super. The end result is this:

Prototype of ins= > Sub = > prototype of Super

The getValue () method is still in Sub.prototype, but the value property is in Sub.prototype. This is because value is an instance property, while getValue () is a prototype method. Since Sub.prototype is now an instance of Super, value is in that instance.

In addition, note that ins.constructor now points to Super because the constructor in the original Sub.prototype has been rewritten.

Shortcoming

Private prototype properties are shared by the instance

When you create an instance of a subtype, you cannot pass parameters to the constructor of the parent type

The main problem with prototype chain inheritance: private prototype properties are shared by instances, which is why properties are defined in constructors, not prototype objects. When inheritance is implemented through a prototype, the prototype instance becomes an instance of another class. As a result, the original instance property has naturally become the current prototype property.

Function Super () {this.colors = ['red','green','blue'];} Super.prototype.getValue = function () {return this.colors} function Sub () {}; / / Sub inherits SuperSub.prototype = new Super (); const ins1 = new Super (); ins1.colors.push (' black'); console.log (ins1.colors); / / ['red','green','blue','black']; const ins2 = new Sub (); console.log (ins2.colors) / / ['red','green','blue','black']

The second problem with prototype chains is that when you create an instance of a subtype, you cannot pass parameters to the constructor of the parent type. In fact, it should be said that there is no way to pass parameters to the constructor of the parent type without affecting all desired instances. Coupled with the problem that prototype properties containing reference type values are shared by all instances, prototype chain inheritance is rarely used alone in practice

Pay attention to the problem

Methods should be carefully defined when using prototype chain inheritance methods, and subtypes sometimes need to override a method of the parent class, or add a method that does not exist in the parent class. In any case, the code that adds methods to the prototype must be placed after the statement that replaces the prototype.

Function Super () {this.colors = ['red',' green', 'blue'];} Super.prototype.getValue = function () {return this.colors} function Sub () {this.colors = [' black'];}; / / Sub inherits SuperSub.prototype = new Super (); / / adds a method that already exists in the parent class and overrides the parent method Sub.prototype.getValue = function () {return this.colors } / / add the method Sub.prototype.getSubValue = function () {return false;} const ins = new Sub () that does not exist in the parent class; / / the result obtained after overriding the method of the parent class console.log (ins.getValue ()); / / ['black'] / / the result obtained by the newly defined method in the subclass console.log (ins.getSubValue ()) / / the false// parent class calls the getValue () method with the original value console.log (new Super (). GetValue ()); / / ['red',' green', 'blue']

Borrow constructor inheritance

Principle

Borrow a constructor (sometimes called pseudo-class inheritance or classical inheritance). The basic idea of this technique is quite simple, that is, the parent class constructor is called inside the subclass constructor. Don't forget that functions are just objects that execute code in a particular environment, so you can also execute constructors on newly created objects by using the apply () and call () methods.

Realize

Function Super () {this.colors = ['red',' green', 'blue'];} Super.prototype.getValue = function () {return this.colors;} function Sub () {/ / inherits SuperSuper.call (this) / / equivalent to replacing the this in the constructor Super with the ins instance object, so that only the private properties defined in the Super will be inherited, and the public methods defined in the prototype properties will not be inherited} const ins = new Sub (); console.log (ins.colors)

Pass parameters: compared with the prototype chain, borrowing constructor inheritance has a great advantage, that is, you can pass parameters to the parent class constructor in the subclass constructor.

Function B (name) {this.name = name;} function A () {/ / inherits B while passing the parameter B.call (this,'ZZ'); / / instance property this.age = 100;} const p = new A (); alert (p.name); / / 'ZZ'alert (p.age); / / 100

Shortcoming

If you just borrow the constructor, you can't avoid the problem with the constructor pattern-- the methods are defined in the constructor, so function reuse is out of the question. Also, the methods defined in the parent class's prototype are invisible to the subclasses, so this approach is less used.

Combinatorial inheritance

Principle

Combinatorial inheritance refers to an inheritance mode that combines prototype chain and borrowed constructor technology to give full play to the advantages of both. The idea behind it is to use the prototype chain to inherit the public properties and methods on the prototype, and to inherit the private properties of the parent class by borrowing constructor inheritance. In this way, function reuse is realized by defining methods on the parent class prototype, and each instance is guaranteed to have private properties of the parent class.

Realize

Function Super (name) {this.name = name; this.colors = ['red','blue','green'];} Super.prototype.sayName = function () {alert (this.name);} function Sub (name,age) {Super.call (this,name); this.age = age;} / / inheritance method Sub.prototype = new Super (); Sub.prototype.constructor = Sub;Sub.prototype.sayAge = function () {alert (this.age) } const ins = new Sub ('jarvis',18); ins.colors.push (' black'); console.log (ins.colors); / / ["red", "blue", "green", "black"] ins.sayName (); / / 'jarvis'ins.sayAge (); / / 18const ins2 = new Sub (' ershiyi',21); console.log (ins2.colors); / / ["red", "blue", "green"] ins2.sayName (); / / 'ershiyi'ins2.sayAge () / / 21

In the previous example, the Sub constructor defines two properties: name and age. The prototype of Super defines a sayName () method. The Super constructor is called in the Sub constructor with the name parameter passed in, followed by the definition of its own property, age. Then, the instance of Super is assigned to the prototype of Sub, and the method sayAge () is defined on the new prototype. In this way, different Sub instances can have their own properties-- including colors properties-- and you can use the same method to combine inheritance, which avoids the shortcomings of prototype chains and borrowed constructors, and combines their advantages, which is called the most commonly used inheritance pattern in JavaScript.

Shortcoming

In any case, the constructor of the parent class is called twice: once when the subclass prototype is created, and once inside the subclass constructor.

Parasitic combinatorial inheritance

Principle

Combinatorial inheritance is the most commonly used inheritance mode in JavaScript; however, it has its own shortcomings. The biggest problem with combinatorial inheritance is that the parent constructor is called twice in any case: once when the subclass prototype is created and once inside the subclass constructor. Yes, the subtype will eventually contain all the instance properties of the supertype object, but these properties have to be overridden when the subtype constructor is called. Let's take a look at the following example of combinatorial inheritance.

Realize

Function Super (name) {this.name = name; this.colors = ['red','blue','green'];} Super.prototype.sayName = function () {alert (this.name);} function Sub (name,age) {Super.call (this,name); this.age = age;} / / inheritance method Sub.prototype = new Super (); Sub.prototype.constructor = Sub;Sub.prototype.sayAge = function () {alert (this.age) } const ins = new Sub ('jarvis',18); ins.colors.push (' black'); console.log (ins.colors); / / ["red", "blue", "green", "black"] ins.sayName (); / / 'jarvis'ins.sayAge (); / / 18const ins2 = new Sub (' ershiyi',21); console.log (ins2.colors); / / ["red", "blue", "green"] ins2.sayName (); / / 'ershiyi'ins2.sayAge () / / 21

The so-called parasitic combinatorial inheritance means inheriting attributes by borrowing constructors and inheriting methods through the mixed form of prototype chains. The basic idea behind it is that you don't have to call a supertype constructor to specify a subtype prototype, all you need is a copy of the supertype prototype. In essence, parasitic inheritance is used to inherit the prototype of the supertype, and then the result is assigned to the prototype of the subtype. The basic pattern of parasitic combinatorial inheritance is as follows.

Function Super (name) {this.name = name; this.colors = ['red','blue','green'];} Super.prototype.sayName = function () {alert (this.name);} function Sub (name,age) {/ / inherits instance properties Super.call (this,name); this.age = age;} / / inherits the public method Sub.prototype = Object.create (Super.prototype); Sub.prototype.constructor = Sub Sub.prototype.sayAge = function () {alert (this.age);} const ins = new Sub ('jarvis',18); ins.colors.push (' black'); console.log (ins.colors); / / ["red", "blue", "green", "black"] ins.sayName (); / / 'jarvis'ins.sayAge (); / / 18const ins2 = new Sub (' ershiyi',21); console.log (ins2.colors) / / ["red", "blue", "green"] ins2.sayName (); / / 'ershiyi'ins2.sayAge (); / / 21

Multiple inheritance

There is no multiple inheritance in JavaScript, which means that an object cannot inherit multiple objects at the same time, but it can be achieved through workarounds.

18 multiple inheritance / / multiple inheritance: an object inherits multiple objects at the same time / / Person Parent Mefunction Person () {this.name = 'Person';} Person.prototype.sayName = function () {console.log (this.name);} / / Custom Parentfunction Parent () {this.age = 30;} Parent.prototype.sayAge = function () {console.log (this.age);} function Me () {/ / inherits Person attributes Person.call (this); Parent.call (this) } / / method of inheriting Person Me.prototype = Object.create (Person.prototype); / / cannot rewrite prototype object to implement inheritance of another object / / Me.prototype = Object.create (Parent.prototype); / / Object.assign (targetObj,copyObj) Object.assign (Me.prototype,Parent.prototype); / / specify constructor Me.prototype.constructor = Me;const me = new Me ()

Inheritance differences between ES5 and ES6

In the traditional inheritance of ES5, the value of this is created by the derived class before the base class constructor is called. This means that this is an instance of a derived class from the beginning, which

It is then decorated with additional properties of the base class.

In ES6 class-based inheritance, the value of this is first created by the base class and then modified by the constructor of the derived class. The result is that this initially has all the functionality of the built-in object of the base class and correctly receives all the functionality associated with it.

What is JavaScript? JavaScript is a literal scripting language whose interpreter is called JavaScript engine and is a part of the browser. JavaScript is a scripting language widely used on the client side. It was first used on HTML pages to add dynamic functions to HTML pages.

On how to analyze the inheritance of JavaScript to share here, I hope that the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.