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

This article focuses on "how to understand the inheritance mode of js". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to understand the inheritance mode of js.

I. Preface

I believe that many people have encountered questions about the JavaScript inheritance mode during the interview, and can write several code examples of inheritance modes by hand, but why the interviewer is not very satisfied with your answer or does not understand it at all? personally, I think it should be the lack of my own way to answer the question.

Second, answer skills

First, according to the order of several inheritance modes, from the least inheritance mode to the best inheritance mode.

Second, talk about the advantages and disadvantages of the current inheritance mode, what problems have been solved compared with the previous inheritance mode, and where is the most critical part of the code?

The following focuses on several common inheritance modes

II. Prototype chain inheritance

Code example

Function Parent (sex) {this.sex = sex} Parent.prototype.setSex = function () {} function Son (name) {this.name = name} Son.prototype = new Parent () var S1 = new Son ('DBCDouble') console.log (S1)

Result printing

Key: point the prototype of the subclass to the instance of the parent class, thus inheriting the private and prototype properties of the parent class

Advantages:

Prototype properties and methods are added to the parent class, which can be accessed by subclass instances.

Simple and easy to use

Disadvantages:

Cannot implement multiple inheritance (a subclass inherits into multiple parent classes)

When creating a subclass instance, you cannot pass parameters to the parent class constructor

The problem of sharing reference properties of a parent class with a subclass instance (because the prototype of the subclass points to an instance of the parent class, if the private property of the parent class has an array (reference type), then any subclass can manipulate the array, resulting in a change in the array used by other subclasses)

Fourth, borrow the parent class constructor inheritance

Code example

Function Parent (sex) {this.sex = sex} Parent.prototype.setSex = function () {} function Son (name, age, sex) {Parent.call (this, sex) this.name = name this.age = age} var S1 = new Son ('DBCdouble', 25,' male') console.log (S1)

Result printing

Key: call the parent class constructor using call or apply in the subclass constructor to achieve parent class private property inheritance (function reuse)

Advantages:

When you create a subclass instance, you can pass parameters to the parent class

Multiple inheritance can be implemented (multiple parent class constructors are called in the subclass constructor)

Solved the problem that the subclass instance of the prototype chain inherits the parent class reference property (even if there is a reference type in the parent class constructor, when the subclass instance is created, the parent class constructor will be called again to re-create a copy of the reference type data. Re-apply for the space of the reference type)

Disadvantages:

Every time you create an instance of a subclass, the parent constructor is called, which affects performance

Inherits only the instance properties (private properties) of the parent class, not the prototype properties of the parent class

5. Combinatorial inheritance (prototype chain inheritance + borrowing constructor inheritance)

Code example

Function Parent (sex) {this.sex = sex} Parent.prototype.setSex = function () {} function Son (name, age, sex) {Parent.call (this, sex) this.name = name this.age = age} Son.prototype = Object.create (Parent.prototype) SonSon.prototype.constructor = Son var S1 = new Son ('DBCdouble', 25,' male') console.log (S1)

Print the result

Key: by calling the parent class constructor, inheriting the properties of the parent class and retaining the advantages of passing parameters, and through Object.create (Parent.prototype) to create an object that inherits the parent class prototype properties, and assign the object to the child class prototype, which not only ensures that the parent class constructor does not have to execute twice, but also allows the subclass to inherit the parent class prototype method.

Advantages:

When you create a subclass instance, you can pass parameters to the parent class

Multiple inheritance can be implemented (multiple parent class constructors are called in the subclass constructor)

Solved the problem that the subclass instance of the prototype chain inherits the parent class reference property (even if there is a reference type in the parent class constructor, when the subclass instance is created, the parent class constructor will be called again to re-create a copy of the reference type data. Re-apply for the space of the reference type)

The parent constructor only needs to be executed once

VI. Class inheritance of ES6

The class keyword is introduced into ES6, and class can inherit through the extends keyword and define the static method of the class through the static keyword, which is much clearer and more convenient than ES5's inheritance through modifying the prototype chain.

Note: the essence of ES5 inheritance is to create an instance object of the subclass this, and then add the methods of the parent class to the this (Parent.apply (this)). The inheritance mechanism of ES6 is completely different. The essence is to first add the properties and methods of the parent class instance object to the this (so you must call the super method first), and then modify the this with the constructor of the subclass.

Code example

Class A {constructor (sex) {this.sex = sex} showSex () {console.log ('here is the method of the parent class')}} class B extends A {constructor (name, age, sex) {super (sex); this.name = name; this.age = age } showSex () {console.log ('here is the method of the subclass')}} const b = new B ('DBCDOUBLE', 25,' male') console.log (b)

Print the result

Key: use the extends keyword to inherit the prototype properties of the parent class, call super to inherit the instance properties of the parent class, and retain the advantage of passing parameters to the parent class constructor

Advantages: easy to use, no need to modify the prototype chain to complete inheritance

Let's see what the code inherited by class will eventually be compiled by compiling the code from ES6 to ES5, as follows:

From the analysis of the above figure:

The super in the above code example refers to the parent class constructor

The child class inherits the instance properties of the parent class and ultimately implements the inheritance through call or apply

Modify the prototype chain relationship between the subclass and the parent class by calling the extends method

Take a look at the compiled extends method, as follows

1. Notice that the Object.setPrototypeOf () method sets the prototype of a specified object (that is, the internal [[Prototype]] property) to another object or null.

2. The execution order of (.prototype = b.prototype, new ()) expression is to execute the former first, and then return the latter.

As you can see from the picture above, extends does the following things:

Defines a function _ () {} function and points the constructor of the function to a subclass.

Then, point the prototype of the function _ () {} function to the prototype of the parent class

Finally, the instance of the function () {} function is assigned to the subclass function, so that the instance of the subclass can obtain the prototype properties of the parent class along the proto.proto. This inheritance pattern is commonly known as the Holy Grail pattern.

At this point, I believe you have a deeper understanding of "how to understand the inheritance mode of js". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.