JavaScript daily must learn the inheritance _javascript skill

Source: Internet
Author: User
Tags what inheritance

Friends everyone good, we today this talk on the previous package continues to explain, today is in front of the upgrade, OOP thought in the inheritance, we first to explain what is the meaning of inheritance, where we will use to continue.

Inheritance is a series of attributes and behaviors that descendants continue to ancestor. Descendants are still the same as their ancestors, let's use some concrete descriptions to understand what inheritance

The Chinese, and the Americans, inherit from the human ancestors, so we have the same property behavior, but there's a certain difference that we're going to continue to talk about polymorphism, so we can see from the example diagram above that people are really similar before, so let's take a look at the following sample code and we know Using code to simulate inheritance, we know a way to write as little code as possible to do as much as you can.

Genetic inheritance functions function
Extend (children,parent) {
  //Here is just the behavior of the inherited prototype link definition for
  (var p in Parent.prototype) {
    CHILDREN[P] = parent.prototype[p];
  }
Human ancestor
function Human () {
  this.weight = "50kg";
  This.height = "180cm";
  This.hair = "Brown";
}
Eat
Human.prototype.Eat = function () {
  console.log ("eat");
}
Speak
Human.prototype.Say = function () {
  Console.log ("Everyone good I am the earth Man");
}
Walking
Human.prototype.Walk = function () {
  Console.log ("I am human, I am born to walk upright on two legs");
}
Reproduction
Human.prototype.Multiply = function () {
  console.log ("with his wife to do shame, is for the prosperity of mankind");
}

Chinese function
Chinese () {
  //Call inheritance function
  Extend (This,human);
}
American function
American () {
  //Call inheritance function
  Extend (This,human);
}

As we write, we simulate inheritance in advanced languages, and we'll see if there's any problem after running.

After running, we found the problem, so that we can already implement the prototype link inheritance, but also greatly save a lot of code, we write Chinese and American functions, is not only written a small number of code, we have to inherit the behavior of the parents over, The instance can also invoke the behavior functions owned by the parent class, but in this case, we haven't fully implemented the inheritance, because we don't have any effect when we call the hair property, so we can modify the code to achieve a full inheritance

Genetic inheritance functions function
Extend (children,parent) {
  //Now we are inheriting from the parent class instance, so the property and the method will inherit for
  (Var p in Parent) {
    if ( typeof Children[p] = = "undefined") {
      children[p] = parent[p]
    ;
}} Human ancestor
function Human () {
  this.weight = "50kg";
  This.height = "180cm";
  This.hair = "Brown";
}
Eat
Human.prototype.Eat = function () {
  console.log ("eat");
}
Speak
Human.prototype.Say = function () {
  Console.log ("Everyone good I am the earth Man");
}
Walking
Human.prototype.Walk = function () {
  Console.log ("I am human, I am born to walk upright on two legs");
}
Reproduction
Human.prototype.Multiply = function () {
  console.log ("with his wife to do shame, is for the prosperity of mankind");
}
Chinese function
Chinese () {
  //Call inherited function
  Extend (this,new Human ());
}
American function
American () {
  //Call inherited function
  Extend (this,new Human ());
}

We still have to look at the effect of the operation is not the same as we imagined?

We can see from the code above that the inherited function is actually a copy of the attributes and behavior from the concrete instance of the human class, so that we further simulate the inheritance of the class, and there's a sentence that I need to explain

if (typeof children[p] = = "undefined") {
 ... 
}

The TypeOf keyword here is actually an operator that looks at what type of variable it is, and if it's undefined, the result is "undefined", so that's how I compare it, if subclasses don't define such attributes or behavioral functions, Then inherit from the parent class (note: The explanation here is to pave the back for polymorphism).

Let's take a look at multiple inheritance, as we've already mentioned Chinese and American two classes are inherited from the human class, and then we'll write a class to inherit from Chinese

Sichuan human
Function Sichuanman () {
  Extend (this,new Chinese ());
}

Now that we've written a very robust inheritance code, understanding is also very simple, as long as the declaration of the new class, in the constructor called the inheritance function, we can implement the property and behavior function of the full inheritance, so that we can save a lot of code, the advantages of OOP ideas are again manifested, If we want to simulate people in every province of China, if every province of mine is written according to the Human class, it will not be written out from the sun until the next day the Sun Falls. Inheritance of a variety of ways, everyone has their own writing, here, I was in a most simple way to explain to you, to the back of everyone can be proficient in the use of time, but also in the way they like to write, JavaScript itself is a very flexible language.

To sum up, we today in the package based on further upgrades, so that we realize the object of inheritance, the written code is further compressed, think that can improve the efficiency of the work, but also improve the elegance of the code, is not a little bit of excitement, as long as follow my footsteps, We can use the simplest way to understand the most complex things, in fact, the process is not complex, complex reason is that we do not get the right to lead, is a very simple thing, by different people understand and explain to different things, so that learning is complex, More is not a continuous tutorial step-by-step to lead everyone to the right direction, so it is difficult to get promotion for a long time.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.