Recently, I have been familiar with html5. Of course, anyone who has been familiar with html5 knows that html5 only provides some new labels. The core of the entire implementation is still in javascript. During the summer vacation, we also launched the ext4 web desktop, which is more about javascript. For javascript, only document. getElementById () and alert () are available in the past. If there is anything wrong with this article, please point out.
As for javasript, it is based on objects. Therefore, it does not have the concept of classes. Therefore, to implement inheritance, it can only be implemented using the prototype of javascript. (In fact, this is wrong. Thanks to the @ memory forest prompt, you can also use apply and call to implement it)
Because javascript does not have a special mechanism to implement classes, we can only use its function nesting mechanism to simulate implementation classes. In javascript, a function can contain variables or other functions. In this way, we can use variables as class attributes, internal functions are used as member methods. Then, the outer function can be regarded as a class.
1. First, let's write an animal class. In fact, it is a function, but we can regard it as a constructor of this class.
The Code is as follows:
Function Animal (){
Console. log ('Call the constuctor .');
}
2. Then we can use the new keyword to create an instance of the myClass class.
Var cat = new Animal ();
In this way, we have created an instance obj. Run it and use the relevant debugging tools to view the debugging information of Call the constructor. This proves that the class is successfully created.
3. Then, we can add parameters to the constructor, for example:
The Code is as follows:
Function Animal (name ){
This. name = name;
}
In this way, we can create an instance and the attributes of the category class.
The Code is as follows:
Function myClass (name ){
This. name = name;
}
Var cat = new myClass ("Kate ");
Alert (cat. name );
In this way, you can access the cat attribute name of the instance.
4. As we all know, animals will jump and eat. How can we add methods to them? See the following:
Method 1: declare the method directly in the constructor
The Code is as follows:
Function Animal (name ){
This. name = name; this. jump = function (){
Alert (this. name + "is jumping ...");
};
This. eat = function (){
Alert (this. name + "is eatting ...");
};
}
Var cat = new Animal ("Kate ");
Alert (cat. name );
Cat. jump ();
Cat. eat ();
Method 2: Use prototype to add a class
The Code is as follows:
Function Animal (name ){
This. name = name;
}
Animal. prototype = {
Type: 'cat ',
Jump: function (){
Alert (this. name + "is jumping ...");
},
Eat: function (){
Alert (this. name + "is eatting ...");
}
}
Var cat = new Animal ("Kate ");
Alert (cat. name );
Alert (cat. type );
Cat. jump ();
Cat. eat ();
Similarly, we can use the same method to add new attributes for the class, such as type ....
5. What we mentioned above is how to create a class and add attributes and methods to the class in javascept. Next, let's talk about how to implement class inheritance.
To implement inheritance, we can use prototype to implement class inheritance. First, we need to declare a Dog class (if you do not understand it, please refer to the above content ), and inherit the Animal class.
The Code is as follows:
Function Dog (){};
Dog. prototype = new Animal ("Henry ");
Then we can instantiate a new dog and try to call it to see if it is successful?
The Code is as follows:
Function Dog (){};
Dog. prototype = new Animal ("Henry ");
Var dog = new Dog ();
Dog. jump ();
Dog. eat ();
Obviously, if the code is correct, you can see the prompt "Henry is jumping..." and "Henry is eatting ...".
6. Since class inheritance is implemented, another problem is the problem of polymorphism.
Polymorphism means that the same operation, function, and process can act on multiple types of objects and obtain different results. Different objects receive the same message and produce different results. This phenomenon is called polymorphism.
Through inheritance, the subclass has inherited the method of the parent class, but to realize polymorphism, it is necessary to rewrite the method of the subclass.
To make the expression clearer, we create a Pig class and inherit the Animal class. I won't talk about how to create it. The created code is like the current one.
The Code is as follows:
Function Dog (){};
Dog. prototype = new Animal ("Henry ");
Function Pig (){};
Pig. prototype = new Animal ("Coco ");
Var dog = new Dog ();
Dog. jump ();
Dog. eat ();
Var pig = new Pig ();
Pig. jump ();
Pig. eat ();
After running, because the Animal class is inherited, the result must be "XX is jumping... "," XX is eatting... ", what we need to implement is to rewrite the method. We can rewrite the implementation method in the following way.
The Code is as follows:
Function Dog () {}; // create a dog subclass
Dog. prototype = new Animal ("Henry ");
// Override the dog Method
Dog. prototype. jump = function (){
Alert ("Hi, this is" + this. name + ", I'm jumping ...")
};
Dog. prototype. eat = function (){
Alert ("Henry is eatting a bone now .");
};
Function Pig () {}; // create a pig subclass
Pig. prototype = new Animal ("Coco ");
// Rewrite the pig Method
Pig. prototype. jump = function (){
Alert ("I'm sorry." + this. name + "can not jump .");
};
Pig. prototype. eat = function (){
Alert ("Hi, I'm" + this. name + ", I'm eatting something delicious .");
}
Var dog = new Dog ();
Dog. jump ();
Dog. eat ();
Var pig = new Pig ();
Pig. jump ();
Pig. eat ();
Run the command to rewrite the method ??
6. What should I do if I want to add attributes and methods for a dog after instantiating it? See the following:
The Code is as follows:
Var dog = new Dog ();
// Add attributes and Methods
Dog. type = "Doberman Pinscher ";
Dog. shout = function (){
Alert ("I'm a" + this. type + ".");
}
Dog. jump ();
Dog. eat ();
// Call a New Method
Dog. shout ();
7. Now, this article is written here. I believe that Beginners should have a certain understanding of class creation and inheritance. If you have any questions, leave a message. Thank you for your advice.
