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

This article mainly introduces the example analysis of JavaScript prototype inheritance, the article is very detailed, has a certain reference value, interested friends must read it!

In traditional Class-based languages such as Java and C++, the essence of inheritance is to extend an existing Class and generate a new Subclass.

Because of the strict classification and instances of such languages, inheritance is actually an extension of types. However, because JavaScript uses prototype inheritance, we cannot directly extend a Class because there is no such type as Class.

But there is still a way. Let's review the Student constructor first:

Function Student (props) {this.name = props.name | | 'Unnamed';} Student.prototype.hello = function () {alert (' Hello,'+ this.name +'!');}

And the prototype chain of Student:

Now that we want to extend PrimaryStudent based on Student, we can first define PrimaryStudent:

Function PrimaryStudent (props) {/ / calls the Student constructor and binds the this variable: Student.call (this, props); this.grade = props.grade | | 1;}

However, calling the Student constructor does not mean inheriting the prototype of the object created by Student,PrimaryStudent:

New PrimaryStudent ()-> PrimaryStudent.prototype-> Object.prototype-> null

We must find a way to change the prototype chain to:

New PrimaryStudent ()-> PrimaryStudent.prototype-> Student.prototype-> Object.prototype-> null

In this way, the prototype chain is right, and the inheritance relationship is right. The new PrimaryStudent-based object can call not only the methods defined by PrimaryStudent.prototype, but also the methods defined by Student.prototype.

If you want to do this in the simplest and roughest way:

PrimaryStudent.prototype = Student.prototype

It won't work! If so, PrimaryStudent and Student share a prototype object, so why define PrimaryStudent?

We must implement the correct prototype chain with the help of an intermediate object whose prototype points to Student.prototype. To achieve this, refer to the code of Douglas, the one who invented JSON, and the intermediate object can be implemented with an empty function F:

/ / PrimaryStudent constructor: function PrimaryStudent (props) {Student.call (this, props); this.grade = props.grade | | 1;} / / empty function F:function F () {} / / point the prototype of F to Student.prototype:F.prototype = Student.prototype;//, point the prototype of PrimaryStudent to a new F object, and the prototype of F object happens to point to Student.prototype:PrimaryStudent.prototype = new F () / / fix the constructor of the PrimaryStudent prototype to PrimaryStudent:PrimaryStudent.prototype.constructor = PrimaryStudent;// and continue to define the method on the PrimaryStudent prototype (that is, the new F () object): PrimaryStudent.prototype.getGrade = function () {return this.grade;}; / / create xiaoming:var xiaoming = new PrimaryStudent ({name: 'Xiao Ming', grade: 2}); xiaoming.name; / / 'Xiao Ming' xiaoming.grade / / 2 truexiaoming instanceof Student; / verify prototype: xiaoming.__proto__ = PrimaryStudent.prototype; / / truexiaoming.__proto__.__proto__ = Student.prototype; / / true// verify inheritance relationship: xiaoming instanceof PrimaryStudent; / / truexiaoming instanceof Student; / / true

A diagram is used to represent the new prototype chain:

Note that function F is only used for bridging, we have only created an instance of new F (), and we have not changed the prototype chain of the original Student definition.

If you wrap the inheritance action with an inherits () function, you can also hide the definition of F and simplify the code:

Function inherits (Child, Parent) {var F = function () {}; F.prototype = Parent.prototype; Child.prototype = new F (); Child.prototype.constructor = Child;} this inherits () function can be reused: function Student (props) {this.name = props.name | | 'Unnamed';} Student.prototype.hello = function () {alert (' Hello,'+ this.name +'!');} function PrimaryStudent (props) {Student.call (this, props) This.grade = props.grade | | 1;} / / implementation prototype inheritance chain: inherits (PrimaryStudent, Student); / / bind other methods to PrimaryStudent prototype: PrimaryStudent.prototype.getGrade = function () {return this.grade;}

The prototype inheritance implementation of JavaScript is as follows:

1. Define a new constructor and internally call the constructor that you want to "inherit" with call (), and bind this

two。 Prototype chain inheritance is realized with the help of intermediate function F, preferably through encapsulated inherits functions.

3. Continue to define new methods on the prototype of the new constructor.

The above is all the content of the article "sample Analysis of JavaScript prototype inheritance". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

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.