Home  >  Article  >  Web Front-end  >  Javascript playing with inheritance (1)_javascript skills

Javascript playing with inheritance (1)_javascript skills

WBOY
WBOYOriginal
2016-05-16 16:49:021155browse

I think everyone has their own opinion on whether Javascript is an object-oriented language or a language that supports objects. Those loyal fans of Javascript must say that Javascript is an object-oriented language. For example, the book "The Return of the King of Javascript" describes Javascript as object-oriented based on prototypes. Let me share my personal opinion. The three characteristics of object-oriented, inheritance, polymorphism, and encapsulation. Although Javascript is not as fast to implement as Java, C# and other object-oriented languages, it still has certain support after all. Therefore, it makes sense to say that Javascript is an object-oriented language. However, from the perspective of inheritance, there are a series of inheritance methods, but each inheritance method cannot realize the power of a true object-oriented language. Therefore, it is said that it is object-oriented. Somewhat far-fetched. To sum up, my understanding of Javascript is that I prefer to call it a simplified object-oriented, or "pseudo" object-oriented (this pseudo word has no derogatory meaning).

Today we will talk about the first feature of object-oriented: inheritance.
What is inheritance? I don’t want to talk nonsense about this. There is an animal, a person, and a girl. This is the simplest and typical inheritance chain.
In object-oriented languages ​​such as C#, it's easy.

Copy code The code is as follows:

class Animal
{ }
class People:Animal
{ }
class Girl:People
{ }

So in Javascript, there is no class or inheritance to provide implementation, what should we do?
Object camouflage (construction inheritance method)
What is object camouflage? We might call it structural inheritance to make it easier to understand. As the name suggests, you use constructors to play with inheritance. In fact, it means that the constructor of the parent class is regarded as an ordinary method and is executed in the constructor of the subclass. In this case, when constructing the object, the object of the subclass can of course construct the method of the parent class!

Still using the above example, the code is as follows:

Copy code The code is as follows:

function Animal()
{
         .Run=function(){alert("I can run");};
}
function People(name)
{
//Here the constructor of the parent class is passed in , and then execute the constructor method of the parent class. At this time, // you can use the methods in the parent class.
this.father=Animal;
this.father();
//Remember to delete, otherwise when the subclass adds a method with the same name to the parent class, it will be modified to the parent class.
delete this.Father;
this.name=name;
this.Say=function(){alert("My name is " this.name);}
}
function Girl (name,age)
{
this.father=People;
this.father(name);
delete this.father;
this.age=age;
this. Introduce=function(){alert("My name is " this.name ".I am " this.age);};
}

In this case, an inheritance chain is implemented. Test it:

Copy code The code is as follows:

var a=new Animal();
a .Run();
var p=new People("Windking");
p.Run();
p.Say();
var g=new Girl("Xuan", 22);
g.Run();
g.Say();
g.Introduce();

The results are as follows:

a.

b.

c.

d.

e.

f.

Test successful!

Let’s summarize the key points of this code, specify the parent class, declare the parent class object, and then delete the temporary variables. Do you find it troublesome? At least that's what I think. Once you forget to delete, you still have to bear the risk of the parent class being modified. For this, we use call and apply to improve this!
Let’s look at the code next, still the above example (in order to make it easier for everyone to understand, the requirements have been changed, Animal has a name):

Copy code The code is as follows:

function Animal(name)
{
this.Run=function(){alert("I can Run");};
}
function People(name)
{
//Use the call method to implement inheritance
this. father=Animal;
this.father.call(this,name);
this.name=name;
this.SayName=function(){alert("My name is " this.name;) ;};
}
function Girl(name,age)
{
//Use the apply method to implement inheritance
this.father=People;
this.father.apply( this,new Array(name));
this.age=age;
this.Introduce=function(){alert("My name is " this.name ".I am " this.age);} ;
}

Using the same test code, the test was found to be equally successful.

If you are a novice, you may be a little confused by the following two pieces of code. What is call and what is apply? Well, in the topic of playing with inheritance, I have added a supplement series. If you don’t understand this, you can read my article: "Playing with methods: call and apply".
Object camouflage is just a way to achieve inheritance. In the next article, I will continue to write about other inheritance methods and the advantages and disadvantages of several inheritance methods. Welcome to continue to pay attention.

Statement:
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