Javascript object-oriented inheritance_js object-oriented-JS Tutorial-php.cn

Javascript object-oriented inheritance_js object-oriented

WBOY

Release： 2016-05-16 18:27:35

Original

923 people have browsed it

There are many ways to implement inheritance in JavaScript. Here are two common ones.

1. Call inheritance, look at the code first:
First define a "person" class

Copy code The code is as follows:

 
//Human
Person=function(){ 
this.name="Grass Mud Horse"; 
this.eat=function (){ 
alert("I want to eat"); 
} 
this.sleep=function(){ 
alert("I want to sleep"); 
} 
} 

Define another student class and let it inherit from Person

Copy the code The code is as follows:

 
//Student class
Student=function(){ 
Person.call(this);//Inherit Person class
this.doHomework=function(){ 
 alert("The teacher is here, let me copy the homework"); 
} 
} 

The key is to look at the sentence Person.call(this), where this represents the current object, that is Student, this is easy to understand, and Person.call(this) means: "attach" all the public members of the Person class to the Student class, so that the Student also has all the functions of the Person.
Like high-level languages, if a member with the same name as the parent class appears in the subclass, it will be overwritten, which is the so-called "rewriting".
Similarly, we define a girl class:

Copy the code The code is as follows:

 
//Girl class
Girl=function(){ 
Person.call(this);//Inherit Person class
this.sex="female"; 
} 
 JavaScript is OK To realize multiple inheritance, please look at the Master class below. This Master is naturally a student, but at the same time he is also a pretty girl, so we have the following code: 
//Master class
Master=function() { 
Student.call(this);//Inherit the Student class
Girl.call(this);//Inherit the Girl class
this.degree="Master";//Education
} 

We can test it:

Copy the code The code is as follows:

 
var master=new Master(); 
master.name="Sister Feng"; 
master.eat(); 
master.doHomework(); 
alert("My name is:" master.name); 
alert("My gender is:" master.sex); 

Pay attention to the order when using multiple inheritance. If there are members with the same name in two classes, then The latter one will overwrite the previous one, which means that the current class will only inherit the members of the latter class.
That’s it for call method inheritance. If you don’t know the call method, please ask Google. I won’t go into details. Don’t repost it too much online. Let’s talk about another inheritance method.
Second, prototype prototypal inheritance:
Let’s define a monitor class:

Copy the code The code is as follows:

 
//Squad Leader class
SquadLeader=function (){ 
//Say hello
this.hi=function(){ 
alert("Hello, classmates, I am now Squad leader"); 
} 
} 

The above defines a master class. Now this master has been promoted to squad leader, so this Master will inherit SquadLeader. This time we use To implement prototype, please see the following code:

Master.prototype=new SquadLeader();//The prototype property points to an object
//or
//Master.prototype=SquadLeader.prototype;
In this way, Master inherits the SquadLeader class. In just one sentence, there are two forms. In fact, the principle is the same. It means: Copy the "soul" of SquadLeader to the Master, so from now on, the Master can do everything the SquadLeader can do.
Test it:
var master=new Master();
master.hi()//Output "Hello, classmates, I am now the monitor"

I personally prefer to use The first solution (call inheritance) implements inheritance. All code is wrapped in a "{}", which is clear at a glance. The writing style is closer to C# than the second solution. I usually use the prototype property to extend existing classes.
JavaScript is a very flexible language. There may be other better ways to implement inheritance. You can research and explore it. I am just throwing a brick here, hoping to lead to gorgeous jade!