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

This article mainly introduces "what are the ways to implement JS inheritance". In daily operation, I believe many people have doubts about the implementation of JS inheritance. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for you to answer the doubts about "what are the ways to achieve JS inheritance?" Next, please follow the editor to study!

What is inheritance?

Inheritance is to enable an object of one type (which can be defined through a constructor or class) to access the properties and methods of another type. It is a relationship between a class and a class, and it is usually said that a subclass inherits the parent class. But there is a misunderstanding here: it is wrong to think that an instance inherits a class and that someone has responsive properties and methods because he inherits human beings.

There are many ways to realize inheritance, and the editor shares four ways: with the help of constructor to achieve inheritance, prototype inheritance, combinatorial inheritance, ES6 inheritance.

1. Implement inheritance with the help of constructor

Function Person (name,age) {/ / defines a parent class

This.name = name

This.age = age

This.sayHello = function () {

Console.log (this.name)

}

}

Function Male (name,age) {/ / defines a subclass male class.

/ / inherit the parent class so that the subclass has the corresponding properties and methods

/ / the use of call or apply

/ / the this in the constructor points to the instance

Person.call (this,name,age)

This.hx = "true"; / / in addition to inherited properties and methods, you can also add properties and methods for subclasses themselves

}

Function FeMale (name,age) {/ / defines a subclass female class.

Person.call (this,name,age)

This.hj = "no"

}

Var male = new Male ("chenjinfeng", 20)

Male.sayHello ()

2. Prototype inheritance

Function Person () {

}

Person.prototype.name = "john"

Person.prototype.age = 20

Person.prototype.sayHello = function () {

Console.log (this.name)

}

Function Male () {

}

Male.prototype = new Person (); / / Male.prototype.__proto__ = = Person.prototype implements inheritance through this line of code

/ / find out if there is sayHello on the _ _ proto__ (Male.prototype) of the process male

/ / if you do not continue to search for male.__proto__.__proto__ (Male.prototype.__proto__), you are looking for Person.prototype.

Var male = new Male ()

Male.sayHello ()

3. Combination inheritance

Function Person (name,age) {

This.name = name

This.age = age

}

Person.prototype.sayHello = function () {

Console.log (this.name)

}

Function Male (name,age) {

Person.call (this,name,age); / / can only inherit instance properties

}

/ / just consider whether to inherit the prototype method or not. Let the Male prototype object also have methods on the Person prototype object.

/ * Male.prototype = Person.prototype

/ / the sayHi method is unique to my subclass.

Male.prototype.sayHi = function () {

Console.log ("hi")

}

Var male = new Male ("john", 20)

Male.sayHello ()

Var person = new Person ("aa", 22)

Person.sayHi (); / / the parent class can actually access the methods of the subclass, and the inheritance is completely messed up, because Male.prototype and Person.prototype point to the same, either side changes, it will affect the other party * /

For (let attr in Person.prototype) {

Male.prototype [attr] = Person.prototype [attr]

}

Male.prototype.sayHi = function () {

Console.log ("hi")

}

Var male = new Male ("john", 20)

Male.sayHello ()

Male.sayHi ()

Var person = new Person ("aa", 22)

Person.sayHi ()

4. ES6 inheritance

Class Person {

Constructor (name,age) {

This.name = name

This.age = age

}

SayHello () {

Console.log (this.name)

}

/ / extension to define class methods

Static foo () {

Console.log ("this is a class method, not an instance method")

}

}

/ / implement inheritance through the keyword extends

Class Male extends Person {

Constructor (name,age) {

Super (name,age); / / 1. Create a constructor for the this object 2.super that points to the parent class

This.sexy = "male"; / / add instance properties of the subclass

}

/ the prototype method of the parent class is used in the prototype method of the subclass

SayHi () {

Console.log ("hi")

Who does super.sayHello () / / super point to? Point to the prototype object of the parent class

}

Static foo1 () {

Super.foo (); / / super points to the parent class

}

}

Var male = new Male ("john", 20)

/ / male.sayHello ()

Male.sayHi ()

Male.foo1 ()

At this point, the study of "what are the ways to implement JS inheritance" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.