Home > Web Front-end > JS Tutorial > body text

javascript object-oriented Javascript inheritance_js object-oriented

WBOY
Release: 2016-05-16 18:28:09
Original
1271 people have browsed it

The previous sections talked about JavaScript object-oriented namespace, javascript object-oriented JavaScript class, JavaScript object-oriented private members and public members With Javascript object-oriented overloading, you can read the above first and then continue to read below.

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, which 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 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 can implement 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:
Copy code The code is as follows:

//Master class
Master=function(){
Student.call(this );//Inherit the Student class
Girl.call(this);//Inherit the Girl class
this.degree="Master's degree";//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, the latter one will overwrite the previous one. , that is to say, 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 prototype to implement, please see the following code:
Copy the code The code is as follows:

Master.prototype=new SquadLeader();//The prototype attribute points to an object
//or
//Master.prototype=SquadLeader.prototype;
In this way, Master inherits SquadLeader Class, that's it. There are two forms here. 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) to implement inheritance. All codes are 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. I am just throwing a brick here, hoping to lead to gorgeous jade!
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!